/* ===========================================================================
   CASA TOHMÉ — components.css
   Regra de cor que vale em todo componente daqui:
   laranja é AÇÃO (CTA, link, ícone-acento, UMA palavra). Nunca área grande.
   =========================================================================== */

/* ==========================================================================
   BOTÕES
   ========================================================================== */
.btn {
  --btn-bg: var(--orange);
  --btn-fg: var(--areia);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 14px 26px;
  border-radius: var(--r-btn);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: -.005em;
  line-height: 1;
  background: var(--btn-bg);
  color: var(--btn-fg);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
/* Brilho que atravessa o botão no hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 780ms var(--ease-out);
}
.btn:hover::before { transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .ico { font-size: 1.05em; transition: transform 380ms var(--ease-out); }
.btn:hover .ico--seta { transform: translateX(4px); }

.btn--principal { box-shadow: 0 6px 20px -8px rgba(211, 140, 55, .8); }
.btn--principal:hover { background: var(--orange-deep); box-shadow: 0 12px 30px -10px rgba(211, 140, 55, .9); }

.btn--fantasma {
  background: transparent;
  color: currentColor;
  box-shadow: inset 0 0 0 1px currentColor;
}
.btn--fantasma:hover { background: rgba(234, 229, 223, .1); }
.secao--areia .btn--fantasma:hover,
.secao--claro .btn--fantasma:hover,
.secao--alt .btn--fantasma:hover { background: rgba(35, 44, 27, .06); }

.btn--claro { background: var(--areia); color: var(--ink); }
.btn--claro:hover { background: #fff; }

.btn--pequeno { padding: 11px 18px; font-size: var(--step--2); }
/* Botão de terceiro nível (ressalva). Continua com 40px de altura mínima para
   não virar alvo pequeno demais no toque. */
.btn--mini {
  padding: 8px 14px;
  min-height: 40px;
  font-size: var(--step--2);
  gap: .4rem;
  letter-spacing: .01em;
}

/* Link de texto com sublinhado que cresce */
.link-sub {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--orange-deep);
  font-weight: 500;
}
.on-dark .link-sub, .secao--escuro .link-sub, .secao--verde .link-sub { color: var(--orange); }
.link-sub::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(.999);
  transform-origin: right;
  transition: transform 420ms var(--ease-out);
}
.link-sub:hover::after { transform: scaleX(0); }
.link-sub .ico { transition: transform 380ms var(--ease-out); }
.link-sub:hover .ico { transform: translateX(4px); }

/* ==========================================================================
   FAIXA CORRIDA (marquee)
   ========================================================================== */
.faixa {
  --vel: 46s;
  background: var(--ink);
  color: var(--areia);
  padding-block: clamp(.9rem, 2vw, 1.25rem);
  overflow: hidden;
  position: relative;
  border-block: 1px solid rgba(234, 229, 223, .1);
}
.faixa__trilho {
  display: flex;
  width: max-content;
  animation: correr var(--vel) linear infinite;
}
.faixa:hover .faixa__trilho { animation-play-state: paused; }
@keyframes correr { to { transform: translateX(-50%); } }
.faixa__grupo {
  display: flex;
  align-items: center;
  gap: clamp(1.6rem, 4vw, 3rem);
  padding-right: clamp(1.6rem, 4vw, 3rem);
}
.faixa__item {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  white-space: nowrap;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: -.005em;
  color: rgba(234, 229, 223, .9);
}
.faixa__item .ico { font-size: 1.25em; color: var(--green-soft); }
.faixa__sep { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none; }

/* ==========================================================================
   PAINEL DE FOTO — revela por clip-path e respira com parallax
   ========================================================================== */
.painel-foto {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-alt);
  isolation: isolate;
}
.painel-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 1.4s var(--ease-out);
}
.painel-foto.is-visivel img { transform: scale(1.02); }
.painel-foto--zoom:hover img { transform: scale(1.08); }
.painel-foto__legenda {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(1rem, 3vw, 2rem);
  background: linear-gradient(0deg, rgba(26,33,20,.82), transparent);
  color: var(--areia);
  font-size: var(--step--1);
  display: flex;
  align-items: center;
  gap: .55rem;
}
.painel-foto__legenda .ico { color: var(--green-soft); font-size: 1.1em; }

/* Faixa de foto de largura total, usada como respiro entre seções */
.faixa-foto {
  position: relative;
  height: clamp(340px, 62vh, 640px);
  overflow: clip;
  isolation: isolate;
  background: var(--ink-deep);
}
.faixa-foto__midia { position: absolute; inset: -12% 0; height: 124%; will-change: transform; }
.faixa-foto__midia img { width: 100%; height: 100%; object-fit: cover; }
.faixa-foto__veu {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(26,33,20,.78), rgba(26,33,20,.25) 55%, rgba(26,33,20,.55));
}
.faixa-foto__texto {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  color: var(--areia);
}
.faixa-foto__texto h2,
.faixa-foto__texto .lettering {
  color: var(--areia);
  max-width: 16ch;
  text-shadow: 0 4px 40px rgba(26, 33, 20, .55);
}
.faixa-foto__texto .lettering {
  font-size: clamp(2.2rem, 7vw, 5rem);
}
.faixa-foto__texto p {
  margin-top: 1.1rem;
  max-width: 38ch;
  color: rgba(234, 229, 223, .84);
  text-shadow: 0 2px 20px rgba(26, 33, 20, .6);
}

/* ==========================================================================
   MANIFESTO — texto grande que revela palavra a palavra
   ========================================================================== */
.manifesto {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
/* 1080px e não 980: abaixo disso a coluna de texto fica estreita demais e o
   título quebra em cinco linhas em vez de quatro. */
@media (min-width: 1080px) {
  .manifesto { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  /* A foto acompanha a leitura em vez de ficar órfã no topo da coluna */
  .manifesto > .manifesto__foto {
    position: sticky;
    top: calc(var(--nav-h) + 3rem);
  }
}
/* O título do manifesto é desenhado para cair em quatro linhas no desktop:
   "A gente não / aluga quartos. / Entregamos uma / casa pronta."
   A medida em `ch` é quem manda nas quebras — mexeu no texto, confira aqui.
   `balance` fica de fora de propósito: ele redistribui e desfaz o desenho. */
.manifesto__titulo {
  max-width: 12.5ch;
  text-wrap: normal;
}
/* A exceção de celular pequeno que existia aqui saiu: a escala nova já entrega
   praticamente o mesmo corpo abaixo de 400px, e uma regra a menos é um tamanho
   a menos fora do sistema. */


/* Só o parágrafo solto (fora da .prosa) ganha corpo grande. Dentro da .prosa
   o texto é de leitura, não de exibição — corpo normal, entrelinha generosa. */
.manifesto__texto > p {
  font-size: var(--step-2);
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: -.02em;
}
.manifesto__texto .prosa p {
  font-size: var(--step-0);
  /* 1,6 em vez de 1,68: acima disso, num bloco de três parágrafos, as linhas
     começam a soltar umas das outras e o olho perde o fio. */
  line-height: 1.6;
  color: var(--text-muted);
}
.manifesto__texto .prosa strong { color: var(--text); font-weight: 700; }
.manifesto__rodape {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 2rem;
}
.assinatura {
  font-family: var(--font-lettering);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--green);
  line-height: 1;
}
.assinatura + small {
  display: block;
  font-size: var(--step--2);
  color: var(--text-muted);
  letter-spacing: .02em;
}

/* ==========================================================================
   BENTO — a estrutura da casa
   ========================================================================== */
.bento {
  display: grid;
  /* Celular pequeno: uma coluna. Duas colunas em 390px deixam ~180px por card,
     estreito demais para o texto respirar. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(.7rem, 1.4vw, 1.1rem);
}
@media (min-width: 620px)  { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px)  { .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.bento__item {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-height: 168px;
  overflow: hidden;
  transition: transform 460ms var(--ease-out), box-shadow 460ms var(--ease-out), border-color 460ms var(--ease-out);
}
.bento__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--green-soft);
}
.bento__item .ico--acento {
  font-size: 1.7rem;
  color: var(--orange);
  margin-bottom: .3rem;
}
.bento__item h3 {
  font-size: var(--step-1);
  letter-spacing: -.02em;
}
.bento__item p {
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: 1.5;
}
@media (min-width: 620px) { .bento__item--largo { grid-column: span 2; } }
@media (min-width: 1120px) {
  .bento__item--largo { grid-column: span 3; }
  .bento__item--medio { grid-column: span 2; }
}
@media (min-width: 620px) and (max-width: 1119px) {
  .bento__item--largo { grid-column: span 2; }
  .bento__item--medio { grid-column: span 2; }
}

/* Card de destaque com número grande */
.bento__item--numero {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--areia);
  justify-content: space-between;
}
.bento__item--numero:hover { border-color: var(--green-mid); }
.bento__item--numero p { color: rgba(234, 229, 223, .68); }
/* Especificidade acima de `.bento__item p`, senão o número herda corpo de texto */
.bento__item .numero-grande {
  font-size: clamp(3.4rem, 8vw, 5.4rem);
  font-weight: 900;
  line-height: .85;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  color: var(--areia);
}
.bento__item .numero-grande small {
  font-size: .28em;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--green-soft);
  margin-left: .18em;
}

/* Card que é foto */
.bento__item--foto { padding: 0; border: 0; min-height: 240px; }
.bento__item--foto img { width: 100%; height: 100%; object-fit: cover; }

/* Lista de amenidades compacta dentro do bento */
.mini-lista {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: auto;
  padding-top: .6rem;
}
.mini-lista li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--step--2);
  color: var(--text-muted);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 5px 11px;
}
.mini-lista .ico { font-size: 1.05em; color: var(--green); }

/* ==========================================================================
   REGIÃO — cards sobre fundo escuro
   ========================================================================== */
.cards {
  display: grid;
  gap: clamp(.9rem, 2vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.card {
  background: rgba(234, 229, 223, .04);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-card);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: .7rem;
  transition: background 460ms var(--ease-out), transform 460ms var(--ease-out), border-color 460ms var(--ease-out);
}
.card:hover {
  background: rgba(234, 229, 223, .07);
  border-color: rgba(234, 229, 223, .3);
  transform: translateY(-4px);
}
.card .ico--acento { font-size: 1.7rem; color: var(--orange); }
.card h3 { font-size: var(--step-1); }
.card p { font-size: var(--step--1); color: var(--text-on-dark-muted); line-height: 1.6; }

/* Lista de distâncias */
.distancias { display: grid; gap: 0; margin-top: clamp(2rem, 4vw, 3rem); }
.distancia {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1rem;
  padding-block: clamp(.9rem, 2vw, 1.15rem);
  border-top: 1px solid var(--border-dark);
}
.distancia:last-child { border-bottom: 1px solid var(--border-dark); }
.distancia__ico { font-size: 1.15rem; color: var(--green-soft); align-self: center; }
.distancia__nome { font-weight: 500; }
.distancia__nome small {
  display: block;
  font-weight: 400;
  font-size: var(--step--2);
  color: var(--text-on-dark-muted);
  margin-top: .18rem;
}
.distancia__valor {
  font-family: var(--font-tag);
  font-size: var(--step--1);
  letter-spacing: .06em;
  color: var(--orange);
  white-space: nowrap;
}

/* ==========================================================================
   UM DIA NA CASA — trilho horizontal preso pelo scroll
   ========================================================================== */
.dia { position: relative; background: var(--green); color: var(--text-on-dark); }
.dia__palco { position: relative; height: 420vh; }
@media (max-width: 900px) { .dia__palco { height: auto; } }
.dia__preso {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.dia__cabeca {
  padding-inline: var(--gutter);
  max-width: var(--maxw);
  margin-inline: auto;
  width: 100%;
  margin-bottom: clamp(1.6rem, 4vh, 3rem);
}
.dia__trilho {
  display: flex;
  gap: clamp(1rem, 2vw, 1.6rem);
  /* Alinha o primeiro card com o título da seção, que vive dentro de um
     container de largura máxima centrado. */
  padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  padding-right: var(--gutter);
  will-change: transform;
}
.momento {
  flex: 0 0 clamp(260px, 30vw, 380px);
  background: rgba(26, 33, 20, .30);
  border: 1px solid rgba(234, 229, 223, .16);
  border-radius: var(--r-card);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-height: clamp(300px, 44vh, 400px);
  transition: background 460ms var(--ease-out), border-color 460ms var(--ease-out);
}
.momento:hover { background: rgba(26, 33, 20, .44); border-color: rgba(234, 229, 223, .32); }
.momento__hora {
  font-family: var(--font-tag);
  font-size: var(--step--1);
  letter-spacing: .1em;
  color: var(--orange);
}
.momento .ico--acento { font-size: 1.9rem; color: var(--green-soft); margin-top: auto; }
/* Mesmo degrau dos outros títulos de card da página (.card, .passo, o convite
   da galeria). O que dá peso a este bloco é o tamanho do card e a hora em
   laranja — não um título maior que o dos vizinhos. */
.momento h3 { font-size: var(--step-1); letter-spacing: -.02em; }
.momento p { font-size: var(--step--1); color: rgba(234, 229, 223, .78); line-height: 1.6; }

.dia__progresso {
  margin-top: clamp(1.4rem, 3vh, 2.4rem);
  height: 2px;
  background: rgba(234, 229, 223, .18);
  max-width: var(--maxw);
  width: calc(100% - var(--gutter) * 2);
  margin-inline: auto;
  border-radius: 2px;
  overflow: hidden;
}
.dia__progresso i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--orange);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

/* Fallback mobile: rolagem horizontal por toque */
@media (max-width: 900px) {
  /* Sem o palco preso a seção perde o que a centralizava na tela e ficava
     colada nas vizinhas: aqui ela volta a respirar na mesma régua das outras
     seções (o trilho já traz o respiro de baixo, então o de baixo é menor). */
  .dia__preso {
    position: static;
    height: auto;
    padding-block: var(--section-y) calc(var(--section-y) - 1rem);
  }
  .dia__trilho {
    padding-left: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-bottom: 1rem;
    transform: none !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .dia__trilho::-webkit-scrollbar { display: none; }
  .momento { scroll-snap-align: start; flex-basis: 78vw; min-height: 0; }
  .dia__progresso { display: none; }
}

/* ==========================================================================
   PASSOS — a experiência Tohmé
   ========================================================================== */
.passos {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  counter-reset: passo;
  position: relative;
}
.passo { position: relative; counter-increment: passo; padding-top: 3.4rem; }
.passo::before {
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  top: 0; left: 0;
  font-family: var(--font-tag);
  font-size: var(--step--1);
  letter-spacing: .12em;
  color: var(--orange);
}
.passo::after {
  content: "";
  position: absolute;
  top: 2.3rem; left: 0; right: 0;
  height: 1px;
  background: var(--border);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.is-visivel .passo::after { transform: scaleX(1); }
.secao--escuro .passo::after, .secao--verde .passo::after { background: var(--border-dark); }
.passo h3 { font-size: var(--step-1); margin-bottom: .6rem; }
.passo p { font-size: var(--step--1); color: var(--text-muted); line-height: 1.6; }
.secao--escuro .passo p, .secao--verde .passo p { color: var(--text-on-dark-muted); }

/* ==========================================================================
   AVALIAÇÕES — o boletim real do Airbnb
   ========================================================================== */
.boletim {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .boletim { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}
.boletim__nota { text-align: left; min-width: 0; }
.boletim__valor {
  font-size: clamp(3.4rem, 10.5vw, 6.6rem);
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: flex-start;
  gap: .1em;
}
.boletim__valor sup {
  font-size: .22em;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text-muted);
  margin-top: .55em;
}
.secao--escuro .boletim__valor sup { color: var(--text-on-dark-muted); }
/* Lockup da nota: o ramo de louro abraça o número, como manda a gramática do
   selo "Preferido dos hóspedes" — com desenho próprio, não o do Airbnb. */
.boletim__lockup {
  display: flex;
  align-items: center;
  gap: clamp(.3rem, 1vw, .8rem);
}
.louro {
  height: 1em;
  /* Sem aspect-ratio o <svg> sem atributo width vira uma caixa larga demais e
     afasta o ramo do texto. O valor é o do viewBox do louro. */
  aspect-ratio: 52 / 82;
  width: auto;
  flex: none;
  /* O caule é stroke e as folhas são fill, ambos em currentColor: pintar pelo
     `color` deixa o ramo inteiro laranja. Só `fill` deixaria o caule claro. */
  color: var(--orange);
  fill: currentColor;
}
.louro--dir { transform: scaleX(-1); }
.boletim__lockup .louro { height: clamp(3rem, 7.5vw, 5.6rem); }

.boletim__titulo {
  margin-top: 1.1rem;
  font-family: var(--font-tag);
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
}
.estrelas { display: flex; gap: .18rem; margin-top: 1rem; color: var(--orange); font-size: 1.15rem; }
.boletim__meta { margin-top: .5rem; font-size: var(--step--1); color: var(--text-muted); }
.secao--escuro .boletim__meta { color: var(--text-on-dark-muted); }
.selos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.selo {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-tag);
  font-size: var(--step--2);
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  color: var(--green);
}
.secao--escuro .selo { border-color: var(--border-dark); color: var(--green-soft); }
.selo .ico { color: var(--orange); font-size: 1.05em; }

.subnotas { display: grid; gap: clamp(.7rem, 1.6vw, 1.1rem); }
.subnota { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .8rem; align-items: center; }
.subnota__nome { font-size: var(--step--1); font-weight: 500; }
.subnota__valor {
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.secao--escuro .subnota__valor { color: var(--text-on-dark-muted); }
.subnota__barra {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 5px;
  background: var(--border);
  overflow: hidden;
  margin-top: .15rem;
}
.secao--escuro .subnota__barra { background: rgba(234, 229, 223, .13); }
.subnota__barra i {
  display: block; height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--green-soft), var(--orange));
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.is-visivel .subnota__barra i { transform: scaleX(var(--v, 1)); }

/* Depoimentos (opcional — só aparecem se houver cards) */
.depoimentos {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  margin-top: clamp(2.6rem, 6vw, 4.5rem);
}
.depoimento {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}
.secao--escuro .depoimento { background: rgba(234,229,223,.04); border-color: var(--border-dark); }
.depoimento__aspas {
  font-size: 3.4rem;
  font-weight: 900;
  line-height: .6;
  color: var(--green-soft);
  opacity: .55;
}
.depoimento blockquote { font-size: var(--step-0); line-height: 1.6; }
.depoimento figcaption {
  margin-top: auto;
  font-size: var(--step--2);
  color: var(--text-muted);
  display: flex; align-items: center; gap: .5rem;
}
.secao--escuro .depoimento figcaption { color: var(--text-on-dark-muted); }
.depoimento figcaption strong { color: var(--text); font-weight: 700; }
.secao--escuro .depoimento figcaption strong { color: var(--areia); }

/* ==========================================================================
   GALERIA + LIGHTBOX
   ========================================================================== */
.galeria {
  display: grid;
  gap: clamp(.7rem, 1.4vw, 1.1rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.galeria__item {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface-alt);
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
}
.galeria__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.galeria__item:hover img { transform: scale(1.05); }
/* Duas linhas sem buraco: [largo largo][item] · [item][convite convite] */
.galeria__item--largo, .galeria__convite--largo { grid-column: span 2; }
/* Em duas colunas a conta não fecha e sobra uma célula vazia no fim; esta
   foto ocupa a linha inteira só nesse caso. */
@media (max-width: 859px) { .galeria__item--largo-sm { grid-column: span 2; } }

/* Este bloco precisa vir DEPOIS das regras dos itens: mesma especificidade,
   quem estiver por último ganha, e o aspect-ratio tem de ser desligado aqui. */
@media (min-width: 860px) {
  .galeria {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Altura de linha fixa em vez de aspect-ratio: com spans diferentes o
       aspect-ratio deixaria buraco embaixo do item estreito. */
    grid-auto-rows: clamp(240px, 26vw, 350px);
  }
  .galeria__item, .galeria__convite { aspect-ratio: auto; }
}
.galeria__lupa {
  position: absolute; inset: auto 12px 12px auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(26, 33, 20, .55);
  backdrop-filter: blur(6px);
  color: var(--areia);
  opacity: 0;
  transform: scale(.85);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.galeria__item:hover .galeria__lupa { opacity: 1; transform: scale(1); }

/* Cartão-convite que leva ao tour de fotos do Airbnb. É o fecho da grade, então
   ocupa exatamente a altura de uma linha (e não uma proporção própria, que o
   deixava alto demais para o pouco texto que carrega): no desktop o texto fica
   à esquerda, o botão à direita e a árvore da marca preenche o meio. */
.galeria__convite {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--areia);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.4rem;
}
.galeria__convite__texto { position: relative; z-index: 1; max-width: 34ch; }
.galeria__convite .kicker { color: var(--green-soft); }
.galeria__convite h3 { font-size: var(--step-1); }
.galeria__convite p { font-size: var(--step--1); color: rgba(234, 229, 223, .7); margin-top: .5rem; }
.galeria__convite .btn { position: relative; z-index: 1; flex: none; }
/* A árvore da marca em máscara, sangrando pelo canto — mesma linguagem do
   rodapé. É respiro, não assunto: fica atrás do texto e do botão. */
.galeria__convite__arvore {
  position: absolute;
  right: -3%;
  bottom: -12%;
  width: min(58%, 420px);
  aspect-ratio: 1100 / 753;
  background: var(--areia);
  opacity: .12;
  -webkit-mask: url("../assets/art/arvore-silhueta.png") no-repeat right bottom / contain;
  mask: url("../assets/art/arvore-silhueta.png") no-repeat right bottom / contain;
  pointer-events: none;
}
@media (min-width: 860px) {
  .galeria__convite {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  .galeria__convite__arvore { width: min(44%, 360px); right: -2%; bottom: -20%; opacity: .1; }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(26, 33, 20, .94);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 340ms var(--ease-out), visibility 340ms;
}
.lightbox.is-aberto { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(1400px, 100%);
  max-height: 82svh;
  width: auto;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  transform: scale(.96);
  transition: transform 420ms var(--ease-out);
}
.lightbox.is-aberto img { transform: scale(1); }
.lightbox__legenda {
  margin-top: 1rem;
  color: rgba(234, 229, 223, .72);
  font-size: var(--step--1);
  text-align: center;
}
.lightbox__ctrl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(234, 229, 223, .1);
  border: 1px solid rgba(234, 229, 223, .22);
  color: var(--areia);
  transition: background 240ms var(--ease-out);
}
.lightbox__ctrl:hover { background: rgba(234, 229, 223, .2); }
.lightbox__ctrl--ant { left: clamp(.6rem, 3vw, 2.4rem); }
.lightbox__ctrl--prox { right: clamp(.6rem, 3vw, 2.4rem); }
.lightbox__ctrl--prox .ico { transform: rotate(180deg); }
.lightbox__fechar {
  position: absolute;
  top: clamp(.8rem, 3vw, 2rem);
  right: clamp(.8rem, 3vw, 2rem);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(234, 229, 223, .1);
  border: 1px solid rgba(234, 229, 223, .22);
  color: var(--areia);
  font-size: 1.2rem;
  line-height: 1;
}

/* ==========================================================================
   BOM SABER — sanfona
   ========================================================================== */
.faq { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 980px) {
  .faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .faq__cabeca { position: sticky; top: calc(var(--nav-h) + 3rem); }
}
.sanfona { border-top: 1px solid var(--border); }
.secao--escuro .sanfona, .secao--verde .sanfona { border-color: var(--border-dark); }
.sanfona__item { border-bottom: 1px solid var(--border); }
/* O h3 existe só para dar semântica ao botão — quem manda no tamanho é o botão.
   Igualar os dois evita que o h3 continue declarando um corpo que ninguém vê. */
.sanfona__item h3 { font-size: var(--step-0); line-height: 1.4; }
.secao--escuro .sanfona__item, .secao--verde .sanfona__item { border-color: var(--border-dark); }
.sanfona__botao {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: clamp(1.1rem, 2.4vw, 1.5rem);
  text-align: left;
  /* São doze perguntas empilhadas: no degrau do lead cada uma pesava como um
     título e a lista virava um paredão. No degrau do texto de leitura, com o
     peso em 600, ela continua sendo a linha mais forte do item sem gritar. */
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -.01em;
  /* O h3 em volta é o dono da entrelinha; nesse corpo, 1.12 apertava a pergunta
     que quebra em duas linhas no celular. */
  line-height: 1.4;
  transition: color var(--dur-fast) var(--ease-out);
}
.sanfona__botao:hover { color: var(--orange-deep); }
.secao--escuro .sanfona__botao:hover, .secao--verde .sanfona__botao:hover { color: var(--orange); }
.sanfona__botao .ico { margin-left: auto; font-size: 1rem; color: var(--green); transition: transform 420ms var(--ease-out); }
.secao--escuro .sanfona__botao .ico { color: var(--green-soft); }
.sanfona__botao[aria-expanded="true"] .ico { transform: rotate(-90deg); color: var(--orange); }
.sanfona__botao > .ico--marca { margin-left: 0; font-size: 1.25em; color: var(--orange); }

.sanfona__corpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 460ms var(--ease-out);
}
.sanfona__item.is-aberto .sanfona__corpo { grid-template-rows: 1fr; }
.sanfona__corpo > div { overflow: hidden; }
.sanfona__corpo p {
  padding-bottom: clamp(1.1rem, 2.4vw, 1.6rem);
  max-width: 62ch;
  color: var(--text-muted);
  font-size: var(--step-0);
}
.secao--escuro .sanfona__corpo p, .secao--verde .sanfona__corpo p { color: var(--text-on-dark-muted); }
.sanfona__corpo strong { color: var(--text); font-weight: 700; }
.secao--escuro .sanfona__corpo strong { color: var(--areia); }

/* ==========================================================================
   BASTIDORES — a ponte para os Irmãos Tohmé
   Faixa baixa entre a chamada final e o rodapé. É um aparte, não uma seção da
   jornada: título no corpo de h3, texto curto, um link de texto e nenhum
   laranja — a cor de ação continua sendo só da reserva.
   ========================================================================== */
.bastidores {
  position: relative;
  background: var(--areia);
  padding-block: clamp(2.6rem, 5vw, 4.2rem);
  overflow-x: clip;
}
.bastidores__grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem clamp(2rem, 5vw, 4rem);
}
.bastidores__texto { max-width: 52ch; }
.bastidores h2 { font-size: var(--step-1); margin-top: .55rem; }
.bastidores p {
  margin-top: .5rem;
  font-size: var(--step--1);
  color: var(--text-muted);
  max-width: 46ch;
}
.bastidores strong { color: var(--text); font-weight: 700; }
/* O link sai do laranja e vem para o verde: laranja é a cor da reserva, e esta
   faixa não pode chamar tanto quanto o CTA que ela vem logo depois. */
.bastidores .link-sub { color: var(--green); }
.bastidores .link-sub:hover { color: var(--ink); }
/* A mesma árvore do rodapé, ainda mais apagada: costura a faixa ao resto da
   página em vez de deixá-la com cara de banner colado no fim. */
.bastidores__arvore {
  position: absolute;
  right: -2%;
  bottom: -18%;
  width: min(38vw, 420px);
  aspect-ratio: 1100 / 753;
  background: var(--green);
  opacity: .07;
  pointer-events: none;
  -webkit-mask: url("../assets/art/arvore-silhueta.png") no-repeat right bottom / contain;
  mask: url("../assets/art/arvore-silhueta.png") no-repeat right bottom / contain;
}
@media (max-width: 720px) {
  .bastidores__arvore { width: 76vw; opacity: .05; }
}

/* Ressalva de canal: o caminho principal é o Airbnb, mas quem prefere WhatsApp
   tem a porta aqui. É o terceiro nível da hierarquia (botão cheio > nota de
   credibilidade > ressalva), então entra no menor corpo da escala e com o botão
   na versão mini — presente para quem procura, invisível para quem não procura. */
.aparte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .7rem;
  margin-top: 1.5rem;
  font-size: var(--step--2);
  color: var(--text-muted);
}
.aparte__texto { line-height: 1.4; }
.aparte--centro { justify-content: center; text-align: center; }
/* Na chamada final a ressalva vem depois da nota de credibilidade e ganha um
   fio fino em cima: vira rodapé do bloco em vez de disputar com o CTA. */
.chamada .aparte {
  font-size: var(--step--2);
  justify-content: center;
  width: min(30rem, 100%);
  margin: 1.6rem auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(234, 229, 223, .14);
  color: rgba(234, 229, 223, .58);
}
/* O botão fantasma herda a cor do texto, e no escuro a ressalva apagada
   deixaria a borda quase invisível — aqui ele volta um pouco de contraste. */
.chamada .aparte .btn { color: rgba(234, 229, 223, .8); }

/* ==========================================================================
   CHAMADA FINAL
   ========================================================================== */
.chamada {
  position: relative;
  background: var(--ink-deep);
  color: var(--areia);
  overflow: clip;
  isolation: isolate;
}
.chamada__midia { position: absolute; inset: -10% 0; height: 120%; z-index: -2; will-change: transform; }
.chamada__midia img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.chamada__veu {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(26,33,20,.90), rgba(26,33,20,.72) 50%, rgba(26,33,20,.92)),
    radial-gradient(80% 60% at 50% 50%, rgba(84,97,56,.34), transparent 70%);
}
.chamada__inner { text-align: center; display: grid; justify-items: center; gap: 1.4rem; }
.chamada h2 { max-width: 18ch; }
.chamada p { max-width: 48ch; color: rgba(234, 229, 223, .8); font-size: var(--step-1); }
.chamada__acoes { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: .8rem; }
/* `.chamada p` acima é mais específico que uma classe solta, então a nota e a
   ressalva precisam do dobro de classe para não herdarem o corpo do parágrafo
   principal — era o que deixava as duas grandes demais para o papel delas. */
.chamada .chamada__nota { font-size: var(--step--1); color: rgba(234, 229, 223, .62); margin-top: .4rem; }

/* A árvore da marca ao fundo, atrás do painel da foto do rooftop. Ela é presa
   ao bloco da foto (e não solta na seção), então acompanha o painel em qualquer
   largura em vez de flutuar no canto. `isolation` cria o contexto de empilhamento
   do bloco: a árvore fica no nível 0 e a foto no 1, sempre por cima. Só a copa e
   as pontas dos galhos escapam pelas bordas — é textura, não assunto. */
.manifesto__foto { position: relative; isolation: isolate; }
.manifesto__foto > .painel-foto { z-index: 1; }
.manifesto__arvore {
  position: absolute;
  /* Puxada para a direita: a copa sobra na margem da página em vez de encostar
     na coluna de texto. */
  left: 57%;
  /* Acima do centro: a copa nasce por cima da borda de cima da foto e desce
     pelos dois lados; o tronco e o balanço ficam escondidos atrás do painel. */
  top: 30%;
  transform: translate(-50%, -50%);
  width: min(172%, 820px);
  /* vence o `img { max-width: 100% }` da base — a árvore precisa passar das
     bordas do painel para a copa aparecer dos dois lados */
  max-width: none;
  height: auto;
  opacity: .3;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 1079px) {
  /* No celular a foto ocupa quase a largura toda: a árvore volta ao centro,
     sobe um pouco (para a copa aparecer acima do painel) e apaga, para ficar
     como textura e não como mancha ao lado da foto. */
  .manifesto__arvore { left: 50%; top: 26%; width: min(150%, 560px); opacity: .22; }
}

/* ==========================================================================
   ÁRVORE DE RESPIRO — decorativa, nunca sobre texto denso
   ========================================================================== */
.arvore-respiro {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: .07;
  z-index: 0;
  color: var(--green);
}
.secao--escuro .arvore-respiro, .secao--verde .arvore-respiro { color: var(--areia); opacity: .05; }
.secao > .wrap { position: relative; z-index: 1; }