@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/noto-sans-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Serif Display";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("assets/fonts/noto-serif-display-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Serif Display";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("assets/fonts/noto-serif-display-italic-latin.woff2") format("woff2");
}

:root {
  --forest-950: #0d1810;
  --forest-900: #142219;
  --forest-800: #273820;
  /* Verde de meia-luz para o preenchimento dos botões sobre superfície
     clara — o verde deixa de ser fundo e vira o destaque da página. */
  --forest-700: #2f452f;
  --moss-600: #5e6637;
  --sand-300: #dbc1a8;
  --ivory-100: #f7f1e8;
  --lilac-300: #c9afd2;
  --white: #ffffff;

  /* Superfícies claras: o papel da página. Quentes o bastante para não
     soarem "interface branca" e para conversar com a areia da paleta. */
  --paper-100: #fbf8f3;
  --paper-200: #f4efe5;

  /* Tintas sobre claro. O título não é preto: é o próprio verde da marca
     levado ao extremo escuro, então a identidade sobrevive na tipografia. */
  --ink-900: #16241a;
  --plum-600: #75587f;
  --bronze-600: #7d5f40;

  --font-display: "Noto Serif Display", Georgia, serif;
  --font-body: "Noto Sans", Arial, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --page-padding: clamp(1.25rem, 4.5vw, 5rem);
  --content-width: 90rem;

  /* ── Sistema de superfície ─────────────────────────────────────────
     Cada seção declara a superfície em que está e herda daqui tinta,
     acentos, réguas e sombra. Trocar uma seção de escuro para claro
     passa a ser uma linha, não uma varredura de cores fixas.
     O padrão é a superfície escura — os valores abaixo são exatamente
     os que a página já usava. */
  --surface: var(--forest-950);
  --on-surface: var(--ivory-100);
  --on-surface-soft: rgb(247 241 232 / 80%);
  --on-surface-mute: rgb(247 241 232 / 62%);
  --accent-em: var(--lilac-300);
  --accent-text: var(--sand-300);
  --accent-label: var(--sand-300);
  --rule: rgb(247 241 232 / 13%);
  --rule-strong: rgb(247 241 232 / 22%);
  --shadow-soft: 0 2.4rem 4.5rem -2rem rgb(0 0 0 / 58%);
  --ink-70: rgb(247 241 232 / 78%);
  --ink-55: rgb(247 241 232 / 64%);

  /* Ritmo vertical em três alturas: respiro, padrão e clímax.
     A regra de uso é a junta, não a seção: quando a superfície MUDA
     (papel → mata), o próprio corte separa e as duas seções podem
     respirar em --pad-base; quando a superfície CONTINUA (papel →
     papel), o mesmo respiro vira um buraco e a junta fecha em
     --pad-tight. --pad-loose fica reservado ao fecho da página. */
  --pad-tight: clamp(3.5rem, 7vh, 5.5rem);
  --pad-base: clamp(5.5rem, 12vh, 9.5rem);
  --pad-loose: clamp(7rem, 18vh, 13.5rem);
}

/* Superfície clara: é aqui que a página ganha ar. As seções que a
   recebem viram papel, e o verde recua para tipografia, botões e
   acentos — deixando de ser o fundo de tudo. */
.surface-light {
  --surface: var(--paper-100);
  --on-surface: var(--ink-900);
  --on-surface-soft: rgb(22 36 26 / 76%);
  /* 66%, e não os 56% do equivalente escuro: sobre papel esse tom cai para
     3,8:1 e reprova no AA. A 66% fica em ~4,9:1 e continua secundário. */
  --on-surface-mute: rgb(22 36 26 / 66%);
  --accent-em: var(--plum-600);
  --accent-label: var(--bronze-600);
  --rule: rgb(22 36 26 / 12%);
  --rule-strong: rgb(22 36 26 / 20%);
  --shadow-soft: 0 2rem 3.6rem -1.6rem rgb(22 36 26 / 24%);

  color: var(--on-surface);
  background: var(--surface);
}

/* Variação quente do papel, para as seções mais íntimas. */
.surface-light--warm {
  --surface: var(--paper-200);
}

.surface-light :focus-visible {
  outline-color: var(--plum-600);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  color: var(--ivory-100);
  background: var(--forest-950);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

/* Grão fotográfico. Uma camada de ruído dá corpo de impressão às áreas
   chapadas sem alterar uma única cor da paleta. Recuou de 3,8% para 2,6%
   agora que metade da página é papel claro: acima disso o ruído escuro
   acinzenta as superfícies claras em vez de texturizá-las. */
body::after {
  content: "";
  position: fixed;
  z-index: 9997;
  inset: 0;
  opacity: 0.026;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* Masthead centrado: título e apoio empilhados no eixo da página. Era um
   par assimétrico (título à esquerda, nota ancorada à base à direita), mas
   metade da rolagem — Sala da Noiva, Por que, FAQ, Contato — já abria
   centrada, e essas duas seções eram a exceção que fazia a leitura
   tropeçar. Agora é uma régua só, em todas as larguras. */
.sec-head {
  display: grid;
  justify-items: center;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding-bottom: clamp(1.6rem, 3.4vh, 2.6rem);
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}

/* O apoio não acompanha a medida inteira do título: em tela larga uma
   linha centralizada de 90rem se lê como faixa, não como parágrafo. */
.sec-head__right {
  width: min(100%, 44rem);
}

.sec-head h2 {
  margin: 0;
}

img,
svg {
  display: block;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--lilac-300);
  outline-offset: 4px;
}

/* Resiliência de conteúdo: prosa longa (inclui depoimentos reais, ainda mais
   extensos que os placeholders) quebra sem estourar o container e evita órfãs. */
.hero__lead,
.espaco__lead,
.galeria__lead,
.pilar p,
.review__text p,
.faq__answer p,
.liberdade__lead,
.liberdade__card p,
.mapa-local__lead,
.cta-final__lead,
.site-footer__brand p {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* Títulos nunca hifenizam: com hyphens:auto o Chrome quebrava palavras no
   meio quando a coluna apertava ("Chegar é sim-/ples"), o que num display
   grande lê como erro de composição. overflow-wrap continua garantindo que
   uma palavra longa demais para a linha não estoure o container — mas ela
   quebra sem hífen, e só nesse caso extremo. */
h1,
h2,
h3 {
  overflow-wrap: break-word;
  hyphens: manual;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 1rem;
  padding: 0.8rem 1rem;
  color: var(--forest-950);
  background: var(--ivory-100);
  font-size: 0.85rem;
  font-weight: 600;
  transform: translateY(-130%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.connection-status {
  position: fixed;
  z-index: 1200;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: min(27rem, calc(100% - 2rem));
  padding: 0.95rem 0.95rem 0.95rem 1.1rem;
  border: 1px solid rgb(13 24 16 / 18%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 0.8rem;
  color: var(--forest-950);
  background: var(--ivory-100);
  box-shadow: 0 16px 38px rgb(0 0 0 / 28%);
  font-size: 0.88rem;
  line-height: 1.5;
}

.connection-status[hidden] {
  display: none;
}

.connection-status button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(13 24 16 / 22%);
  display: grid;
  place-items: center;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.connection-status button:hover {
  background: rgb(13 24 16 / 8%);
}

.connection-status svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.5;
}

/* Header */
.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  border-bottom: 1px solid transparent;
  transition:
    background 300ms ease,
    border-color 300ms ease,
    backdrop-filter 300ms ease;
}

/* Rolando, o cabeçalho recolhe de 100px para 76px e perde 14 pontos de
   opacidade. Sobre as seções de papel ele era uma barra preta chapada de
   100px — o elemento mais pesado da tela em metade da página. Recolhido e
   mais translúcido, continua legível e para de brigar com a leveza. */
.site-header.is-scrolled {
  border-color: rgb(247 241 232 / 12%);
  background: rgb(13 24 16 / 72%);
  backdrop-filter: blur(22px);
}

.site-header__inner {
  width: min(100%, var(--content-width));
  min-height: 6.25rem;
  margin-inline: auto;
  padding-inline: var(--page-padding);
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) auto minmax(10rem, 1fr);
  align-items: center;
  gap: 2.5rem;
  transition: min-height 300ms var(--ease-out);
}

.site-header.is-scrolled .site-header__inner {
  min-height: 4.75rem;
}

.brand {
  width: clamp(10.5rem, 13vw, 13.25rem);
  justify-self: start;
  transition: width 300ms var(--ease-out);
}

.site-header.is-scrolled .brand {
  width: clamp(8.75rem, 10.5vw, 11rem);
}

.brand img {
  width: 100%;
  height: auto;
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 2.3vw, 2.6rem);
}

.desktop-nav a {
  position: relative;
  padding-block: 0.65rem;
  color: rgb(247 241 232 / 78%);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: color 220ms ease;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.25rem;
  left: 0;
  height: 1px;
  background: var(--lilac-300);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms var(--ease-out);
}

.desktop-nav a:hover {
  color: var(--white);
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-cta {
  min-height: 3rem;
  padding: 0.75rem 1rem 0.75rem 1.15rem;
  border: 1px solid rgb(247 241 232 / 40%);
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 0.8rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition:
    color 220ms ease,
    background 220ms ease,
    border-color 220ms ease;
}

.header-cta svg {
  width: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.header-cta:hover {
  color: var(--forest-950);
  border-color: var(--ivory-100);
  background: var(--ivory-100);
}

.menu-toggle {
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid rgb(247 241 232 / 34%);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.42rem;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.menu-toggle span {
  width: 1.2rem;
  height: 1px;
  background: currentColor;
}

/* Hero */
.hero {
  position: relative;
  min-height: max(47.5rem, 100svh);
  overflow: hidden;
  isolation: isolate;
  background: var(--forest-900);
}

/* Véu de legibilidade concentrado na coluna editorial à esquerda. Ele
   preserva a leitura sem apagar o casal, que permanece livre no
   centro-direita da fotografia. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  /* A luz fica concentrada sobre a coluna editorial. O centro-direita,
     onde está o casal, recebe apenas o véu indispensável para integrar a
     fotografia ao rodapé de dados. */
  background:
    linear-gradient(
      90deg,
      rgb(13 24 16 / 0.78) 0%,
      rgb(13 24 16 / 0.66) 24%,
      rgb(13 24 16 / 0.34) 42%,
      rgb(13 24 16 / 0.08) 58%,
      transparent 72%
    ),
    linear-gradient(to top, rgb(13 24 16 / 0.78) 0%, rgb(13 24 16 / 0.22) 28%, transparent 54%),
    linear-gradient(180deg, rgb(13 24 16 / 0.42) 0%, rgb(13 24 16 / 0.12) 12%, transparent 22%);
  pointer-events: none;
}

.hero__media {
  position: absolute;
  z-index: -2;
  inset: 0;
}

.hero__slide,
.hero__slide img {
  width: 100%;
  height: 100%;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.25s ease;
}

.hero__slide.is-active {
  opacity: 1;
}

.hero__slide img {
  object-fit: cover;
  object-position: center;
}

.hero__slide:first-child img {
  transform-origin: center;
  animation: hero-aperture 780ms 40ms var(--ease-out) both;
}

/* Hero editorial: a fotografia conduz a composição e o texto ocupa somente
   a área negativa à esquerda. A coluna tem largura finita para nunca voltar
   a atravessar o casal no centro da imagem. */
.hero__inner {
  width: 100%;
  min-height: max(47.5rem, 100svh);
  margin-inline: 0;
  padding: clamp(8rem, 15vh, 10.5rem) var(--page-padding) 8rem;
  display: flex;
  align-items: center;
}

.hero__content {
  position: relative;
  z-index: 3;
  width: min(42rem, 46vw);
  min-width: 0;
}

.hero h1 {
  max-width: 100%;
  margin: 0;
  color: var(--ivory-100);
  font-family: var(--font-display);
  font-size: clamp(3.65rem, 6.3vw, 6.8rem);
  font-weight: 400;
  letter-spacing: -0.047em;
  line-height: 0.86;
}

.hero__line {
  display: block;
  animation: hero-line-arrival 560ms 240ms var(--ease-out) both;
}

.hero__line--b {
  margin-left: 0;
  animation-delay: 300ms;
}

.hero__line--c {
  margin-top: 0.22em;
  margin-left: 0;
  font-size: 0.36em;
  letter-spacing: -0.025em;
  line-height: 1.08;
  animation-delay: 360ms;
}

.hero h1 em {
  color: var(--accent-text);
  font-style: italic;
  font-weight: 400;
}

.hero__bottom {
  margin-top: clamp(1.8rem, 3.5vh, 2.6rem);
}

.hero__lead {
  max-width: 29rem;
  margin: 0;
  color: var(--ink-70);
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  font-weight: 400;
  line-height: 1.7;
  animation: hero-detail-arrival 360ms 400ms var(--ease-out) both;
}

.button {
  max-width: 100%;
  min-height: 3.75rem;
  padding: 1rem 1.1rem 1rem 1.35rem;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  /* Rótulos longos ("Solicitar orçamento e agendar visita") quebram em
     duas linhas no celular; sem balanceamento a segunda linha ficava com
     uma única palavra órfã. */
  text-wrap: balance;
  transition:
    color 260ms ease,
    background 260ms ease,
    border-color 260ms ease;
}

.button svg {
  width: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  transition: transform 260ms var(--ease-out);
}

.button--light {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--forest-950);
  background: var(--ivory-100);
}

/* O lilás entra deslizando de baixo em vez de trocar de cor de uma vez —
   a mesma paleta, com acabamento de peça impressa. */
.button--light::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--lilac-300);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 380ms var(--ease-out);
}

.button--light:hover::before,
.button--light:focus-visible::before {
  transform: scaleY(1);
}

/* Sobre papel, o mesmo botão inverte: passa a ser o bloco de verde da
   seção. É assim que o verde continua presente sem voltar a ser fundo —
   ele vira o elemento de maior peso da superfície clara. */
.surface-light .button--light {
  color: var(--ivory-100);
  background: var(--forest-900);
}

.surface-light .button--light::before {
  background: var(--forest-700);
}

.button:hover svg {
  transform: translate(2px, -2px);
}

/* A faixa de dados é uma tira aberta, sem moldura lateral. O filete de
   areia que a ancora nasce nela própria (::before) e não mais de um
   `bottom: 7.4rem` no hero: a régua passa a acompanhar a altura real da
   faixa em qualquer largura, inclusive quando um dos dados quebra em
   duas linhas. */
.hero__facts {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, rgb(13 24 16 / 76%) 0 34%, rgb(13 24 16 / 48%) 64%, rgb(13 24 16 / 18%) 100%);
  backdrop-filter: blur(16px);
}

.hero__facts::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgb(219 193 168 / 62%) 0%, rgb(219 193 168 / 22%) 46%, transparent 100%);
}

.hero__facts-inner {
  width: 100%;
  margin-inline: 0;
  padding-inline: var(--page-padding);
  display: grid;
  grid-template-columns: 0.82fr 1.5fr 1.08fr;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.hero__facts p {
  min-height: 6.6rem;
  margin: 0;
  padding: 1.35rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: rgb(247 241 232 / 88%);
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 1.3vw, 1.18rem);
  line-height: 1.35;
}

/* Entre 47rem e 64rem os três dados dividem a mesma largura em vez de
   herdarem as proporções do desktop largo: era aí que a coluna do meio
   estrangulava e a da direita quebrava sozinha em duas linhas. */
@media (min-width: 47.0625rem) and (max-width: 64rem) {
  .hero__facts-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 2.25rem);
  }

  .hero__facts p {
    font-size: 0.95rem;
  }
}

/* Regra do sistema de acentos: areia identifica dado e estrutura
   (rótulos, índices, numerais); lilás fica reservado para a ênfase
   emocional (grifos nos títulos, ícones, marcadores). Antes tudo era
   lilás, e o acento perdia o significado de tanto se repetir. */
.hero__facts span {
  margin-bottom: 0.5rem;
  color: var(--sand-300);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

/* Sala da Noiva — seção-vitrine editorial.
   É o momento mais íntimo da página, então recebe a variação quente do
   papel: luz de manhã em vez de mata fechada. O verde sai completamente
   do fundo aqui e sobrevive só no botão e nas fotografias. */
.sala-noiva {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Papel quente chapado, e não uma fusão de 22% a partir do papel frio:
     diluída ao longo de 2000px a passagem era literalmente invisível, e
     a seção começava sem nenhum sinal de que algo tinha mudado. Chapado,
     o degrau de tom marca a junta sem precisar de linha nem de vão. */
  background: var(--surface);
  padding-top: var(--pad-tight);
  padding-bottom: var(--pad-base);
}

/* Halo lilás suave de profundidade — sobre papel ele precisa de mais
   saturação e menos alfa para continuar existindo sem sujar o branco. */
.sala-noiva__glow {
  position: absolute;
  z-index: -1;
  top: 4%;
  right: -6%;
  width: min(46rem, 58vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(117 88 127 / 12%) 0%, rgb(117 88 127 / 4%) 42%, transparent 68%);
  filter: blur(14px);
  pointer-events: none;
}

.sala-noiva__inner {
  position: relative;
  width: min(100%, var(--content-width));
  margin-inline: auto;
  padding-inline: var(--page-padding);
}

/* Masthead editorial: o título fica sozinho e abre espaço para a sequência
   fotográfica assumir o papel narrativo da seção. */
.sala-noiva__head {
  padding-bottom: clamp(2rem, 4vh, 3.25rem);
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}

.sala-noiva h2 {
  margin: 0;
  color: var(--on-surface);
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5.6rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-wrap: balance;
}

.sala-noiva h2 em {
  color: var(--accent-text);
  font-style: italic;
  font-weight: 400;
}

.sala-noiva__cta {
  flex: 0 1 auto;
}

.sala-noiva__action {
  margin-top: clamp(2.4rem, 5vh, 4rem);
  display: flex;
  justify-content: center;
}

/* Dois camarins na mesma seção, empilhados na mesma caixa. O que
   distingue o segundo do primeiro é a troca de lado da foto grande, não
   a posição do bloco — alinhados, eles leem como par; desalinhados,
   leem como erro de grade. */
.sala-noiva__block + .sala-noiva__block {
  margin-top: clamp(3rem, 6vh, 5rem);
}

/* Rótulo de bloco: areia/bronze, o mesmo acento que a página reserva
   para dado e estrutura — nunca para ênfase emocional. Sempre na margem
   editorial, a borda que os dois blocos têm em comum. */
.sala-noiva__label {
  margin: 0 0 clamp(0.9rem, 2vh, 1.4rem);
  color: var(--accent-label);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

/* Galeria: herói luminoso à esquerda, dupla P&B + espelho empilhada à
   direita. As larguras de coluna (1.47 / 1) estão calibradas para que as
   alturas nativas 2:3 e (3:2 + 2:3) fiquem alinhadas na base — sem corte. */
/* A tríade de fotos rompe o container pela direita e vai até o vidro,
   deixando só a coluna da esquerda alinhada à margem editorial. */
.sala-noiva__gallery {
  display: grid;
  grid-template-columns: 1.47fr 1fr;
  gap: clamp(0.9rem, 1.5vw, 1.5rem);
  align-items: start;
  margin-right: calc(var(--page-padding) * -1);
}

.sala-noiva__stack {
  display: grid;
  gap: clamp(0.9rem, 1.5vw, 1.5rem);
  align-content: start;
}

/* Espelho do bloco do noivo: mesmas proporções 1.47/1, invertidas.
   A ordem no DOM continua herói → stack para que o celular abra pela
   foto grande; quem troca de lado é a grade, não o HTML.
   A sangria NÃO espelha junto: com um bloco fugindo para a direita e o
   outro para a esquerda, os dois não dividiam nenhuma linha vertical e a
   pilha inteira lia como desalinhada. Os dois ocupam a mesma caixa —
   margem editorial à esquerda, vidro à direita — e o espelhamento fica
   por conta de qual coluna leva a foto grande. */
.sala-noiva__gallery--mirror {
  grid-template-columns: 1fr 1.47fr;
}

.sala-noiva__gallery--mirror .sala-noiva__hero {
  order: 2;
}

.sala-noiva__gallery--mirror .sala-noiva__stack {
  order: 1;
}

.sala-noiva__hero,
.sala-noiva__accent,
.sala-noiva__support {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--forest-900);
  box-shadow: var(--shadow-soft);
}

.sala-noiva__hero img,
.sala-noiva__accent img,
.sala-noiva__support img {
  width: 100%;
  height: auto;
}

.sala-noiva__accent figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2.75rem 1.15rem 0.95rem;
  background: linear-gradient(transparent, rgb(13 24 16 / 74%));
  color: var(--ivory-100);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Entradas de apoio — discretas e sempre visíveis por padrão. */
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(0.75rem);
  will-change: opacity, transform;
  transition:
    opacity 520ms var(--ease-out) var(--reveal-delay, 0ms),
    transform 520ms var(--ease-out) var(--reveal-delay, 0ms);
}

.motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* A sequência da Sala da Noiva mantém a relação entre as três fotografias. */
.motion-ready .sala-noiva__gallery[data-reveal] {
  transform: none;
}

.motion-ready .sala-noiva__gallery > *,
.motion-ready .sala-noiva__stack > * {
  transform: translateY(1rem);
  transition: transform 580ms var(--ease-out);
}

.sala-noiva__gallery.is-visible .sala-noiva__hero {
  transform: none;
  transition-delay: 60ms;
}

.sala-noiva__gallery.is-visible .sala-noiva__accent {
  transform: none;
  transition-delay: 140ms;
}

.sala-noiva__gallery.is-visible .sala-noiva__support {
  transform: none;
  transition-delay: 220ms;
}

.sala-noiva__gallery.is-visible .sala-noiva__stack {
  transform: none;
}

/* ── Reveal bidirecional de seção ──────────────────────────────────── */

/* Estado oculto — só ativo após .motion-ready (anti-FOUC). */
.motion-ready [data-section-reveal] {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out);
}

/* Estado visível. */
.motion-ready [data-section-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* Enquanto a seção ainda não entrou, o delay do stagger fica zerado: ele
   só deve contar a partir do momento em que a seção é revelada, nunca
   somar tempo de espera anterior. */
.motion-ready [data-section-reveal]:not(.is-visible) [data-reveal] {
  transition-delay: 0ms !important;
}

/* prefers-reduced-motion: tudo visível, sem animação. */
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-section-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

@media (max-width: 60rem) {
  .sala-noiva__gallery,
  .sala-noiva__stack {
    gap: clamp(0.9rem, 3vw, 1.4rem);
  }

  /* A sangria pela direita é um gesto de tela larga: com a página inteira
     numa coluna só, ela deixa de ler como quebra de grade e passa a ler
     como erro — as fotos morrem no vidro enquanto o filete do título e o
     botão param na margem de página. Aqui a tríade volta ao esquadro. */
  .sala-noiva__gallery {
    margin-right: 0;
  }
}

/* A tríade só desmonta no celular. Entre 34rem e 60rem ela continua em
   duas colunas: empilhadas em largura total nessa faixa, as três fotos
   somavam mais de 3.000px — quatro viewports de rolagem para uma única
   seção, e a proporção 1.47/1 que faz as bases baterem se perdia junto. */
@media (max-width: 34rem) {
  .sala-noiva__gallery,
  .sala-noiva__gallery--mirror {
    grid-template-columns: 1fr;
  }

  /* Em coluna única a inversão perde a função e só embaralharia a
     leitura: o herói volta a abrir o bloco, como no da noiva. */
  .sala-noiva__gallery--mirror .sala-noiva__hero,
  .sala-noiva__gallery--mirror .sala-noiva__stack {
    order: 0;
  }
}

/* O espaço / experiência.
   Primeira virada da página: sai-se do hero fotográfico escuro direto
   para o papel. É o corte que instala a leveza — e o que faz a fotografia
   da coluna esquerda passar a brilhar em vez de se dissolver no fundo. */
.espaco {
  position: relative;
  isolation: isolate;
  /* Sopro de verde no canto superior esquerdo: a natureza continua a
     entrar na superfície clara, só que como luz, não como chapado. */
  background:
    radial-gradient(80% 58% at 6% 4%, rgb(94 102 55 / 10%) 0%, transparent 60%),
    var(--surface);
  /* A base fecha curta porque a Sala da Noiva vem no mesmo papel: os
     270px que havia aqui não eram respiro, eram uma tela vazia. */
  padding-top: var(--pad-base);
  padding-bottom: var(--pad-tight);
}

/* A seção abandona o container centrado: a coluna de imagem nasce em
   x = 0, colada no vidro, e só a coluna de texto respeita a margem da
   página. É a quebra de grade que separa esta seção de um "bloco de
   duas colunas" qualquer. */
.espaco__inner {
  width: 100%;
  margin-inline: 0;
  /* Só a esquerda sangra. À direita a seção volta a obedecer à mesma
     calha das demais (--content-width), para que a coluna de texto
     termine exatamente na margem de página do resto da rolagem. */
  padding-left: 0;
  padding-right: calc(max(0px, 100% - var(--content-width)) / 2);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5.5vw, 6rem);
  align-items: start;
}

.espaco__media {
  position: relative;
}

/* Ancorada à direita, e não à esquerda da coluna: assim a medida de 34rem
   fecha na margem de página em vez de parar 55px antes dela — era o
   único bloco da rolagem cuja borda direita não batia com as outras. */
.espaco__text {
  justify-self: end;
  padding-right: var(--page-padding);
}

.espaco__img {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  background: var(--forest-900);
}

.espaco__img picture {
  width: 100%;
  display: block;
}

.espaco__img img {
  display: block;
  width: 100%;
  height: auto;
}

.espaco__img--main {
  box-shadow: var(--shadow-soft);
}

.espaco__img--main img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 40%;
}

/* 34rem é a medida do texto; o padding-direito entra por fora dela para
   que a coluna encoste na margem de página sem estreitar a linha. */
.espaco__text {
  max-width: calc(34rem + var(--page-padding));
}

.espaco h2 {
  margin: 0;
  color: var(--on-surface);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.4vw, 3.9rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}

.espaco h2 em {
  color: var(--accent-text);
  font-style: italic;
}

.espaco__lead {
  margin: clamp(1.3rem, 2.6vh, 1.9rem) 0 clamp(1.6rem, 3vh, 2.2rem);
  color: var(--on-surface-soft);
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.78;
}

.espaco__list {
  margin: 0 0 clamp(2rem, 3.6vh, 2.8rem);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.85rem;
}

.espaco__list li {
  position: relative;
  padding-left: 1.7rem;
  color: var(--on-surface-soft);
  font-size: 0.98rem;
  line-height: 1.5;
}

.espaco__list li::before {
  content: "";
  position: absolute;
  top: 0.42em;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--accent-em);
  transform: rotate(45deg);
}

@media (max-width: 60rem) {
  .espaco__inner {
    grid-template-columns: 1fr;
    gap: clamp(2.75rem, 8vw, 3.5rem);
  }

  /* Empilhada, a foto não sangra mais à esquerda: nascia em x = 0 e
     morria 8% antes da margem direita, então não era nem sangria nem
     margem — era o texto numa calha e a fotografia noutra. Numa coluna
     só, as duas dividem a mesma calha e a seção volta ao esquadro; a
     cerimônia continua ocupando toda a medida útil da tela. */
  .espaco__media {
    order: 2;
    max-width: none;
    margin-inline: var(--page-padding);
  }

  /* Empilhado, a imagem sangra à esquerda — o texto volta a nascer na
     mesma margem, e não ancorado à direita como no layout de duas
     colunas. */
  .espaco__text {
    order: 1;
    justify-self: start;
    max-width: 34rem;
    padding-inline: var(--page-padding);
  }
}

/* Galeria */
.galeria {
  /* Rede de segurança: a pista do carrossel é muito mais larga que a tela
     e nenhum descuido nela pode empurrar a página na horizontal. */
  overflow-x: clip;
  background:
    radial-gradient(70% 45% at 88% 4%, rgb(94 102 55 / 13%) 0%, transparent 60%),
    var(--forest-950);
  padding-block: var(--pad-base);
}

.galeria__inner {
  width: min(100%, var(--content-width));
  margin-inline: auto;
  padding-inline: var(--page-padding);
}

.galeria h2 {
  margin: 0;
  color: var(--ivory-100);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.4vw, 3.9rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}

/* Ênfase em areia, não em lilás: o segundo acento da paleta quebra a
   repetição do mesmo grifo lilás em todos os títulos da página. */
.galeria h2 em {
  color: var(--sand-300);
  font-style: italic;
}

.galeria__lead {
  margin: 0;
  color: var(--ink-70);
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.75;
}

/* ── Carrossel contínuo ────────────────────────────────────────────────
   O mosaico anterior misturava sete tamanhos diferentes: cada foto era
   uma exceção, e a seção lia-se como uma grade de miniaturas. Aqui há só
   duas caixas — retrato 4:5 e horizontal 3:2 — e a faixa corre sozinha,
   da direita para a esquerda, em velocidade de contemplação.

   Toda a medida sai de uma única altura de banda. As larguras são
   derivadas dela pela proporção, então as peças de mesma orientação são
   rigorosamente idênticas e a faixa tem topo e base retos.  */
.galeria__viewport {
  /* Uma única altura governa a faixa inteira em todas as larguras. O piso
     de 16rem existe para que no celular a banda continue sendo fotografia
     de verdade, e não uma fita de miniaturas. */
  --gal-h: clamp(16rem, 26vw + 4rem, 30rem);
  --gal-gap: clamp(0.6rem, 1.1vw, 1.35rem);
  /* Velocidade em px/s — o mesmo mecanismo dos depoimentos. Passou por
     41 (parecia parada) e 68 (ainda arrastada) até 90: no desktop um card
     cruza a própria largura em ~3,9s, que é o limite antes da faixa virar
     fita de miniaturas. Bem acima dos depoimentos (54) de propósito: foto se lê
     num relance, frase não. */
  --gal-pps: 90;

  position: relative;
  /* `clip` não cria contêiner de rolagem; `hidden` fica como reserva. */
  overflow: hidden;
  overflow: clip;
  touch-action: pan-y;
  /* As bordas se dissolvem no verde da seção em vez de cortarem a foto
     numa linha dura — a faixa parece continuar para fora da tela. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
}

/* Mesma estrutura dos depoimentos: sem largura intrínseca e sem caixa de
   conjunto, para que nenhum motor tenha o que calcular errado — e sem
   camada de composição permanente. */
.galeria__track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gal-gap);
  align-items: stretch;
}

.galeria__group {
  display: contents;
}

.galeria__track.is-ready {
  animation: galeria-marquee var(--marquee-duration, 95s) linear infinite;
}

.galeria__track.is-paused {
  animation-play-state: paused;
}

/* Mesma reserva sem JavaScript dos depoimentos: a faixa vira tira arrastável
   em vez de ficar travada mostrando uma foto só. */
html:not(.js) .galeria__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  -webkit-mask-image: none;
  mask-image: none;
}

html:not(.js) .galeria__shot {
  scroll-snap-align: center;
}

/* O passo é medido no DOM e publicado em px por --marquee-shift, igual ao
   dos depoimentos. O valor de reserva é a fórmula antiga em porcentagem:
   um grupo inteiro MAIS a calha que o separa da duplicata, já que -50% da
   pista sozinho pararia meia calha antes. */
@keyframes galeria-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(var(--marquee-shift, calc(-50% - (var(--gal-gap) / 2))), 0, 0);
  }
}

.galeria__shot {
  position: relative;
  flex: 0 0 auto;
  height: var(--gal-h);
  margin: 0;
  overflow: hidden;
  background: var(--forest-900);
}

.galeria__shot--portrait {
  width: calc(var(--gal-h) * 4 / 5);
}

.galeria__shot--landscape {
  width: calc(var(--gal-h) * 3 / 2);
}

.galeria__shot picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* object-fit: cover com object-position por peça — a caixa é fixa, e o
   recorte é dirigido foto a foto para não decepar rostos nem altares. */
.galeria__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
  transition: transform 900ms var(--ease-out);
}

/* Vinheta de assentamento, não de escurecimento: só o suficiente para a
   base da banda não vibrar contra o verde da seção. Estava em 34% × 0,7
   e roubava luz de nove fotografias de uma vez — o oposto do que a
   galeria existe para fazer. */
.galeria__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgb(13 24 16 / 26%) 100%);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 600ms ease;
}

/* Pausar sob o cursor é cortesia, não requisito: a faixa anda sozinha e
   nunca depende de interação para continuar. */
@media (hover: hover) and (pointer: fine) {
  .galeria__viewport:hover .galeria__track.is-ready {
    animation-play-state: paused;
  }

  .galeria__shot:hover img {
    transform: scale(1.04);
  }

  .galeria__shot:hover::after {
    opacity: 0;
  }
}

@media (max-width: 47rem) {
  .galeria__viewport {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
  }
}

/* Sem movimento: a faixa vira um carrossel de arrastar com encaixe, e a
   duplicata some para não repetir as fotos. */
@media (prefers-reduced-motion: reduce) {
  /* Aqui a rolagem é intencional e precisa vencer o `clip` da regra base:
     sem animação, arrastar é a única forma de ver as outras fotos. */
  .galeria__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .galeria__track.is-ready {
    animation: none;
    transform: none;
  }

  .galeria__group[aria-hidden="true"] {
    display: none;
  }

  .galeria__shot {
    scroll-snap-align: center;
  }
}

/* Por que escolher — um tríptico fotográfico com a promessa centralizada
   antes dos três benefícios: cenário, acesso e tradição. */
.porque {
  background:
    radial-gradient(95% 48% at 50% 0%, rgb(39 56 32 / 11%) 0%, transparent 64%),
    var(--surface);
  padding-block: var(--pad-base);
}

.porque__inner {
  width: min(100%, var(--content-width));
  margin-inline: auto;
  padding-inline: var(--page-padding);
}

.porque__layout {
  display: grid;
  gap: clamp(2.75rem, 5vw, 4.75rem);
}

.porque__head {
  width: min(100%, 48rem);
  margin-inline: auto;
  text-align: center;
}

.porque h2 {
  margin: 0;
  color: var(--on-surface);
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 5.2vw, 4.8rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.94;
  text-wrap: balance;
}

.porque h2 .porque__accent {
  color: var(--accent-text);
}

.porque h2 em {
  display: block;
  color: var(--accent-text);
  font-style: italic;
}

.porque__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
  align-items: stretch;
}

.pilar {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--paper-200);
  display: flex;
  flex-direction: column;
}

.pilar__media {
  flex: 0 0 auto;
  min-height: 0;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  background: var(--forest-900);
}

.pilar__media picture {
  width: 100%;
  height: 100%;
  display: block;
}

.pilar__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  transition: transform 900ms var(--ease-out);
}

.pilar:hover .pilar__media img {
  transform: scale(1.025);
}

.pilar__body {
  flex: 1;
  min-width: 0;
  padding: clamp(1.5rem, 2.8vw, 2.35rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pilar--acesso {
  color: var(--ivory-100);
  background:
    radial-gradient(95% 80% at 100% 0%, rgb(201 175 210 / 11%) 0%, transparent 58%),
    var(--forest-900);
}

.pilar__label {
  display: block;
  margin-bottom: clamp(1rem, 2vh, 1.35rem);
  color: var(--accent-label);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.pilar--acesso .pilar__label {
  color: var(--sand-300);
}

.pilar h3 {
  margin: 0 0 0.75rem;
  color: var(--on-surface);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.pilar--acesso h3 {
  color: var(--ivory-100);
}

.pilar p {
  margin: 0;
  color: var(--on-surface-soft);
  font-size: 0.95rem;
  line-height: 1.68;
}

.pilar--acesso > .pilar__body > p {
  color: rgb(247 241 232 / 72%);
}

.pilar__routes {
  width: 100%;
  margin: auto 0 0;
  padding-top: clamp(1.25rem, 2.5vh, 1.75rem);
  border-top: 1px solid rgb(247 241 232 / 15%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.pilar__routes div {
  min-width: 0;
}

.pilar__routes dt {
  margin-bottom: 0.4rem;
  color: rgb(247 241 232 / 58%);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.pilar__routes dd {
  margin: 0;
  color: var(--ivory-100);
  font-family: var(--font-display);
  font-size: 0.9rem;
}

.pilar__routes strong {
  margin-right: 0.12em;
  color: var(--sand-300);
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.04em;
}

.pilar .pilar__years {
  width: 100%;
  margin: clamp(1.25rem, 2.5vh, 1.75rem) 0;
  padding-block: clamp(1rem, 2vh, 1.35rem);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0.85rem;
}

.pilar__years strong {
  color: var(--accent-text);
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 6vw, 5.4rem);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.82;
}

.pilar__years span {
  max-width: 9rem;
  color: var(--on-surface-mute);
  font-size: 0.72rem;
  line-height: 1.35;
}

@media (max-width: 68rem) {
  .porque__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pilar--confianca {
    grid-column: 1 / -1;
    width: calc((100% - clamp(1rem, 1.8vw, 1.5rem)) / 2);
    justify-self: center;
  }
}

@media (max-width: 52rem) {
  .porque__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pilar--confianca {
    grid-column: auto;
    width: 100%;
  }

  .pilar__media {
    aspect-ratio: 4 / 3;
  }
}

/* Depoimentos */
.depo {
  background: var(--forest-950);
  padding-block: var(--pad-base);
}

.depo__inner {
  width: min(100%, var(--content-width));
  margin-inline: auto;
  padding-inline: var(--page-padding);
}

.depo h2 {
  margin: 0;
  color: var(--ivory-100);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.4vw, 3.9rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}

.depo h2 em {
  color: var(--accent-text);
  font-style: italic;
}

.depo__sprite {
  position: absolute;
  width: 0;
  height: 0;
}

/* O padding vertical existe para o recorte do carrossel não cortar a sombra
   dos cards — subiu junto com a sombra branca sobre o verde.

   `overflow: clip` em vez de `hidden` é o ponto central da correção. Uma
   caixa `hidden` continua sendo um contêiner de rolagem: aqui ela tinha
   ~3900px de curso, e qualquer coisa que a rolasse (âncora #depoimentos,
   foco, scroll anchoring do próprio navegador, leitor de tela) somava esse
   deslocamento ao translate da esteira. As duas coisas juntas levavam a
   janela para além do fim da faixa e a seção ficava só com o verde, sem
   volta — porque scrollLeft não faz parte do laço da animação.
   `clip` não cria contêiner de rolagem, então esse deslocamento não existe.
   `hidden` fica antes como reserva para navegadores sem suporte a `clip`. */
.depo__viewport {
  --review-gap: clamp(1.1rem, 1.8vw, 1.6rem);
  /* A medida do card vive aqui como variável porque precisa alimentar duas
     propriedades ao mesmo tempo — flex-basis e max-width. Os breakpoints
     trocam só este valor. */
  --review-card: calc((min(100vw, var(--content-width)) - (2 * var(--page-padding)) - (2 * var(--review-gap))) / 3);
  /* Velocidade real, em pixels por segundo — não duração. A duração é
     derivada da largura medida, então a esteira anda no mesmo ritmo em
     qualquer largura de tela, sem números afinados por breakpoint. */
  --review-pps: 54;
  position: relative;
  margin-block: -2.5rem;
  padding-block: 2.5rem;
  overflow: hidden;
  overflow: clip;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}

/* Nem `width: max-content` nem conjunto com caixa própria — e é aqui que
   mora a correção do Safari.

   Enquanto os conjuntos eram contêineres flex dimensionados por
   `max-content`, a largura deles dependia de como cada motor calcula a
   contribuição max-content dos cards. O WebKit usa o parágrafo numa linha
   só (~1200px por card) em vez do flex-basis já definido, e sobrava um vão
   enorme dentro de cada conjunto — a esteira atravessava esse vazio com a
   seção só no verde. Limitar com `max-width` resolve nas versões novas do
   WebKit, mas continua sendo uma aposta no cálculo intrínseco do motor.

   Com `display: contents` o conjunto deixa de gerar caixa: os cards viram
   filhos diretos da faixa e a única medida que existe é a soma real dos
   cards e das calhas. Não há mais largura intrínseca para nenhum motor
   errar. A faixa também não precisa de `max-content`: com `nowrap` e
   cards que não encolhem, eles se posicionam em sequência e transbordam
   para fora — e quem recorta é a janela.

   Sem `will-change` e sem `backface-visibility` de propósito: os dois
   promoviam a faixa a uma camada de composição permanente de ~12000px de
   textura num iPhone a 3×, candidata a ser descartada sob pressão de
   memória. Animação de `transform` já é composta sem dica nenhuma. */
.depo__track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--review-gap);
  align-items: stretch;
}

.depo__group {
  display: contents;
}

.depo__track.is-ready {
  animation: reviews-marquee var(--marquee-duration, 42s) linear infinite;
}

.depo__track.is-paused {
  animation-play-state: paused;
}

/* Sem JavaScript a esteira não anda — quem a aciona é o script, que mede o
   passo e põe .is-ready. Sem este bloco a janela recortaria tudo e sobraria
   um card só, sem meio de chegar aos outros. A classe .js entra no <html>
   ainda durante a análise do documento, então quem tem script nunca vê esta
   regra. `overflow-y: hidden` é explícito para não herdar o `clip` da regra
   base e travar a rolagem horizontal. */
html:not(.js) .depo__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  -webkit-mask-image: none;
  mask-image: none;
}

html:not(.js) .review {
  scroll-snap-align: start;
}

/* O passo do laço é medido no DOM (distância entre o início do 1º e do 2º
   conjunto) e publicado em px por --marquee-shift. Medir em vez de calcular
   absorve largura de card, calha, quantidade, arredondamento de subpixel e
   as remedições após fontes e imagens carregarem. O valor de reserva é a
   fórmula antiga em porcentagem, válida enquanto a faixa tiver 2 conjuntos. */
@keyframes reviews-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(var(--marquee-shift, calc(-50% - (var(--review-gap) / 2))), 0, 0);
  }
}

/* ── Depoimento como avaliação do Google ──────────────────────────────
   Esta seção já passou por uma versão "coluna editorial" — citação em
   serifa sobre o verde, sem card. A escolha do cliente é a prova social
   explícita: o card tem de ser reconhecível como uma avaliação do Google,
   porque é o formato que o visitante já sabe ler como depoimento real.

   O card volta a ser a avaliação do Google como ela é: fundo branco sobre
   o verde da seção, nome em caixa normal, estrelas no dourado do Google e
   o G de quatro cores no canto. A ordem do DOM (nome → estrelas → citação)
   já é a ordem do widget, então não há mais inversão de `order`. */
.review {
  flex: 0 0 var(--review-card);
  /* max-width repete a medida do flex-basis de propósito, e é ela que
     conserta o carrossel no Safari/iOS. Ao dimensionar `width: max-content`
     dos conjuntos, o WebKit usa a contribuição max-content de cada card — o
     parágrafo numa linha só, ~1200px — em vez do flex-basis já definido.
     Cada conjunto ficava com ~5300px de vazio depois dos cards, e a esteira
     atravessava esse vão com a seção só no verde antes de voltar. Com o teto
     explícito, a contribuição max-content passa a ser a própria medida do
     card e o conjunto fecha exatamente no último. O Blink já calculava
     certo, e é por isso que no PC nunca sumia. */
  max-width: var(--review-card);
  /* Sem isto o `min-width: auto` do flex deixa o card crescer até o
     min-content do texto — largura que muda quando a fonte troca da de
     sistema para a web font, e com ela mudaria o passo do laço. */
  min-width: 0;
  margin: 0;
  padding: clamp(1.35rem, 1.9vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgb(22 36 26 / 10%);
  border-radius: 0.875rem;
  background: #fff;
  box-shadow: 0 1.4rem 2.6rem -1.4rem rgb(6 14 9 / 55%);
}

.review__head {
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
}

/* O monograma sai: a inicial não acrescenta nada que o nome já não diga,
   e trazia consigo as seis cores fora da paleta. */
.review__avatar {
  display: none;
}

/* O logotipo está dentro de __who no HTML, então é aqui que o
   space-between precisa agir para o G fechar no canto do card. */
.review__who {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.review__name {
  min-width: 0;
  color: #202124;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}

/* Só o logotipo: o texto "Avaliação no Google" virou rótulo acessível no
   HTML, porque o G de quatro cores já diz a procedência. */
.review__src {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.review__src .review__glogo {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}

.review__stars {
  margin-bottom: 0.75rem;
  color: #fbbc04;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  line-height: 1;
}

.review__text {
  margin: 0;
}

.review__text p {
  margin: 0;
  color: rgb(32 33 36 / 84%);
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.62;
}

@media (hover: hover) and (pointer: fine) {
  .depo__viewport:hover .depo__track {
    animation-play-state: paused;
  }
}

/* As durações por breakpoint saíram: a velocidade agora é uma só
   (--review-pps) e a duração vem da largura medida, então tablet e celular
   já andam no mesmo ritmo do desktop sem números afinados à mão. */
@media (max-width: 70rem) {
  .depo__viewport {
    --review-card: clamp(18rem, 72vw, 24rem);
  }
}

@media (max-width: 48rem) {
  .depo__viewport {
    --review-card: min(82vw, 21rem);
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Aqui a rolagem é intencional: sem animação, arrastar é a única forma de
     chegar aos outros depoimentos. `overflow` volta a `auto` de propósito. */
  .depo__viewport {
    overflow: auto hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .depo__track.is-ready {
    animation: none;
    transform: none;
  }

  .depo__group[aria-hidden="true"] {
    display: none;
  }

  .review {
    scroll-snap-align: start;
  }
}

/* FAQ — título e dúvidas compartilham um único eixo central, deixando a
   leitura mais direta e preservando os controles nas extremidades. */
.faq {
  background: var(--surface);
  /* A Localização vem no mesmo papel: a junta fecha curta. */
  padding-top: var(--pad-base);
  padding-bottom: var(--pad-tight);
}

.faq__inner {
  width: min(100%, 72rem);
  margin-inline: auto;
  padding-inline: var(--page-padding);
  display: grid;
  gap: clamp(2.75rem, 5vw, 4.75rem);
}

.faq__head {
  width: min(100%, 56rem);
  margin-inline: auto;
  text-align: center;
}

.faq h2 {
  margin: 0;
  color: var(--on-surface);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.8vw, 4.4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-wrap: balance;
}

.faq h2 .faq__accent {
  color: var(--accent-text);
}

.faq h2 em {
  color: inherit;
  font-style: italic;
}

.faq__list {
  width: 100%;
  margin-inline: auto;
  border-top: 1px solid var(--rule);
}

.faq__item {
  border-bottom: 1px solid var(--rule);
}

.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(1.25rem, 2.5vh, 1.6rem) 0;
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr) 1.1rem;
  align-items: center;
  gap: 1.5rem;
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.5;
  text-align: center;
  transition: color 220ms ease;
}

.faq__item summary::before {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary:hover {
  color: var(--accent-text);
}

.faq__mark {
  position: relative;
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
}

.faq__mark::before,
.faq__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.1rem;
  height: 1.5px;
  background: var(--accent-em);
  transform: translate(-50%, -50%);
  transition: transform 220ms var(--ease-out);
}

.faq__mark::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__item[open] .faq__mark::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq__answer {
  padding: 0 0 clamp(1.25rem, 2.5vh, 1.6rem);
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}

.faq__item[open] .faq__answer {
  animation: faq-answer-arrival 220ms var(--ease-out) both;
}

@keyframes faq-answer-arrival {
  from {
    opacity: 0;
    transform: translateY(-0.35rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.faq__answer p {
  margin: 0;
  color: var(--on-surface-soft);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.75;
}

.button:active,
.header-cta:active {
  transform: translateY(1px);
}

/* Liberdade de fornecedores — a oitava dobra funciona como manifesto,
   não como política comercial. A composição em duas colunas empilhava
   dois blocos de tipografia grande (título + citação display) na mesma
   altura da tela e a dobra ficava pesada de ler. Agora o eixo é único e
   centrado: título, subtítulo e três colunas curtas ancoradas por ícone. */
.liberdade {
  background:
    radial-gradient(74% 58% at 4% 16%, rgb(201 175 210 / 11%) 0%, transparent 64%),
    radial-gradient(68% 58% at 96% 92%, rgb(94 102 55 / 9%) 0%, transparent 64%),
    var(--surface);
  padding-block: var(--pad-base);
}

.liberdade__inner {
  width: min(100%, var(--content-width));
  margin-inline: auto;
  padding-inline: var(--page-padding);
}

.liberdade__head {
  width: min(100%, 56rem);
  margin-inline: auto;
  text-align: center;
}

.liberdade h2,
.mapa-local h2 {
  margin: 0;
  color: var(--on-surface);
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 5.3vw, 4.8rem);
  font-weight: 400;
  letter-spacing: -0.042em;
  line-height: 0.95;
  text-wrap: balance;
}

.liberdade h2 em,
.mapa-local h2 em {
  color: var(--accent-text);
  font-style: italic;
  font-weight: 400;
}

.liberdade__lead {
  max-width: 44rem;
  margin: clamp(1.4rem, 3vh, 2.1rem) auto 0;
  color: var(--on-surface-soft);
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.75;
}

.liberdade__lead strong {
  color: var(--on-surface);
  font-weight: 600;
}

.liberdade__grid {
  margin-top: clamp(3rem, 6.5vh, 5rem);
  display: grid;
  /* auto-fit: a grade acompanha o numero de cards (hoje 1) sem deixar
     colunas vazias empurrando o conteudo para fora do eixo central. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(2.25rem, 4.5vw, 4rem);
  align-items: start;
}

.liberdade__card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.liberdade__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: clamp(1.1rem, 2.4vh, 1.6rem);
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  color: var(--accent-text);
}

.liberdade__icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.liberdade__card h3 {
  max-width: 20ch;
  margin: 0 0 0.85rem;
  color: var(--on-surface);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.9vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.18;
  text-wrap: balance;
}

.liberdade__card p {
  max-width: 34ch;
  margin: 0;
  color: var(--on-surface-soft);
  font-size: 0.98rem;
  line-height: 1.75;
}

@media (max-width: 60rem) {
  .liberdade__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.5rem, 5vh, 3.25rem);
  }
}

/* Localização — a seção era um par de colunas (texto à esquerda, mapa à
   direita) que estrangulava o título e empurrava o mapa para fora do eixo.
   Agora é uma composição vertical num eixo central único: título, lead,
   mapa como peça principal, os dados de acesso e o CTA. */
.mapa-local {
  --radius-media: 1.375rem;
  background:
    radial-gradient(70% 55% at 5% 100%, rgb(94 102 55 / 9%) 0%, transparent 62%),
    var(--surface);
  padding-block: var(--pad-base);
}

.mapa-local__inner {
  width: min(100%, var(--content-width));
  margin-inline: auto;
  padding-inline: var(--page-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mapa-local__head {
  width: min(100%, 54rem);
}

.mapa-local h2 {
  font-size: clamp(2.5rem, 4.2vw, 3.75rem);
  line-height: 1.02;
}

/* As duas frases ocupam linhas próprias — o text-wrap: balance herdado
   reequilibraria o conjunto e poderia quebrar no meio de "Chegar é
   simples.". Cada período ainda quebra internamente no mobile. */
.mapa-local h2 span,
.mapa-local h2 em {
  display: block;
}

.mapa-local__lead {
  width: min(100%, 40rem);
  margin: clamp(1.25rem, 2.6vh, 1.85rem) auto 0;
  color: var(--on-surface-soft);
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.75;
  text-wrap: balance;
}

.mapa-local__facts {
  width: min(100%, 38rem);
  margin: clamp(1.75rem, 3.5vh, 2.5rem) auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}

.mapa-local__facts > div {
  min-width: 0;
  padding: clamp(1rem, 2vh, 1.35rem) 1rem;
  border-bottom: 1px solid var(--rule);
}

.mapa-local__facts > div:first-child {
  border-right: 1px solid var(--rule);
}

.mapa-local__facts > div:last-child {
  grid-column: 1 / -1;
}

.mapa-local__facts dt {
  margin-bottom: 0.4rem;
  color: var(--accent-label);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mapa-local__facts dd {
  margin: 0;
  color: var(--on-surface-soft);
  font-size: 0.88rem;
  line-height: 1.45;
}

.mapa-local__facts strong {
  color: var(--on-surface);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
}

/* O endereço não estava na ordem pedida, mas é a única citação literal da
   rua na página e usa <address>. Fica logo abaixo do mapa, como legenda
   dele, para não interromper a sequência acessos → chegada → CTA. */
.mapa-local__note {
  margin: clamp(1.1rem, 2.2vh, 1.5rem) 0 0;
  color: var(--on-surface-mute);
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.55;
}

.mapa-local__actions {
  margin-top: clamp(2rem, 4vh, 2.75rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem 1.75rem;
  flex-wrap: wrap;
}

.mapa-local__map {
  width: min(100%, 60rem);
  margin-top: clamp(2.75rem, 5.5vh, 4rem);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-media);
  background: var(--paper-200);
  box-shadow: 0 2.2rem 4rem -2.4rem rgb(22 36 26 / 38%);
  text-align: left;
}

/* Centralizado e com 60rem de largura, o 16/10 antigo passava de 600px de
   altura e empurrava os dados de acesso para fora da dobra. O 16/9 mantém
   o mapa como peça principal sem alongar a seção. */
.mapa-local__map iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
  filter: saturate(0.82) contrast(0.96);
}

.mapa-local__caption {
  min-height: 4.25rem;
  padding: 1rem clamp(1.1rem, 2.2vw, 1.65rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--ivory-100);
  background: var(--forest-900);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}

.mapa-local__caption span:last-child {
  color: rgb(247 241 232 / 64%);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

@media (max-width: 60rem) {
  .mapa-local__map iframe {
    aspect-ratio: 4 / 3;
  }
}

/* Onde os botões passam a ocupar a medida cheia da coluna (≤47rem), este
   também precisa ocupar: o eixo vertical da seção usa align-items: center,
   o que encolhia a faixa à largura do rótulo e deixava o único CTA da
   Localização visivelmente menor que os das outras seções. */
@media (max-width: 47rem) {
  .mapa-local__actions {
    width: 100%;
  }
}

@media (max-width: 32rem) {
  .mapa-local__facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .mapa-local__facts > div,
  .mapa-local__facts > div:first-child {
    grid-column: 1;
    border-right: 0;
  }

  .mapa-local__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .mapa-local__caption {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* CTA final */
.cta-final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(6rem, 18vh, 12rem);
  text-align: center;
}

.cta-final__media {
  position: absolute;
  z-index: -2;
  inset: 0;
}

.cta-final__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Véu radial em vez de chapado: a fotografia volta a existir atrás do
   texto, escurecendo só o miolo onde a copy precisa de contraste.
   Os dois véus se multiplicam, então o que parecia 82% no centro era
   ~91% na tela: a noiva de véu simplesmente não aparecia. Agora o miolo
   fica em ~79% (contraste de sobra para um título de 5rem em ivory) e as
   bordas caem para ~34%, devolvendo a mata à última imagem da página. */
.cta-final::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  /* O miolo aprofunda e as bordas não se mexem: o grifo lilás estava em
     3,1:1 sobre a copa clara — passa em AA-large, mas no piso. Aqui sobe
     para ~3,7:1 sem tirar luz da mata nas laterais, que é o que a imagem
     tem de melhor. */
  background:
    radial-gradient(76% 66% at 50% 46%, rgb(13 24 16 / 0.8) 0%, rgb(13 24 16 / 0.52) 54%, rgb(13 24 16 / 0.2) 100%),
    linear-gradient(180deg, rgb(13 24 16 / 0.2), rgb(13 24 16 / 0.34));
}

.cta-final__inner {
  width: min(100%, 62rem);
  margin-inline: auto;
  padding-inline: var(--page-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Losango de fechamento — o mesmo motivo do índice das seções, agora
   como pontuação final da página. */
.cta-final__inner::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-bottom: clamp(1.75rem, 4vh, 2.75rem);
  border: 1px solid var(--sand-300);
  transform: rotate(45deg);
}

.cta-final h2 {
  margin: 0;
  color: var(--ivory-100);
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 5.8vw, 5.2rem);
  font-weight: 400;
  letter-spacing: -0.042em;
  line-height: 0.94;
  text-wrap: balance;
}

.cta-final h2 em {
  color: var(--accent-text);
  font-style: italic;
}

/* A seção é centrada, mas o botão mantém o padrão da página: rótulo à
   esquerda, seta à direita. Herdando o text-align: center, um rótulo de
   duas linhas se centrava dentro do espaço que sobra à esquerda da seta —
   ou seja, ~29px fora do eixo do próprio botão. */
.cta-final .button {
  text-align: left;
}

.cta-final__lead {
  max-width: 38rem;
  margin: clamp(1.4rem, 2.8vh, 2rem) 0 clamp(2rem, 4vh, 2.8rem);
  color: rgb(247 241 232 / 82%);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.75;
}

/* Footer */
.site-footer {
  position: relative;
  background: var(--forest-950);
  border-top: 1px solid var(--rule);
}

/* Fio de areia sobre a borda do rodapé: fecha a página com o mesmo
   acento que abre cada seção. */
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: min(22rem, 38%);
  height: 1px;
  background: linear-gradient(90deg, var(--sand-300), transparent);
}

.site-footer__inner {
  width: min(100%, var(--content-width));
  margin-inline: auto;
  padding: clamp(3.5rem, 7vh, 5rem) var(--page-padding) clamp(2.5rem, 5vh, 3.5rem);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 4rem);
}

.site-footer__brand img {
  width: min(176px, 100%);
  height: auto;
  margin-bottom: 1.3rem;
}

.site-footer__brand p {
  margin: 0;
  max-width: 24rem;
  color: rgb(247 241 232 / 62%);
  font-size: 0.95rem;
  line-height: 1.65;
}

.site-footer__nav,
.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.site-footer__nav a,
.site-footer__contact a {
  width: fit-content;
  max-width: 100%;
  color: rgb(247 241 232 / 72%);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
  transition: color 200ms ease;
}

.site-footer__nav a:hover,
.site-footer__contact a:hover {
  color: var(--ivory-100);
}

/* A coluna de contato perdeu a lista de canais externos; passa a explicar
   o único caminho que existe e a repeti-lo como último CTA da página. */
.site-footer__contact-note {
  margin: 0;
  max-width: 22rem;
  color: rgb(247 241 232 / 62%);
  font-size: 0.9rem;
  line-height: 1.6;
}

.site-footer__cta {
  margin-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--accent-text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid rgb(201 175 210 / 45%);
  padding-bottom: 0.3rem;
  transition:
    color 200ms ease,
    border-color 200ms ease;
}

.site-footer__contact a.site-footer__cta:hover {
  color: var(--ivory-100);
  border-color: var(--ivory-100);
}

.site-footer__cta svg {
  width: 1.05rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  transition: transform 260ms var(--ease-out);
}

.site-footer__cta:hover svg {
  transform: translateX(3px);
}

.site-footer__label {
  margin-bottom: 0.35rem;
  color: var(--sand-300);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-footer__legal {
  width: min(100%, var(--content-width));
  margin-inline: auto;
  padding: 1.5rem var(--page-padding);
  border-top: 1px solid rgb(247 241 232 / 10%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
}

.site-footer__legal p {
  margin: 0;
  color: rgb(247 241 232 / 60%);
  font-size: 0.8rem;
}

@media (max-width: 60rem) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 34rem) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

/* Menu mobile */
.mobile-menu {
  position: fixed;
  z-index: 300;
  inset: 0;
  padding: max(1.3rem, env(safe-area-inset-top)) 1.3rem max(1.3rem, env(safe-area-inset-bottom));
  color: var(--ivory-100);
  background: var(--forest-900);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path 260ms cubic-bezier(0.7, 0, 0.84, 0),
    opacity 160ms ease,
    visibility 0s linear 260ms;
}

.mobile-menu:not([hidden]) {
  will-change: clip-path, opacity;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  clip-path: inset(0);
  transition:
    clip-path 420ms var(--ease-out),
    opacity 180ms ease,
    visibility 0s;
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu__top {
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgb(247 241 232 / 16%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgb(247 241 232 / 66%);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mobile-menu__top,
.mobile-menu nav a,
.mobile-menu__cta {
  opacity: 0;
  transform: translateY(0.7rem);
  transition:
    opacity 150ms ease,
    transform 150ms ease;
}

.mobile-menu.is-open .mobile-menu__top,
.mobile-menu.is-open nav a,
.mobile-menu.is-open .mobile-menu__cta {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 300ms var(--ease-out),
    transform 300ms var(--ease-out);
}

.mobile-menu.is-open .mobile-menu__top {
  transition-delay: 60ms;
}

.mobile-menu.is-open nav a:nth-child(1) {
  transition-delay: 90ms;
}

.mobile-menu.is-open nav a:nth-child(2) {
  transition-delay: 120ms;
}

.mobile-menu.is-open nav a:nth-child(3) {
  transition-delay: 150ms;
}

.mobile-menu.is-open nav a:nth-child(4) {
  transition-delay: 180ms;
}

.mobile-menu.is-open nav a:nth-child(5) {
  transition-delay: 210ms;
}

.mobile-menu.is-open .mobile-menu__cta {
  transition-delay: 180ms;
}

.mobile-menu__top button {
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid rgb(247 241 232 / 22%);
  display: grid;
  place-items: center;
  color: var(--ivory-100);
  background: transparent;
}

.mobile-menu__top svg {
  width: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.5;
}

.mobile-menu nav {
  margin-top: clamp(2rem, 8vh, 5rem);
}

.mobile-menu nav a {
  padding-block: 1rem;
  border-bottom: 1px solid rgb(247 241 232 / 14%);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3.6rem);
  line-height: 1.1;
}

.mobile-menu nav a span:last-child {
  color: var(--accent-text);
  font-family: var(--font-body);
  font-size: 1rem;
}

.mobile-menu__cta {
  position: absolute;
  right: 1.3rem;
  bottom: max(1.3rem, env(safe-area-inset-bottom));
  left: 1.3rem;
}

@keyframes hero-detail-arrival {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-line-arrival {
  from {
    opacity: 0;
    clip-path: inset(0 0 32% 0);
    transform: translateY(0.55em);
  }

  to {
    opacity: 1;
    clip-path: inset(0);
    transform: translateY(0);
  }
}

@keyframes hero-aperture {
  from {
    opacity: 0.82;
    clip-path: inset(0 18% 0 18%);
    transform: scale(1.04);
  }

  to {
    opacity: 1;
    clip-path: inset(0);
    transform: scale(1);
  }
}

@media (max-width: 74rem) {
  .site-header__inner {
    grid-template-columns: 1fr auto;
  }

  .desktop-nav,
  .header-cta {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
    justify-self: end;
  }

  .hero__line--c {
    margin-left: 0;
  }
}

@media (min-width: 47.0625rem) and (max-width: 74rem) {
  .hero__slide img {
    object-position: 43% center;
  }

  .hero__inner {
    padding-top: clamp(9.5rem, 18vh, 11.25rem);
    padding-bottom: 8.5rem;
    align-items: flex-start;
  }

  .hero__content {
    width: min(34rem, 52vw);
  }

  .hero h1 {
    font-size: clamp(3.1rem, 5.65vw, 5rem);
  }
}

@media (max-width: 47rem) {
  html {
    scroll-padding-top: 6rem;
  }

  :root {
    --page-padding: 20px;
  }

  .site-header {
    background: linear-gradient(
      180deg,
      rgb(13 24 16 / 72%) 0%,
      rgb(13 24 16 / 52%) 68%,
      transparent 100%
    );
  }

  .site-header__inner {
    min-height: 86px;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 16px;
  }

  .site-header.is-scrolled .site-header__inner {
    min-height: 68px;
  }

  .brand {
    width: min(160px, calc(100vw - 124px));
  }

  .site-header.is-scrolled .brand {
    width: min(138px, calc(100vw - 124px));
  }

  .menu-toggle {
    width: 48px;
    height: 48px;
  }

  .menu-toggle span {
    width: 19px;
  }

  .mobile-menu {
    padding-top: max(20px, env(safe-area-inset-top));
    padding-right: max(20px, env(safe-area-inset-right));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    padding-left: max(20px, env(safe-area-inset-left));
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mobile-menu__top {
    flex-shrink: 0;
    padding-bottom: 16px;
  }

  .mobile-menu__top button {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }

  .mobile-menu__top svg {
    width: 20px;
  }

  .mobile-menu nav {
    margin-top: clamp(24px, 6vh, 48px);
    margin-bottom: clamp(24px, 6vh, 64px);
  }

  .mobile-menu nav a {
    min-height: 56px;
    padding-block: 12px;
    font-size: min(clamp(1.75rem, 9vw, 3.6rem), 48px);
  }

  .mobile-menu nav a span:last-child {
    font-size: 16px;
  }

  .mobile-menu__cta {
    position: static;
    margin-top: auto;
  }

  .review {
    min-width: 0;
    padding: 26px 22px 22px;
  }

  .review__head {
    gap: 14px;
  }

  .review__name,
  .review__src {
    overflow-wrap: anywhere;
  }

  .review__src {
    gap: 6px;
  }

  .review__src .review__glogo {
    width: 14px;
    height: 14px;
  }

  .faq__item summary {
    gap: 24px;
    overflow-wrap: anywhere;
  }

  .faq__mark {
    width: 18px;
    height: 18px;
  }

  .faq__mark::before,
  .faq__mark::after {
    width: 18px;
  }

  /* "O espaço" entra na mesma régua central das demais seções no celular.
     Galeria e Depoimentos já abrem centradas em qualquer largura (.sec-head).

     Só o título e o parágrafo de apoio. A lista de tópicos fica de fora de
     propósito: os losangos são marcadores posicionados à esquerda e, com o
     texto centralizado, ficariam soltos longe da frase. O hero e o rodapé
     também ficam fora — o hero porque a tipografia display se apoia no
     alinhamento à esquerda, o rodapé porque só os parágrafos centralizariam
     e os links continuariam à esquerda. */
  .espaco__text h2,
  .espaco__lead {
    text-align: center;
  }

  .hero {
    min-height: 100svh;
  }

  /* No recorte vertical, a copy sobe para a copa escura e o casal permanece
     inteiro no centro-direita. O véu acompanha essa nova zona de leitura. */
  .hero::before {
    bottom: auto;
    height: 100svh;
    background:
      linear-gradient(
        180deg,
        rgb(13 24 16 / 0.7) 0%,
        rgb(13 24 16 / 0.54) 26%,
        rgb(13 24 16 / 0.18) 58%,
        rgb(13 24 16 / 0.46) 100%
      ),
      linear-gradient(90deg, rgb(13 24 16 / 0.52) 0%, rgb(13 24 16 / 0.2) 70%, transparent 100%);
  }

  .hero__media {
    inset: 0;
    clip-path: none;
  }

  .hero__slide img {
    object-position: 42% center;
  }

  .hero__inner {
    min-height: 100svh;
    padding-top: clamp(8.25rem, 17vh, 10rem);
    padding-bottom: 6rem;
    align-items: flex-start;
  }

  .hero__content {
    width: min(100%, 22rem);
    max-width: calc(100vw - (2 * var(--page-padding)));
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(2.75rem, 13.5vw, 3.9rem);
    line-height: 0.88;
    letter-spacing: -0.04em;
  }

  /* No desktop a sangria de ~65px lê-se como decisão; a 20px ela só
     parece que a palavra escapou da margem — e como "casamento" fica
     rente ao vidro com 2px de espacejamento lateral do "c", o efeito é
     de texto cortado, não de quebra de grade. No celular as três linhas
     voltam a nascer na mesma margem e a hierarquia fica por conta da
     escala. */
  .hero__line--b {
    margin-left: 0;
  }

  .hero__line--c {
    margin-top: 0.2em;
    margin-left: 0;
    max-width: 18rem;
    font-size: 0.41em;
    line-height: 1.12;
  }

  .hero__bottom {
    margin-top: 1.3rem;
  }

  .hero__lead {
    max-width: 20rem;
    font-size: 0.93rem;
    line-height: 1.62;
  }

  .button {
    width: 100%;
    padding: 16px 18px 16px 22px;
    gap: clamp(16px, 6vw, 38px);
    line-height: 1.25;
  }

  .button svg {
    width: 20px;
    flex-shrink: 0;
  }

  .hero__facts {
    position: relative;
    background: var(--forest-950);
    backdrop-filter: none;
  }

  .hero__facts-inner {
    padding-inline: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
  }

  .hero__facts p {
    min-width: 0;
    min-height: 7.6rem;
    padding: 1.25rem;
    border-bottom: 1px solid rgb(247 241 232 / 13%);
    font-size: 0.96rem;
    overflow-wrap: anywhere;
  }

  .hero__facts p:nth-child(2) {
    border-left: 1px solid rgb(247 241 232 / 13%);
  }

  .hero__facts p:last-child {
    min-height: 6.5rem;
    border-right: 0;
    border-bottom: 0;
    grid-column: 1 / -1;
  }
}

@media (max-width: 24rem) {
  .hero h1 {
    font-size: clamp(2.35rem, 12.8vw, 3.2rem);
  }

  /* Nas telas mais estreitas as duas distâncias deixam de disputar a
     largura e empilham — o numeral continua legível em escala cheia. */
  .mapa-local__facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
  }

  .hero__lead {
    font-size: 0.9rem;
  }

  .button {
    min-height: 3.5rem;
  }
}

@media (pointer: coarse) {
  .desktop-nav a,
  .site-footer__nav a,
  .site-footer__contact a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .site-footer__nav a,
  .site-footer__contact a {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
}

@media (forced-colors: active) {
  .hero__media,
  .cta-final__media,
  .hero::before,
  .hero__facts::before {
    display: none;
  }

  .button,
  .header-cta,
  .menu-toggle,
  .mobile-menu__close,
  .review,
  .pilar,
  .liberdade__icon,
  .mapa-local__map,
  .connection-status,
  .connection-status button {
    border: 1px solid ButtonText;
  }

  .button--light,
  .connection-status {
    color: ButtonText;
    background: ButtonFace;
  }

  :focus-visible {
    outline-color: Highlight;
  }
}