/* ─────────────────────────────────────────────────────────────
   CIELO ANDALUZ — Home · V3
   Type: Qualera (display) · Figtree (text)
   Palette + padronagem: guia de marca, 02. Identidade Visual
   ───────────────────────────────────────────────────────────── */

@font-face{
  font-family:"Figtree";
  src:url("../assets/fonts/figtree.woff2") format("woff2");
  font-weight:300 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Qualera";
  src:url("../assets/fonts/qualera.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
:root{
  --cotton:#F3F2EE; --sand:#F0E2C8; --linen:#CCBEB1; --taupe:#A28067;
  --almond:#853F1B; --sage:#5B6751; --olive:#676E2B; --forest:#2D3A28;

  --ink:var(--forest);
  --paper:var(--cotton);

  --f-display:"Qualera",'Playfair Display',Georgia,serif;
  --f-text:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --gut:clamp(20px,5vw,72px);
  --rail:clamp(0px,10vw,190px);
  --ease:cubic-bezier(.16,1,.3,1);
  --secpad:clamp(84px,10.5vw,180px);
  /* Raio do encaixe entre secoes. Em zero, as secoes ficam de canto reto e
     o encaixe some junto, porque a margem negativa e o padding de
     compensacao saem do mesmo valor. Pedido no slide 10 do feedback:
     "para todas as fotos e secoes full width do site, remover bordas
     arredondadas". */
  --rr:0px;

  /* the cortijo window: an oversized top radius forces the browser to
     scale both radii down to exactly half the width, so the dome is a
     true semicircle whatever the box proportion is */
  --arch:9999px 9999px 4px 4px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-text);font-weight:350;
  font-size:clamp(15.5px,1.02vw,17.5px);line-height:1.62;letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{display:block;max-width:100%}
p,li{text-wrap:pretty}
h1,h2,h3,h4,.display,.finca__statement,.lead{text-wrap:balance}
a{color:inherit}
::selection{background:var(--olive);color:var(--cotton)}

/* ── type primitives ─────────────────────────────────────── */
.eyebrow{
  font-size:clamp(10px,.72vw,11.5px);font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--taupe);margin:0;
}
.display{
  font-family:var(--f-display);font-weight:400;line-height:.92;
  letter-spacing:-.014em;margin:0;font-size:clamp(44px,7.6vw,132px);
}
.display--md{font-size:clamp(32px,4.6vw,74px);line-height:.97;letter-spacing:-.012em}
.display--sm{font-size:clamp(25px,2.5vw,38px);line-height:1.04;letter-spacing:-.008em}
.lead{font-size:clamp(17px,1.32vw,22px);line-height:1.5;font-weight:350}
.muted{color:color-mix(in srgb,var(--ink) 66%,transparent)}

.link{
  display:inline-flex;align-items:baseline;gap:.55em;white-space:nowrap;
  font-size:clamp(11px,.78vw,12.5px);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  padding-bottom:.5em;position:relative;color:inherit;
}
.link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform-origin:left;transform:scaleX(.999);transition:transform .6s var(--ease);
}
.link:hover::after{transform:scaleX(0);transform-origin:right}
.link .arw{display:inline-block;transition:transform .5s var(--ease)}
.link:hover .arw{transform:translateX(.35em)}
a:focus-visible,button:focus-visible{outline:2px solid var(--olive);outline-offset:4px;border-radius:2px}

.btn{
  display:inline-block;padding:1.02em 2em .95em;
  border:1px solid currentColor;border-radius:999px;
  font-size:clamp(11px,.76vw,12.5px);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  transition:background-color .45s var(--ease),color .45s var(--ease),transform .45s var(--ease);
}
/* o .btn foi escrito para <a>. Num <button> o fundo do proprio navegador
   aparece por baixo, porque a regra acima nunca declara background. */
button.btn{
  background:transparent;font:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  font-size:clamp(11px,.76vw,12.5px);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
}
.btn:hover{background:currentColor;transform:translateY(-2px)}
/* No hover o botao inverte: o fundo vira a cor atual e o texto vira o oposto.
   Isso so funciona quando o botao e escuro sobre fundo claro. Sobre fundo
   escuro o botao e claro, e o texto em Algodao ficava ilegivel sobre ele.
   --btn-ink diz qual e o oposto em cada contexto. */
.btn:hover span{color:var(--btn-ink,var(--paper))}

/* Blocos de fundo escuro: ali o botao e claro, e o oposto e a tinta. */
.deep,
.foot,
.enq,
.ck,
.band,
.region,
.pg--forest,
.ph--almond,
.ph--sage,
.nl--sand{--btn-ink:var(--forest)}

/* ── shell ───────────────────────────────────────────────── */
.wrap{padding-inline:var(--gut);max-width:1680px;margin-inline:auto}
.section{padding-block:var(--secpad)}

/* section transitions: the block above keeps a soft bottom edge and the
   next one slides up behind it, so its colour fills the two notches */
.rnd{position:relative;z-index:2;clip-path:inset(0 round 0 0 var(--rr) var(--rr))}
.tuck{position:relative;z-index:1;margin-top:calc(var(--rr) * -1)}
.section.tuck{padding-top:calc(var(--secpad) + var(--rr))}
.railed{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0 clamp(16px,3vw,56px)}
.rail-tag{position:sticky;top:112px}
.head{display:grid;gap:clamp(18px,2.2vw,30px);grid-template-columns:minmax(0,1fr);margin-bottom:clamp(46px,5.4vw,86px)}
@media(min-width:960px){
  .head{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(30px,5vw,92px);align-items:end}
  .head__aside{padding-bottom:.5em}
}
.head__aside > *+*{margin-top:22px}

/* ── nav ─────────────────────────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(13px,1.4vw,20px) var(--gut);color:var(--cotton);
  transition:color .5s var(--ease),padding .5s var(--ease),transform .5s var(--ease);
}
.nav::before{
  content:"";position:absolute;inset:0;background:var(--paper);opacity:0;transform:translateY(-100%);
  transition:opacity .5s var(--ease),transform .55s var(--ease);
  border-bottom:1px solid color-mix(in srgb,var(--forest) 12%,transparent);
}
.nav.is-solid{color:var(--forest);padding-block:clamp(10px,1vw,14px)}
.nav.is-solid::before{opacity:1;transform:translateY(0)}
.nav.is-hidden{transform:translateY(-102%)}
.nav > *{position:relative}

.brand{display:grid;width:clamp(102px,8.2vw,132px);line-height:0}
.brand img{width:100%;grid-area:1/1;transition:opacity .5s var(--ease)}
.nav.is-solid .brand .l-cream{opacity:0}
.nav:not(.is-solid) .brand .l-forest{opacity:0}

.menu{display:flex;align-items:center;gap:clamp(14px,1.9vw,34px);list-style:none;margin:0;padding:0}
.menu a{
  text-decoration:none;font-size:clamp(10.5px,.75vw,12px);font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;position:relative;padding-block:6px;
}
.menu a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);
}
.menu a:hover::after{transform:scaleX(1);transform-origin:left}
.menu .cta a{border:1px solid currentColor;border-radius:999px;padding:.72em 1.35em .62em;
  transition:background-color .45s var(--ease)}
.menu .cta a::after{display:none}
.menu .cta a:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.burger{display:none}

/* ── the dark opening: hero + the finca share one ground ─── */
.deep{background:var(--forest);color:var(--sand)}
.deep__wall{position:absolute;inset:0;z-index:0;pointer-events:none}
.deep__wall i{
  display:block;position:sticky;top:0;height:100vh;
  background:url("../assets/brand/texture-forest.webp") center/cover no-repeat;
  opacity:.26;
}

/* ── hero ────────────────────────────────────────────────── */
.hero{position:relative;height:210vh;z-index:1}
.hero__stick{position:sticky;top:0;height:100vh;overflow:hidden;background:transparent}
.hero__media{
  position:absolute;inset:0;z-index:1;
  --ix:0vw; --iy:0vh; --ib:0vh; --r:0vw;
  clip-path:inset(var(--iy) var(--ix) var(--ib) var(--ix) round var(--r) var(--r) 6px 6px);
  will-change:clip-path;
}
/* O primeiro quadro entra como imagem, atras do video.
   Como <img>, ele e um candidato a "maior elemento" da pagina e pinta junto
   com o resto; enquanto era so o atributo poster do <video>, o navegador nao
   o contava, e sobrava para o paragrafo da barra de cookies ser o maior
   elemento medido, o que jogava a nota de desempenho para 68. */
.hero__media img,
.hero__media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(var(--vs,1.06));
}
/* O video so aparece quando comeca a tocar, para nao piscar o preto do
   elemento vazio por cima da foto enquanto ele ainda nao tem quadro. */
.hero__media video{opacity:0;transition:opacity .6s var(--ease)}
.hero__media video.tocando{opacity:1}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(45,58,40,.55) 0%,rgba(45,58,40,.1) 34%,rgba(45,58,40,.05) 54%,rgba(45,58,40,.66) 100%);
  opacity:var(--ov,1);
}
.hero__copy{
  position:absolute;inset:auto 0 0;z-index:3;
  padding:0 var(--gut) clamp(46px,7vh,88px);color:var(--cotton);
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;
  /* A linha do titulo e apertada (0.99) de proposito, o que deixa a perna do
     "g" para fora da caixa. Empilhados, 22px de respiro nao bastavam e o
     descendente encostava no paragrafo. A folga agora acompanha o corpo do
     titulo. */
  gap:clamp(30px,3.2vw,44px) clamp(24px,4vw,64px);
  opacity:var(--co,1);transform:translateY(calc(var(--cy,0) * -1px));
}
.hero h1{color:var(--cotton);max-width:13ch;margin:.24em 0 0}
/* O hero foi desenhado para um titulo de tres palavras, como "Live the rhythm
   of the finca." A For Facilitators traz uma frase inteira: com 13ch de
   largura e 132px de corpo ela virava dezesseis linhas, 1611px de altura numa
   tela de 900. Titulo longo ganha esta classe, com menos corpo e mais
   largura. O componente a aplica sozinho pelo tamanho do texto.

   O corpo era 3,6vw, metade do titulo curto, e a diferenca entre as paginas
   saltava aos olhos: a cliente reparou e preferiu o tamanho das outras. Subiu
   para 5,4vw, o maximo que mantem a frase de 87 caracteres em quatro linhas
   dentro da altura do hero, e a largura foi de 21ch para 19ch para as linhas
   nao ficarem longas demais para ler. */
.hero h1.display--long{font-size:clamp(34px,5.4vw,88px);line-height:1.03;max-width:19ch}
.hero .eyebrow{color:color-mix(in srgb,var(--sand) 82%,transparent)}
.hero__sub{max-width:32ch;margin:0;color:color-mix(in srgb,var(--cotton) 88%,transparent)}
.hero__side{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-bottom:6px}
/* A coluna do lado e `auto` na grade do hero: sem limite de largura, um
   paragrafo comprido empurra ate a coluna do titulo colapsar para zero. Todo
   texto daqui herda a mesma medida do .hero__sub. */
.hero__side p{max-width:32ch;margin:0;color:color-mix(in srgb,var(--cotton) 88%,transparent)}
.hero__caption{
  position:absolute;left:0;right:0;bottom:clamp(22px,3.6vh,44px);z-index:3;
  text-align:center;color:var(--sand);
  opacity:var(--cap,0);transform:translateY(calc((1 - var(--cap,0)) * 14px));
}
.hero__copy > *{opacity:0;transform:translateY(28px)}
.is-ready .hero__copy > *{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1.15s var(--ease)}
.is-ready .hero__copy > *:nth-child(1){transition-delay:.3s}
.is-ready .hero__copy > *:nth-child(2){transition-delay:.48s}

/* ── the finca ───────────────────────────────────────────── */
.finca{position:relative;z-index:1}
.finca .eyebrow{color:color-mix(in srgb,var(--linen) 92%,transparent)}
.finca__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,64px)}
@media(min-width:920px){
  .finca__grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(44px,6vw,110px);align-items:start}
}
.finca__statement{
  font-family:var(--f-display);font-weight:400;margin:0;
  font-size:clamp(30px,5.2vw,86px);line-height:.98;letter-spacing:-.016em;color:var(--cotton);
}
.finca__aside{border-top:1px solid color-mix(in srgb,var(--sand) 26%,transparent);padding-top:26px}
.finca__aside p{margin:0 0 1.15em;max-width:52ch;color:color-mix(in srgb,var(--sand) 78%,transparent)}
.finca__aside p:last-child{margin-bottom:0}

/* ── ways (arch cards) ───────────────────────────────────── */
/* ── ways: vertical scroll drives a horizontal band ────── */
.ways{background:var(--paper);position:relative}
.ways__stick{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.wp--intro .eyebrow{margin-bottom:.2em}
.ways__track{
  flex:none;width:max-content;
  display:flex;align-items:stretch;gap:clamp(30px,3.6vw,70px);
  padding-inline:calc(var(--gut) + var(--rail) + clamp(16px,3vw,56px)) var(--gut);
  will-change:transform;
}
.wp{flex:none;width:clamp(290px,calc((78vh - 178px) * .8),540px)}
.wp--intro{width:clamp(280px,34vw,500px);display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,2vw,26px)}
.wp--intro h2{
  font-family:var(--f-display);font-weight:400;margin:0;
  font-size:clamp(30px,3.6vw,56px);line-height:.99;letter-spacing:-.012em;
}
.wp--intro p{margin:0}
.card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.card.wp .card__media{flex:none;aspect-ratio:.8}
.card.wp .card__body{flex:1;padding-top:18px;gap:10px}
.card.wp .card__body p{font-size:.9em}
.card.wp .link{padding-top:12px}
.card__media{position:relative;overflow:hidden;border-radius:var(--arch);aspect-ratio:.78;background:var(--linen)}
/* A sobra que o parallax tem para andar. O deslocamento maximo e 7% da
   altura da propria .mv, que e 122% da janela: 8,5% da janela contra os 11%
   de sobra. Era 9% de sobra contra 8,3% de deslocamento, margem pequena
   demais para o arredondamento de subpixel.
   A ordem das duas linhas importa. Elas tem o mesmo peso, e a .mv--x estava
   escrita antes, de modo que o inset da .mv a apagava: a imagem que anda de
   lado ficava com folga em cima e embaixo, que ela nao usa, e nenhuma nos
   lados, que e por onde ela anda. Toda rolagem descobria ate 19px da janela,
   e era essa a borda escura que aparecia nos carrosseis da The Finca e nos
   cartoes da home, ora em uma foto ora em outra conforme a posicao. */
.mv{position:absolute;inset:-11% 0;will-change:transform}
.mv--x{inset:0 -11%}
.mv img{width:100%;height:100%;object-fit:cover}
.card__n{
  position:absolute;left:0;right:0;bottom:16px;text-align:center;color:var(--cotton);z-index:2;
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  text-shadow:0 1px 14px rgba(45,58,40,.55);
}
.card__body{padding-top:22px;display:flex;flex-direction:column;gap:12px;flex:1}
.card h3{font-family:var(--f-display);font-weight:400;font-size:clamp(21px,1.62vw,27px);line-height:1.08;margin:0;letter-spacing:-.006em}
.card p{margin:0;font-size:.95em;color:color-mix(in srgb,var(--ink) 72%,transparent)}
.card .link{margin-top:auto;padding-top:14px}

/* ── full-bleed band with parallax ───────────────────────── */
.band{position:relative;height:clamp(74vh,92vh,1000px);overflow:hidden;background:var(--forest)}
.band__par{position:absolute;inset:-16% 0;will-change:transform}
.band__par img{width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(45,58,40,.26) 30%,rgba(45,58,40,.62) 100%)}
.band__q{position:absolute;inset:auto 0 0;z-index:2;padding-bottom:clamp(40px,6vw,80px);color:var(--cotton)}
.band__q .rail-tag{position:static;white-space:nowrap;color:color-mix(in srgb,var(--sand) 84%,transparent)}
.band__q p.display{max-width:17ch;margin:0}
/* A linha do titulo e apertada de proposito (0,97), o que deixa a perna do
   "g" de "gathering" para fora da caixa, e o paragrafo vinha colado logo
   abaixo. Pedido da cliente por audio: um respiro entre os dois. */
.band__q p.display + .prose{margin-top:clamp(18px,1.9vw,32px)}

/* ── for facilitators: the window ────────────────────────── */
.win{position:relative;background:var(--forest);color:var(--sand)}
.win__stick{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.win__bg{position:absolute;inset:0;z-index:0}
.wb{position:absolute;inset:-6% 0;opacity:0;transition:opacity 1.05s var(--ease)}
.wb.on{opacity:1}
.wb img,.wb video{width:100%;height:100%;object-fit:cover}
.win__bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(115% 78% at 50% 46%,rgba(45,58,40,.16) 0%,rgba(45,58,40,.5) 66%,rgba(45,58,40,.68) 100%);
}
/* A janela da home e contorno, nao preenchimento: o verde solido escondia a
   foto que ela emoldura. Com o traco bege a foto atravessa, e a legibilidade
   vem do vela que .win__bg::after ja poe sobre a imagem. */
.win__panel{
  position:relative;z-index:2;--pw:clamp(300px,35vw,486px);
  width:var(--pw);min-width:0;min-height:calc(var(--pw) * 1.28);
  display:flex;flex-direction:column;
  background:transparent;border:1.5px solid var(--sand);border-radius:var(--arch);
  padding:calc(var(--pw) * .28) clamp(26px,2.6vw,42px) clamp(26px,3.2vh,42px);
  text-shadow:0 1px 2px rgba(20,26,18,.5),0 2px 22px rgba(20,26,18,.85);text-align:center;
}
.win__panel .eyebrow{color:color-mix(in srgb,var(--linen) 88%,transparent);margin-bottom:clamp(22px,3.4vh,42px)}
.win__mid{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.win__slides{display:grid;min-width:0}
.win__slides > *{min-width:0}
.wt{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .7s var(--ease);pointer-events:none}
.wt.on{opacity:1;transform:none;pointer-events:auto}
.wt h3{
  font-family:var(--f-display);font-weight:400;margin:0 0 .5em;
  font-size:clamp(19px,1.5vw,26px);line-height:1.08;letter-spacing:-.008em;
  /* balance reparte as linhas em larguras parecidas, em vez de deixar uma
     palavra curta em cima e a frase inteira embaixo. Sem break-word de
     proposito: ele partia "accommodation" no meio, que e pior do que
     qualquer quebra de linha. */
  max-width:100%;text-wrap:balance;
}
/* Peso 400 em vez dos 350 do corpo do site, e mais opacidade: sem o verde
   solido atras, o texto passou a concorrer com a foto e o traco fino sumia. */
.wt p{
  margin:0 auto;max-width:min(100%,30ch);text-wrap:pretty;font-weight:400;
  font-size:clamp(13.5px,.92vw,15px);line-height:1.55;
  color:color-mix(in srgb,var(--sand) 90%,transparent);
}
.win__foot{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:auto;padding-top:clamp(24px,3.4vh,40px)}
/* margin-bottom:0 desfaz a regra de .win__panel .eyebrow, escrita para o
   rotulo do topo do arco e que tambem acerta o "Scroll" aqui embaixo. Como o
   alinhamento central de um flex conta a margem, o texto subia metade dela,
   quinze pixels acima dos tracos. */
.win__foot .eyebrow{
  color:color-mix(in srgb,var(--linen) 82%,transparent);flex:none;margin-bottom:0;
}
.win__rail{display:flex;gap:5px;flex:none;width:clamp(96px,9vw,140px)}
.win__rail i{
  flex:1;height:2px;border-radius:2px;position:relative;overflow:hidden;
  background:color-mix(in srgb,var(--sand) 24%,transparent);
}
.win__rail i::after{
  content:"";position:absolute;inset:0;background:var(--sand);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);
}
.win__rail i.on::after{transform:scaleX(1)}

/* ── what's on ───────────────────────────────────────────── */
.whats{background:var(--sand)}
.events{display:grid;gap:clamp(26px,2.8vw,46px);grid-template-columns:1fr}
@media(min-width:820px){.events{grid-template-columns:repeat(3,1fr)}}
.ev{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:transform .5s var(--ease);
}
.ev:hover{transform:translateY(-4px)}
.ev__media{
  position:relative;overflow:hidden;border-radius:var(--arch);
  aspect-ratio:.8;background:var(--linen);
}
.ev__body{
  background:var(--paper);padding:clamp(22px,2vw,30px);border-radius:0 0 4px 4px;
  display:flex;flex-direction:column;gap:13px;flex:1;
  transition:background-color .5s var(--ease);
}
.ev:hover .ev__body{background:#fff}
.ev__meta{display:flex;flex-wrap:wrap;gap:.6em;align-items:center}
.ev h3{font-family:var(--f-display);font-weight:400;font-size:clamp(21px,1.6vw,27px);line-height:1.06;margin:0}
.ev p{margin:0;font-size:.93em;color:color-mix(in srgb,var(--ink) 70%,transparent)}
.ev__foot{margin-top:auto;padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.pill{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:.42em .82em .34em;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.pill--open{color:var(--olive)}
.pill--apps{color:var(--taupe)}
.ev__arw{transition:transform .5s var(--ease)}
.ev:hover .ev__arw{transform:translateX(6px)}

/* ── regeneration + the running line ─────────────────────── */
.regen{position:relative;background:#F3F2EE;overflow:hidden;padding-bottom:clamp(60px,7vw,110px)}
.regen__pat{
  position:absolute;inset:-20% 0;background:url("../assets/brand/pattern-green.webp") center/cover no-repeat;
  opacity:.026;mix-blend-mode:multiply;pointer-events:none;will-change:transform;
}
.regen .wrap{position:relative}
.regen__grid{display:grid;gap:clamp(36px,4vw,72px);grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:900px){.regen__grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(44px,6vw,110px)}}
.regen__fig{position:relative;border-radius:var(--arch);overflow:hidden;aspect-ratio:.8;background:var(--linen);margin:0}
.regen__txt p{margin:0 0 1.1em;max-width:58ch}
.regen__txt p:last-of-type{margin-bottom:1.9em}
.regen h2{margin-bottom:.42em}


/* ── region ──────────────────────────────────────────────── */
.region{position:relative;color:var(--cotton);isolation:isolate;overflow:hidden;min-height:94vh;display:flex;align-items:center}
.region > .wrap{width:100%}
.region__par{position:absolute;inset:-14% 0;z-index:-2;will-change:transform}
.region__par img{width:100%;height:100%;object-fit:cover}
.region::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(45,58,40,.9) 0%,rgba(45,58,40,.64) 46%,rgba(45,58,40,.3) 100%);
}
.region__grid{display:grid;gap:clamp(30px,3.4vw,56px);grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.region__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,100px)}}
.region p{margin:0 0 1.1em;max-width:54ch;color:color-mix(in srgb,var(--cotton) 86%,transparent)}
.region .eyebrow{color:color-mix(in srgb,var(--sand) 82%,transparent)}
.facts{list-style:none;margin:clamp(26px,3vw,44px) 0 0;padding:0;display:grid;gap:0}
.facts li{
  display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:15px 0;
  border-top:1px solid color-mix(in srgb,var(--cotton) 26%,transparent);
  font-size:clamp(12.5px,.86vw,14.5px);letter-spacing:.02em;
}
.facts li:last-child{border-bottom:1px solid color-mix(in srgb,var(--cotton) 26%,transparent)}
.facts b{font-weight:600;color:var(--sand)}

/* ── enquire ─────────────────────────────────────────────── */
.enq{background:var(--forest);color:var(--sand);text-align:center;position:relative;overflow:hidden}
.enq__pat{position:absolute;inset:-22% 0;background:url("../assets/brand/texture-forest.webp") center/cover no-repeat;opacity:.16;pointer-events:none;will-change:transform}
.enq .wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(20px,2vw,30px)}
.enq__mark{width:clamp(46px,4vw,66px);opacity:.92}
.enq h2{max-width:15ch;font-size:clamp(34px,5.6vw,92px)}
.enq p{margin:0;max-width:50ch;color:color-mix(in srgb,var(--sand) 84%,transparent)}
.enq .btn{margin-top:10px;border-color:var(--sand);color:var(--sand)}
.enq .btn:hover{background:var(--sand)}
.enq .btn:hover span{color:var(--forest)}

/* ── footer ──────────────────────────────────────────────── */
.foot{background:var(--forest);color:var(--sand);padding-block:clamp(60px,6.6vw,104px) 34px}
.foot__note{
  display:grid;gap:clamp(24px,3vw,48px);grid-template-columns:minmax(0,1fr);
  padding-bottom:clamp(44px,4.6vw,72px);
  border-bottom:1px solid color-mix(in srgb,var(--sand) 22%,transparent);
}
@media(min-width:900px){
  /* a coluna da direita precisa caber o campo e o botao na mesma linha:
     por 3px eles quebravam, e o campo espremido nao serve para digitar
     endereco de e-mail */
  .foot__note{
    grid-template-columns:minmax(0,1fr) minmax(min(480px,100%),auto);
    align-items:center;gap:clamp(40px,5vw,90px);
  }
  .foot__note > *:last-child{justify-self:end}
  /* largura minima em pixel, e nao em porcentagem: o involucro do rodape
     encolhe ao conteudo, entao uma porcentagem se mediria contra ele mesmo
     e nunca cresceria. Com pixel, o campo e o botao cabem na mesma linha. */
  .foot .nl{min-width:480px}
}
.foot__note h2{margin:.3em 0 0}
.foot__note p{margin:14px 0 0;max-width:37ch;color:color-mix(in srgb,var(--sand) 72%,transparent)}
.foot__cols{display:grid;gap:clamp(28px,3vw,44px);padding-block:clamp(44px,4.6vw,72px);grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){.foot__cols{grid-template-columns:1.3fr repeat(4,minmax(0,1fr))}}
.foot__cols h4{margin:0 0 16px;font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--linen) 90%,transparent)}
.foot__cols ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot__cols a{text-decoration:none;font-size:.93em;color:color-mix(in srgb,var(--sand) 84%,transparent);transition:color .35s var(--ease)}
.foot__cols a:hover{color:var(--cotton)}
.foot__logo{display:block;width:clamp(132px,11vw,178px);margin-bottom:18px}
.foot__logo img{width:100%}
@media(max-width:819px){
  .foot__logo{width:min(228px,62vw);margin-bottom:14px}
  .foot__brandline{max-width:30ch}
}
.foot__brandline{font-family:var(--f-display);font-size:clamp(17px,1.2vw,21px);line-height:1.14;margin:0;max-width:22ch;color:var(--sand)}
.foot__base{
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;align-items:center;
  padding-top:26px;border-top:1px solid color-mix(in srgb,var(--sand) 22%,transparent);
  font-size:11.5px;letter-spacing:.05em;color:color-mix(in srgb,var(--sand) 62%,transparent);
}
.foot__base a{text-decoration:none}
.foot__base a:hover{color:var(--cotton)}

/* ── motion system ───────────────────────────────────────── */
.sp{
  display:inline-block;white-space:nowrap;opacity:0;transform:translateY(.5em);filter:blur(8px);
  transition:opacity .72s var(--ease) var(--d,0ms),
             transform .95s var(--ease) var(--d,0ms),
             filter .72s var(--ease) var(--d,0ms);
}
.in .sp,.sp.in{opacity:1;transform:none;filter:blur(0)}
.nb{white-space:nowrap;color:inherit}

/* Tempos encurtados quase pela metade. Somados ao gatilho que disparava tarde
   demais, a foto levava mais de um segundo e meio para terminar de aparecer
   depois de ja estar na tela, e a cliente reclamou com razao. O desenho do
   movimento e o mesmo, so que no tempo de quem esta rolando a pagina. */
.rv{opacity:0;transform:translateY(22px);transition:opacity .5s var(--ease),transform .58s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv--d{transition-delay:.1s}
.rv-img{overflow:hidden}
.rv-img img{clip-path:inset(0 0 100% 0);transition:clip-path .62s var(--ease)}
.rv-img.in img{clip-path:inset(0 0 0 0)}
.rv-img .card__n{opacity:0;transition:opacity .8s var(--ease) .35s}
.rv-img.in .card__n{opacity:1}
[data-stagger] > *{opacity:0;transform:translateY(20px)}
[data-stagger].in > *{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .56s var(--ease)}
/* O atraso em cascata era de 100ms por cartao, e o quinto so aparecia 400ms
   depois do primeiro, ja fora do tempo de quem rola. Metade disso mantem a
   leitura de um depois do outro sem fazer ninguem esperar. */
[data-stagger].in > *:nth-child(2){transition-delay:.05s}
[data-stagger].in > *:nth-child(3){transition-delay:.1s}
[data-stagger].in > *:nth-child(4){transition-delay:.15s}
[data-stagger].in > *:nth-child(5){transition-delay:.2s}

/* O bloco marcado com data-exit subia e apagava conforme saia da tela. O
   slide 27 pediu titulo sempre estatico, porque o movimento dependia da
   altura da janela e se comportava diferente em cada aparelho, chegando a
   cobrir as fotos de baixo. O atributo continua na marcacao, sem efeito. */

/* ── mobile ──────────────────────────────────────────────── */
@media(max-width:900px){
  .railed{grid-template-columns:minmax(0,1fr)}
  .railed > .rail{margin-bottom:16px}
  .rail-tag{position:static}
  .hero__copy{grid-template-columns:minmax(0,1fr);gap:clamp(26px,5vw,38px)}
  .hero h1,.hero h1.display--long{max-width:none}
  .hero__sub{max-width:none}
  .hero__side{gap:18px}
  .nav .brand,.nav .burger{z-index:3}
  .nav .burger{margin-left:auto}
  .menu-open .nav{color:var(--sand)}
  .menu-open .nav::before{opacity:0;transform:translateY(-100%)}
  .menu-open .brand .l-forest{opacity:0}
  .menu-open .brand .l-cream{opacity:1}
  .burger{
    display:block;background:none;border:0;color:inherit;cursor:pointer;font:inherit;
    font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:10px 2px;
  }
  .menu{
    position:fixed;inset:0;z-index:1;background:var(--forest);color:var(--sand);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:0 var(--gut);
    clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);
  }
  .menu.open{clip-path:inset(0 0 0 0)}
  .menu a{font-family:var(--f-display);font-size:clamp(28px,7.6vw,44px);letter-spacing:-.01em;text-transform:none;font-weight:400;padding-block:9px}
  .menu .cta a{border:0;padding:9px 0;color:var(--linen)}
  .menu .cta a:hover{background:none}
  .hero{height:180vh}
  .band{height:clamp(62vh,76vh,720px)}

  /* what's on becomes a swipe carousel too */
  .events{
    display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .events::-webkit-scrollbar{display:none}
  .ev{flex:none;width:78vw;scroll-snap-align:start}
  .events[data-stagger] > *{transform:none}

  /* the band becomes a swipe carousel */
  .ways{height:auto!important}
  .ways__stick{position:static;height:auto;overflow:visible;display:block;padding-block:var(--secpad)}
  .ways__track{
    transform:none!important;width:auto;height:auto;gap:16px;
    padding-inline:var(--gut);overflow-x:auto;overflow-y:hidden;
    padding-bottom:36px;margin-bottom:-30px;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gut);-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .ways__track::-webkit-scrollbar{display:none}
  .wp{scroll-snap-align:start;width:78vw}
  /* the opening text steps out of the carousel and reads full width */
  .ways__stick > .wp--intro{
    width:auto;padding:0 var(--gut);margin-bottom:clamp(26px,5vw,42px);
    display:block;
  }
  .ways__stick > .wp--intro h2{margin-bottom:.5em}
  .card.wp{height:auto}
  .card.wp .card__media{flex:none;aspect-ratio:.8}

  .win{height:auto!important}
  .win__stick{position:static;height:auto;display:block;padding-block:clamp(70px,11vw,110px)}
    .win__bg{position:relative;inset:auto;aspect-ratio:.84;margin:0 var(--gut) clamp(26px,5vw,40px);border-radius:var(--arch);overflow:hidden}
  .win__bg::after{background:linear-gradient(to bottom,rgba(45,58,40,.05),rgba(45,58,40,.35))}
  .wb{inset:0;opacity:0}
  .wb:first-child{opacity:1}
  .win__panel{width:auto;margin:0 var(--gut);padding:0;background:none;border-radius:0;box-shadow:none}
  .win__slides{display:block}
  .win__panel{text-align:left}
  .win__panel > .eyebrow{margin-bottom:clamp(18px,3vw,26px)}
  .wt p{max-width:none;margin:0}
  .wt{opacity:1;transform:none;padding:clamp(16px,3vw,22px) 0;border-top:1px solid color-mix(in srgb,var(--sand) 20%,transparent)}
  .wt:last-child{border-bottom:1px solid color-mix(in srgb,var(--sand) 20%,transparent)}
  .win__foot{display:none}
}
@media(min-width:901px){.menu{clip-path:none!important}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv,[data-stagger] > *,.sp{opacity:1!important;transform:none!important;filter:none!important}
  .rv-img img{clip-path:none!important}
  .rv-img .card__n{opacity:1!important}
  .hero{height:100vh}
  .hero__media{clip-path:none!important}
  .ways{height:auto!important}
  .ways__stick{position:static;height:auto;overflow:visible;display:block;padding-block:110px}
  .ways__track{transform:none!important;width:auto;height:auto;flex-wrap:wrap;padding-inline:var(--gut)}
  .wp,.wp--intro{width:100%}
  .card.wp{height:auto}
  .card.wp .card__media{flex:none;aspect-ratio:.9}
  .win{height:auto!important}
  .win__stick{position:static;height:auto;display:block;padding-block:110px}
    .win__bg{position:relative;inset:auto;aspect-ratio:.84;margin:0 var(--gut) 32px;border-radius:var(--arch);overflow:hidden}
  .wb{opacity:0}.wb:first-child{opacity:1}
  .win__panel{width:auto;margin:0 var(--gut);padding:0;background:none;box-shadow:none}
  .win__slides{display:block}
  .win__panel{text-align:left}
  .wt p{max-width:none;margin:0}
  .wt{opacity:1;transform:none;padding:16px 0;border-top:1px solid color-mix(in srgb,var(--sand) 20%,transparent)}
  .win__foot{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINAS INTERNAS
   Mesma gramática da home (a janela do cortijo, o dobrar de 32 px entre
   seções, a escada tipográfica), com componentes próprios para conteúdo
   longo: ficha, tríptico, percurso, passos e perguntas.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── abertura de página ─────────────────────────────────────────────────── */
.ph{
  --secpad:clamp(74px,8.8vw,150px);
  position:relative;background:var(--forest);color:var(--cotton);
  padding-block:calc(var(--secpad) + clamp(52px,6vw,86px)) var(--secpad);
  overflow:hidden;
}
.ph__wall{
  position:absolute;inset:0;background:url("../assets/brand/texture-forest.webp") center/cover;
  opacity:.13;pointer-events:none;
}
.ph__grid{
  position:relative;display:grid;gap:clamp(38px,5vw,72px);
  grid-template-columns:minmax(0,1fr);align-items:end;
}
.ph__lead{max-width:56ch}
.ph h1{margin:.18em 0 0}
.ph .eyebrow{color:color-mix(in srgb,var(--sand) 84%,transparent)}
.ph__lead p{color:color-mix(in srgb,var(--cotton) 82%,transparent)}
.ph__lead > *+*{margin-top:clamp(18px,1.8vw,26px)}
.ph__cta{margin-top:clamp(26px,3vw,40px)}
.ph__cta .btn{border-color:var(--sand);color:var(--sand)}
.ph__cta .btn:hover{background:var(--sand)}
.ph__cta .btn:hover span{color:var(--forest)}

/* a janela: retângulo em pé, cúpula perfeita */
.win-fig{
  position:relative;margin:0;overflow:hidden;border-radius:var(--arch);
  aspect-ratio:.8;
  /* Sem cor de fundo. O parallax desloca a foto dentro da janela, e a curva
     do arco e recortada pelo compositor, que arredonda meio pixel para um
     lado ou para o outro conforme a camada e promovida. Com um cinza quase
     preto aqui, essa meia sobra aparecia como uma borda escura no arco, ora
     em uma foto ora em outra. Transparente, a mesma sobra mostra a cor da
     propria secao e ninguem ve. */
  background:transparent;
}
/* A mesma janela, sem a cupula. Nasceu do feedback: a For Facilitators tinha
   arco demais, e o triptico dos espacos troca o arco pelo retangulo em vez de
   ganhar um desenho proprio. A regra 2 continua valendo: muda o canto, nao a
   proporcao, e o retangulo segue em pe. */
.win-fig--flat{border-radius:0}
.win-fig img,.win-fig video{width:100%;height:100%;object-fit:cover;display:block}
.ph__fig{width:100%;justify-self:end}

@media (min-width:900px){
  .ph__grid{grid-template-columns:minmax(0,1fr) clamp(240px,26vw,400px);gap:clamp(48px,6vw,110px)}
}

/* ── seções de texto ────────────────────────────────────────────────────── */
.pg{--secpad:clamp(74px,8.8vw,150px);padding-block:var(--secpad)}
.pg--cotton{background:var(--cotton);color:var(--forest)}
.pg--sand{background:var(--sand);color:var(--forest)}
.pg--forest{background:var(--forest);color:var(--cotton)}
.pg--forest .eyebrow{color:color-mix(in srgb,var(--sand) 80%,transparent)}
.pg--forest .muted{color:color-mix(in srgb,var(--cotton) 70%,transparent)}
.pg--sand .muted{color:color-mix(in srgb,var(--forest) 68%,transparent)}
.pg.tuck{padding-top:calc(var(--secpad) + var(--rr))}

.prose{max-width:64ch}
.prose > *{margin:0}
.prose > *+*{margin-top:clamp(17px,1.6vw,26px)}
.prose h3{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(21px,1.9vw,30px);line-height:1.08;letter-spacing:-.008em;
  margin:clamp(30px,3.4vw,52px) 0 0;
}
.prose h3+p{margin-top:.7em}

/* título de seção com resumo ao lado */
.ptitle{
  display:grid;gap:clamp(20px,2.4vw,34px);grid-template-columns:minmax(0,1fr);
  margin-bottom:clamp(40px,5vw,78px);
}
.ptitle h2{margin:.22em 0 0}
@media (min-width:900px){
  .ptitle{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
          gap:clamp(34px,5vw,96px);align-items:end}
  .ptitle__aside{padding-bottom:.4em}
}
.ptitle__aside > *{margin:0}
.ptitle__aside > *+*{margin-top:clamp(15px,1.3vw,21px)}
.ptitle:last-child{margin-bottom:0}

/* dois blocos de texto lado a lado */
.pcols{display:grid;gap:clamp(22px,2.6vw,40px) clamp(34px,5vw,92px);
       grid-template-columns:minmax(0,1fr)}
@media (min-width:820px){.pcols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pcols p{margin:0}

/* ── a ficha da finca ───────────────────────────────────────────────────── */
.ficha{list-style:none;margin:0;padding:0;display:grid;
       grid-template-columns:minmax(0,1fr);
       column-gap:clamp(34px,5vw,96px)}
@media (min-width:860px){.ficha{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ficha li{
  display:grid;gap:7px;align-content:start;padding:clamp(20px,2vw,28px) 0;
  border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);
}
.ficha li:last-child,.ficha li:nth-last-child(2):nth-child(odd){
  border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent);
}
@media (max-width:859px){
  .ficha li:nth-last-child(2):nth-child(odd){border-bottom:0}
  .ficha li:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent)}
}
.ficha dt,.ficha b{
  font-size:clamp(10.5px,.74vw,12px);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--almond);
}
.pg--forest .ficha b{color:var(--sand)}
.ficha li > span{font-size:clamp(15px,1.05vw,17.5px);line-height:1.45;
            color:color-mix(in srgb,currentColor 74%,transparent)}

/* ── tríptico de janelas ────────────────────────────────────────────────── */
.trip{display:grid;gap:clamp(20px,2.4vw,38px);grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.trip{grid-template-columns:repeat(3,minmax(0,1fr))}}
.trip figure{margin:0}
.trip figcaption{
  margin-top:16px;font-size:clamp(10.5px,.74vw,12px);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);
}
.pg--forest .trip figcaption{color:color-mix(in srgb,var(--linen) 92%,transparent)}

/* ── faixa de janelas que corre de lado ─────────────────────────────────── */
.strip{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:min(74vw,320px);
  gap:clamp(16px,2vw,28px);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gut);
  margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
  padding-bottom:38px;margin-bottom:-30px;scrollbar-width:none;
}
.strip::-webkit-scrollbar{display:none}
.strip > *{scroll-snap-align:start}
.strip figure{margin:0}
.strip figcaption{
  margin-top:15px;font-size:clamp(10.5px,.74vw,12px);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);
}
.pg--forest .strip figcaption{color:color-mix(in srgb,var(--linen) 90%,transparent)}
@media (min-width:1100px){
  .strip{grid-auto-columns:minmax(0,1fr);grid-auto-flow:row;
         grid-template-columns:repeat(5,minmax(0,1fr));
         overflow:visible;margin-inline:0;padding-inline:0}
}

/* ── faixa de foto de largura total ─────────────────────────────────────── */
.pband{position:relative;overflow:hidden;min-height:clamp(340px,54vw,660px);
       display:grid;align-items:end}
.pband__par{position:absolute;inset:-14% 0;will-change:transform}
.pband__par img{width:100%;height:100%;object-fit:cover}
.pband__txt{position:relative;padding-block:clamp(40px,5vw,84px);color:var(--cotton)}
.pband::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,color-mix(in srgb,var(--forest) 78%,transparent) 0%,
             color-mix(in srgb,var(--forest) 30%,transparent) 46%,transparent 74%);
}
.pband__txt{z-index:2}
.pband__txt p.display{max-width:19ch;margin:0}
.pband__txt .eyebrow{color:color-mix(in srgb,var(--sand) 84%,transparent);margin-bottom:.9em}

/* ── passos: aqui a ordem é informação ──────────────────────────────────── */
.steps{counter-reset:s;display:grid;gap:0;grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));
                                gap:0 clamp(30px,4vw,72px)}}
.steps li{
  counter-increment:s;list-style:none;position:relative;
  padding:clamp(22px,2.4vw,32px) 0;
  border-top:1px solid color-mix(in srgb,currentColor 20%,transparent);
}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  display:block;margin-bottom:clamp(14px,1.6vw,22px);
  font-family:var(--f-display);font-size:clamp(30px,3vw,46px);line-height:1;
  color:color-mix(in srgb,currentColor 34%,transparent);
}
.steps p{margin:0;font-size:clamp(15px,1.05vw,17.5px);line-height:1.5}

/* ── o percurso até a finca ─────────────────────────────────────────────── */
.route{list-style:none;margin:clamp(34px,4vw,58px) 0 0;padding:0;
       display:grid;gap:0;position:relative}
.route li{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:baseline;gap:clamp(14px,2vw,30px);
  padding:clamp(16px,1.7vw,23px) 0;
  border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);
}
.route li:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.route__mark{
  width:11px;height:14px;border-radius:9999px 9999px 2px 2px;
  background:color-mix(in srgb,currentColor 34%,transparent);align-self:center;
}
.route li:last-child .route__mark{background:var(--almond)}
.pg--forest .route li:last-child .route__mark{background:var(--sand)}
.route__name{font-size:clamp(15px,1.08vw,18px)}
.route__d{
  font-family:var(--f-display);font-size:clamp(17px,1.5vw,25px);
  white-space:nowrap;text-align:right;
}

/* ── perguntas ──────────────────────────────────────────────────────────── */
.faq{border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.faq details{border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;gap:clamp(16px,2vw,34px);
  align-items:baseline;justify-content:space-between;
  padding:clamp(19px,2vw,27px) 0;
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(18px,1.5vw,25px);line-height:1.18;letter-spacing:-.006em;
  transition:color .4s var(--ease);
}
.faq__q{min-width:0}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--almond)}
.pg--forest .faq summary:hover{color:var(--sand)}
.faq summary:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.faq__mark{
  flex:none;width:15px;height:19px;margin-top:.3em;
  border:1.5px solid color-mix(in srgb,currentColor 38%,transparent);
  border-radius:9999px 9999px 2px 2px;background:transparent;
  transition:transform .55s var(--ease),border-color .4s var(--ease),background-color .4s var(--ease);
}
.faq details[open] .faq__mark{
  transform:rotate(180deg);border-color:var(--almond);
  background:color-mix(in srgb,var(--almond) 16%,transparent);
}
.pg--forest .faq details[open] .faq__mark{
  border-color:var(--sand);background:color-mix(in srgb,var(--sand) 20%,transparent);
}
.faq{display:grid;gap:0 clamp(38px,4.6vw,86px);grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){
  .faq{grid-template-columns:repeat(2,minmax(0,1fr));border-top:0}
  .faq__col{border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.faq details[open] .faq__a{grid-template-rows:1fr}
.faq__a > div{overflow:hidden}
.faq__a p{margin:0 0 clamp(22px,2.2vw,30px);max-width:66ch;
          color:color-mix(in srgb,currentColor 74%,transparent)}
.faq__a p+p{margin-top:-.6em}

/* ── história longa, com figuras invadindo a margem ─────────────────────── */
.story{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3vw,48px)}
.story__body{max-width:62ch}
.story__body > *{margin:0}
.story__body > *+*{margin-top:clamp(16px,1.4vw,23px)}
.story__open{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(27px,3.1vw,50px);line-height:1.03;letter-spacing:-.012em;
  margin:0 0 clamp(24px,2.6vw,40px);
}
.story__fig{margin:0}
.story__fig figcaption{margin-top:14px;font-size:12.5px;letter-spacing:.04em;
                       color:color-mix(in srgb,currentColor 60%,transparent)}
@media (min-width:1000px){
  .story{grid-template-columns:minmax(0,var(--rail,190px)) minmax(0,1fr);
         gap:clamp(30px,4vw,80px)}
  .story__side{position:sticky;top:clamp(96px,11vh,130px);align-self:start}
}

/* ── agenda ─────────────────────────────────────────────────────────────── */
.cal{display:grid;gap:clamp(18px,2vw,30px);grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.cal{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.cal{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cal__c{
  display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;
  padding:clamp(24px,2.4vw,34px);border-radius:20px;
  border:1px solid color-mix(in srgb,currentColor 20%,transparent);
  transition:background-color .45s var(--ease),transform .45s var(--ease);
}
.cal__c:hover{background:color-mix(in srgb,currentColor 5%,transparent);transform:translateY(-3px)}
.cal__c h3{font-family:var(--f-display);font-weight:400;margin:0;
           font-size:clamp(20px,1.7vw,27px);line-height:1.1;letter-spacing:-.006em}
.cal__c p{margin:0;font-size:clamp(14.5px,1vw,16.5px);line-height:1.5;
          color:color-mix(in srgb,currentColor 72%,transparent)}
.cal__meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline}
.cal__foot{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between;
           align-items:center;gap:16px}
.cal__by{font-size:13px;line-height:1.45;color:color-mix(in srgb,currentColor 62%,transparent)}
/* O cartao provisorio tinha contorno tracejado e meia opacidade. Fora os
   dois, pelo mesmo motivo da regra mais abaixo: o tracejado lia como erro de
   desenho e a opacidade como um filtro fosco sobre a foto. */

/* aviso de estado vazio */
.note{
  border-radius:20px;padding:clamp(28px,3vw,46px);
  border:1px solid color-mix(in srgb,currentColor 20%,transparent);
  display:grid;gap:14px;justify-items:start;max-width:62ch;
}
.note h3{font-family:var(--f-display);font-weight:400;margin:0;
         font-size:clamp(21px,1.9vw,30px);line-height:1.1}
.note p{margin:0;color:color-mix(in srgb,currentColor 72%,transparent)}
.note .link{margin-top:6px}

/* ── formulário ─────────────────────────────────────────────────────────── */
.form{display:grid;gap:clamp(22px,2.4vw,32px);max-width:640px}
.field{display:grid;gap:9px}
.field > label{
  font-size:clamp(10.5px,.74vw,12px);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--almond);
}
.field input,.field select,.field textarea{
  font:inherit;font-size:clamp(15px,1.05vw,17px);color:inherit;
  background:transparent;border:0;border-bottom:1px solid color-mix(in srgb,currentColor 32%,transparent);
  padding:10px 0 12px;border-radius:0;width:100%;
  transition:border-color .4s var(--ease);
}
.field textarea{min-height:118px;resize:vertical;line-height:1.5}
.field select{
  appearance:none;cursor:pointer;padding-right:28px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-size:6px 6px,6px 6px;
  background-position:right 12px center,right 6px center;
  background-repeat:no-repeat;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-bottom-color:var(--almond);
}
.field input::placeholder,.field textarea::placeholder{
  color:color-mix(in srgb,currentColor 40%,transparent);
}
.form__group{display:grid;gap:clamp(22px,2.4vw,32px)}
.form__group[hidden]{display:none}
.form .btn{justify-self:start;margin-top:6px;border-color:var(--almond);color:var(--almond)}
.form .btn:hover{background:var(--almond)}
.form .btn:hover span{color:var(--cotton)}
.form__note{font-size:13px;color:color-mix(in srgb,currentColor 62%,transparent);margin:0;max-width:52ch}

/* Coluna estreita para secao so de texto. Pedido do Marcos: texto comprimido
   num canto le melhor que um paragrafo atravessando a tela, ainda mais em
   monitor grande, e o vazio ao lado nao incomoda quando ha padronagem. */
.prose--narrow{max-width:min(100%,46ch)}
/* o titulo sai da coluna estreita e ocupa a largura toda, para poder usar o
   mesmo corpo das outras secoes */
.pg .display--md + .prose--narrow{margin-top:clamp(20px,2vw,32px)}

/* ── medidas grandes ────────────────────────────────────────────────────── */
.meas{font-family:var(--f-display);font-weight:400;line-height:.92;
      font-size:clamp(34px,4vw,62px);letter-spacing:-.014em;display:block}
.meas small{display:block;font-family:var(--f-text);font-size:clamp(10.5px,.74vw,12px);
            font-weight:700;letter-spacing:.2em;text-transform:uppercase;
            margin-top:.7em;color:var(--taupe)}
.pg--forest .meas small{color:color-mix(in srgb,var(--linen) 90%,transparent)}

@media (prefers-reduced-motion:reduce){
  .faq__a{transition:none}
  .cal__c:hover{transform:none}
}

.ph h1.display{font-size:clamp(30px,3.7vw,60px);line-height:.99;letter-spacing:-.012em}

/* ── faixas de imagem: alturas e variantes ──────────────────────────────── */
.pband--tall{min-height:min(94vh,900px)}
/* Faixa de tela cheia com foto panoramica. A da agrofloresta e 2,7 para 1:
   numa tela larga ela preenche bem, mas 94vh sobre a largura de um telefone
   deixaria a vista numa fatia de 19% da foto. Abaixo de 900px a faixa volta
   a altura comum, onde 41% dela aparece. */
@media (max-width:899px){ .pband--wide.pband--tall{min-height:clamp(340px,54vw,660px)} }
.pband--plain::after{display:none}
.pband--plain{align-items:stretch}
.pband--split{align-items:center}
.pband--split::after{
  background:linear-gradient(to right,color-mix(in srgb,var(--forest) 80%,transparent) 0%,
             color-mix(in srgb,var(--forest) 46%,transparent) 52%,transparent 88%);
}
.pband--split .pband__txt{padding-block:clamp(56px,7vw,120px);max-width:min(100%,720px)}
.pband__txt .prose > *{color:color-mix(in srgb,var(--cotton) 84%,transparent)}
.pband__txt .prose{max-width:52ch;margin-top:clamp(18px,2vw,28px)}
.pband__txt .link{color:var(--sand);margin-top:clamp(20px,2.2vw,30px)}

/* ── carrossel ──────────────────────────────────────────────────────────── */
.carou{position:relative}
.carou__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:clamp(22px,2.4vw,34px);
}
.carou__nav{display:flex;gap:10px;flex:none}
.carou__btn{
  width:44px;height:44px;border-radius:999px;cursor:pointer;
  border:1px solid color-mix(in srgb,currentColor 30%,transparent);
  background:transparent;color:inherit;font:inherit;line-height:1;
  display:grid;place-items:center;
  transition:background-color .4s var(--ease),opacity .4s var(--ease),border-color .4s var(--ease);
}
.carou__btn:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.carou__btn[disabled]{opacity:.28;cursor:default}
.carou__btn:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.rail-x{
  --carou-gap:clamp(16px,1.8vw,26px);
  display:grid;grid-auto-flow:column;gap:var(--carou-gap);
  grid-auto-columns:min(78vw,340px);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  /* o eixo vertical precisa ser declarado: quando um eixo vira auto, o outro
     deixa de ser visible e passa a capturar a roda do mouse. A entrada .rv
     desloca cada card 30px para baixo, e como os cards fora da vista nunca
     sao revelados, essa sobra vertical era permanente e engolia a rolagem
     da pagina. */
  overflow-y:hidden;
  scroll-padding-inline:var(--gut);
  margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
  /* espaco para os 30px da entrada caberem sem corte, devolvido em margem
     para o respiro visual nao mudar */
  padding-bottom:36px;margin-bottom:-30px;
  scrollbar-width:none;cursor:grab;
}
.rail-x::-webkit-scrollbar{display:none}
.rail-x.is-drag{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.rail-x > *{scroll-snap-align:start}
.rail-x figure{margin:0}
.rail-x figcaption{
  margin-top:15px;font-size:clamp(10.5px,.74vw,12px);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);
}
.pg--forest .rail-x figcaption{color:color-mix(in srgb,var(--linen) 90%,transparent)}
.rail-x p{margin:12px 0 0;font-size:clamp(14.5px,1vw,16.5px);line-height:1.5;
          color:color-mix(in srgb,currentColor 72%,transparent)}
/* Tres janelas por vez a partir do tamanho de laptop, em vez de uma largura
   fixa que deixava a primeira e a ultima cortadas pela metade. Como a coluna
   passa a ser exatamente um terco do trilho, cada clique na seta anda uma foto
   inteira. Pedido da cliente no segundo documento de feedback. */
@media (min-width:1000px){
  .rail-x{
    grid-auto-columns:calc((100% - 2 * var(--carou-gap)) / 3);
    scroll-padding-inline:0;
  }
}
@media (prefers-reduced-motion:reduce){.rail-x{scroll-behavior:auto}}

/* Nao existe janela deitada nem quadrada. A regra 2 do projeto vale para
   toda caixa com o arco, inclusive dentro dos carrosseis: retangulo em pe,
   entre 0,77 e 0,84. As variantes --wide (1.34) e --sq (1.02) foram
   removidas; a segunda nem chegou a ser usada. */

/* ── texto de um lado, foto grande do outro ─────────────────────────────── */
.figside{display:grid;gap:clamp(30px,3.6vw,56px);align-items:center;
         grid-template-columns:minmax(0,1fr)}
.figside__fig{position:relative;overflow:hidden;border-radius:0;aspect-ratio:1.16;margin:0}
.figside__fig img{width:100%;height:100%;object-fit:cover;display:block}
.figside__txt > *{margin:0}
.figside__txt > *+*{margin-top:clamp(16px,1.5vw,24px)}
@media (min-width:960px){
  .figside{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
           gap:clamp(48px,6vw,104px)}
  .figside__fig{aspect-ratio:.94}
  .figside--r .figside__fig{order:2}
  /* Colunas iguais: usado onde varias fotos aparecem em sequencia alternando
     o lado e precisam sair todas do mesmo tamanho. */
  .figside--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .figside--bleed .figside__fig{margin-left:calc(var(--gut) * -1)}
  .railed .figside--bleed .figside__fig{
    margin-left:calc((var(--gut) + var(--rail) + clamp(16px,3vw,56px)) * -1);
  }
  .railed .figside--bleed.figside--r .figside__fig{margin-left:0}
  .figside--bleed.figside--r .figside__fig{margin:0 calc(var(--gut) * -1) 0 0}
}
/* Foto de ponta a ponta dentro de uma secao raiada. Nasceu do slide 40, onde
   a cliente pediu "foto cobrindo toda a extensao da pagina". As margens
   negativas desfazem a goteira e a coluna do rotulo lateral. */
.syn-foto{
  position:relative;overflow:hidden;aspect-ratio:1.5;
  margin:clamp(50px,5.4vw,92px) calc(var(--gut) * -1) clamp(40px,4vw,70px);
}
@media (min-width:960px){
  .syn-foto{
    aspect-ratio:2.4;
    margin-left:calc((var(--gut) + var(--rail) + clamp(16px,3vw,56px)) * -1);
  }
}
.syn-foto img{width:100%;height:100%;object-fit:cover;display:block}
/* Foto que fecha a secao: sem margem embaixo, e a secao sem o respiro final,
   para nao sobrar faixa de fundo vazia antes da secao seguinte. */
.syn-foto--fecha{margin-bottom:0}
.pg--flush{padding-bottom:0}

.figside__fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;
  font-size:clamp(10.5px,.74vw,12px);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cotton);
  background:linear-gradient(to top,rgba(45,58,40,.72),transparent);
}

/* ── agenda com foto ────────────────────────────────────────────────────── */
.cal--photo .cal__c{border:0;padding:0;border-radius:0}
.cal--photo .cal__c:hover{background:none;transform:translateY(-4px)}
.cal__media{
  position:relative;overflow:hidden;border-radius:var(--arch);
  aspect-ratio:.8;margin-bottom:clamp(14px,1.4vw,20px);
  background:color-mix(in srgb,var(--forest) 12%,transparent);
}
.cal__media img{width:100%;height:100%;object-fit:cover;display:block}
/* O cartao de evento sem data confirmada tinha meia opacidade e um contorno
   pontilhado para se anunciar como provisorio. Visto no site pronto, a
   opacidade lia como um filtro fosco sobre as fotos e o pontilhado como um
   erro de desenho. A cliente pediu os dois fora: as fotos ficam vivas e o
   arco, limpo. O estado provisorio continua dito em palavras, na etiqueta
   de cada cartao. */

/* ── história: bloco centrado, figura maior ─────────────────────────────── */
@media (min-width:1000px){
  .story{grid-template-columns:clamp(200px,20vw,320px) minmax(0,1fr);
         max-width:1120px;margin-inline:auto}
}

/* ── pedido: formulário e foto lado a lado ──────────────────────────────── */
.enqgrid{display:grid;gap:clamp(36px,4.4vw,80px);grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){
  .enqgrid{grid-template-columns:minmax(0,1fr) clamp(260px,28vw,420px);align-items:start}
  .enqgrid__aside{position:sticky;top:clamp(96px,12vh,140px)}
}
.enqgrid__aside .win-fig{width:100%}
.enqgrid__aside p{margin:18px 0 0;font-size:clamp(14px,1vw,16px);line-height:1.5;
                  color:color-mix(in srgb,currentColor 68%,transparent)}
.field input,.field select,.field textarea{padding:6px 0 11px}
.field{gap:7px}

/* ═══════════════════════════════════════════════════════════════════════════
   ABERTURAS: uma por página
   Cada página interna abre com uma cor da identidade e uma estrutura própria.
   O arco continua sendo a gramática, mas nunca do mesmo jeito duas vezes.
   ═════════════════════════════════════════════════════════════════════════ */

/* fundos */
.ph--almond{background:var(--almond);color:var(--cotton)}
.ph--sage  {background:var(--sage);color:var(--cotton)}
.ph--olive {background:var(--olive);color:var(--sand)}
.ph--sand  {background:var(--sand);color:var(--forest)}
.ph--paper {background:var(--cotton);color:var(--forest)}
.ph--linen {background:var(--linen);color:var(--forest)}

.ph--almond .eyebrow{color:color-mix(in srgb,var(--sand) 88%,transparent)}
.ph--sage   .eyebrow{color:color-mix(in srgb,var(--sand) 88%,transparent)}
.ph--olive  .eyebrow{color:color-mix(in srgb,var(--sand) 80%,transparent)}
.ph--sand   .eyebrow,.ph--paper .eyebrow{color:var(--almond)}
.ph--linen  .eyebrow{color:var(--almond)}
.ph--almond .ph__lead p,.ph--sage .ph__lead p{color:color-mix(in srgb,var(--cotton) 88%,transparent)}
.ph--olive  .ph__lead p{color:color-mix(in srgb,var(--sand) 88%,transparent)}
.ph--sand .ph__lead p,.ph--paper .ph__lead p,.ph--linen .ph__lead p{
  color:color-mix(in srgb,var(--forest) 78%,transparent)}

/* A padronagem tambem como fundo de secao comum, nao so de cabecalho. O
   feedback pediu mais dela, no slide 12: "fundo com padronagem, em qualquer
   cor... traz mais dinamismo para paginas longas". */
.pg--pattern{position:relative;isolation:isolate}
.pg--pattern::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("../assets/brand/pattern-ink.webp") center/cover no-repeat;
  mix-blend-mode:multiply;opacity:.05;
}

/* O Enquire chegou a ter um azul de ceu tirado da foto do topo. A cliente
   reviu: o azul nao esta na paleta, e o verde combina com a foto do mesmo
   jeito e ja aparece em outras paginas. Voltou para o Sage. */

/* padronagem: linhas claras sobre fundo escuro, linhas escuras sobre claro */
.ph--almond .ph__wall,.ph--sage .ph__wall,.ph--olive .ph__wall{
  background-image:url("../assets/brand/pattern-green.webp");
  mix-blend-mode:screen;
}
.ph--almond .ph__wall{opacity:.055}
.ph--sage   .ph__wall{opacity:.06}
.ph--olive  .ph__wall{opacity:.07}
.ph--sand .ph__wall,.ph--paper .ph__wall,.ph--linen .ph__wall{
  background-image:url("../assets/brand/pattern-ink.webp");
  mix-blend-mode:multiply;
}
.ph--sand .ph__wall{opacity:.05}
.ph--paper .ph__wall{opacity:.045}
.ph--linen .ph__wall{opacity:.038}

/* botões e links sobre cada fundo */
.ph--almond .ph__cta .btn,.ph--sage .ph__cta .btn{border-color:var(--sand);color:var(--sand)}
.ph--almond .ph__cta .btn:hover span,.ph--sage .ph__cta .btn:hover span{color:var(--forest)}
.ph--olive .ph__cta .btn{border-color:var(--sand);color:var(--sand)}
.ph--olive .ph__cta .btn:hover span{color:var(--olive)}
.ph--sand .ph__cta .btn,.ph--paper .ph__cta .btn,.ph--linen .ph__cta .btn{
  border-color:var(--almond);color:var(--almond)}
.ph--sand .ph__cta .btn:hover span,.ph--paper .ph__cta .btn:hover span,
.ph--linen .ph__cta .btn:hover span{color:var(--cotton)}

/* menu sobre abertura clara */
.light-hero .nav:not(.is-solid){color:var(--forest)}
.light-hero .nav:not(.is-solid) .brand .l-cream{opacity:0}
.light-hero .nav:not(.is-solid) .brand .l-forest{opacity:1}

/* ── 1. fachada: quatro janelas encostadas na dobra ─────────────────────── */
.ph--facade{padding-bottom:0}
.ph--facade{--secpad:clamp(56px,6.2vw,104px)}
.ph--facade h1.display{font-size:clamp(28px,3.3vw,54px);max-width:19ch}
.ph--facade .ph__grid{grid-template-columns:minmax(0,1fr);align-items:start}
.facade{
  display:grid;gap:clamp(10px,1.4vw,22px);
  grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;
  margin-top:clamp(38px,4.4vw,72px);
}
@media (min-width:820px){.facade{grid-template-columns:repeat(4,minmax(0,1fr))}}
.facade > figure{margin:0;aspect-ratio:auto;height:clamp(230px,31vw,440px)}
.facade > figure:nth-child(2){height:clamp(200px,27.5vw,390px)}
.facade > figure:nth-child(3){height:clamp(222px,30vw,428px)}
.facade > figure:nth-child(4){height:clamp(208px,28.4vw,402px)}

/* ── 2. foto de tela cheia, texto por cima ──────────────────────────────── */
.ph--full{
  --secpad:0px;position:relative;overflow:hidden;
  min-height:min(94vh,880px);display:grid;align-items:end;
  padding-block:0;background:var(--forest);color:var(--cotton);
}
.ph--full .ph__bg{position:absolute;inset:-9% 0;will-change:transform}
.ph--full .ph__bg img{width:100%;height:100%;object-fit:cover;display:block}
.ph--full::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,color-mix(in srgb,var(--forest) 88%,transparent) 0%,
             color-mix(in srgb,var(--forest) 46%,transparent) 40%,
             color-mix(in srgb,var(--forest) 8%,transparent) 72%);
}
.ph--full > .wrap{position:relative;z-index:2;padding-block:clamp(52px,6.6vw,110px)}
.ph--full .ph__lead{max-width:min(100%,720px)}
.ph--full .eyebrow{color:color-mix(in srgb,var(--sand) 88%,transparent)}
.ph--full .ph__lead p{color:color-mix(in srgb,var(--cotton) 88%,transparent)}
.ph--full .ph__cta .btn{border-color:var(--sand);color:var(--sand)}
.ph--full .ph__cta .btn:hover span{color:var(--forest)}

/* ── 3. faixa horizontal rasa, cortada pela dobra ───────────────────────── */
.ph--band{padding-bottom:0}
.ph--band .ph__grid{grid-template-columns:minmax(0,1fr)}
.phband{
  position:relative;overflow:hidden;border-radius:26px 26px 0 0;
  height:clamp(190px,28vw,380px);
  margin:clamp(44px,5.4vw,88px) calc(var(--gut) * -1) 0;
}
.phband img{width:100%;height:100%;object-fit:cover;display:block}
.phband .mv{inset:-14% 0}

/* ── 4. o par de retratos ───────────────────────────────────────────────── */
.ph--pair .ph__grid{align-items:center}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
      gap:clamp(12px,1.6vw,24px);align-items:start}
.pair figure{margin:0;position:relative;overflow:hidden;aspect-ratio:.8}
/* as duas sao janela: a regra 1 vale para o par inteiro, nao so para a
   primeira. A segunda usava um raio comum de 22px. */
.pair__a,
.pair__b{border-radius:var(--arch)}
.pair > *:nth-child(2){margin-top:clamp(34px,5vw,88px)}
.pair img{width:100%;height:100%;object-fit:cover;display:block}
.pair__cap{
  margin:14px 0 0;font-size:clamp(10px,.7vw,11.5px);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--sand) 82%,transparent);
}
@media (min-width:900px){
  .ph--pair .ph__grid{grid-template-columns:minmax(0,1fr) clamp(340px,40vw,620px)}
}

/* ── 5. estratos: do mar à serra, em três faixas ────────────────────────── */
.strata{display:grid;gap:8px}
.strata figure{position:relative;overflow:hidden;margin:0;
               height:clamp(96px,13vw,178px);border-radius:16px}
.strata figure:first-child{border-radius:26px 26px 16px 16px}
.strata figure:last-child{border-radius:16px 16px 26px 26px}
.strata img{width:100%;height:100%;object-fit:cover;display:block}
.strata .mv{inset:0 -12%}
.strata figcaption{
  position:absolute;left:18px;bottom:13px;
  font-size:clamp(10px,.7vw,11.5px);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cotton);text-shadow:0 1px 10px rgba(45,58,40,.7);
}
@media (min-width:900px){
  .ph--strata .ph__grid{grid-template-columns:minmax(0,1fr) clamp(300px,36vw,560px)}
}

/* ── 6. parede de tipos, atrás do título ────────────────────────────────── */
.ph--typewall{position:relative;overflow:hidden}
.typewall{
  position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;gap:.1em;pointer-events:none;
  font-family:var(--f-display);font-weight:400;line-height:1.02;
  font-size:clamp(30px,5.4vw,86px);letter-spacing:-.01em;white-space:nowrap;
  color:color-mix(in srgb,var(--sand) 15%,transparent);
}
.typewall span{display:block}
.ph--typewall .ph__grid{grid-template-columns:minmax(0,1fr)}
.ph--typewall .ph__lead{max-width:min(100%,19ch)}
.typewall span:nth-child(even){padding-left:14vw}
.typewall span:nth-child(3n){padding-left:6vw}
.ph--typewall .ph__grid{position:relative;z-index:2}

/* ── 7. só tipografia ───────────────────────────────────────────────────── */
.ph--letter .ph__grid{grid-template-columns:minmax(0,1fr)}
.ph--letter .ph__lead{max-width:none}
.ph--letter h1.display{font-size:clamp(38px,5.6vw,92px);line-height:.95;max-width:11ch}
.ph--letter .ph__note{
  margin-top:clamp(30px,3.4vw,54px);max-width:46ch;
  font-size:clamp(16px,1.2vw,20px);line-height:1.5;font-style:italic;
  color:color-mix(in srgb,var(--forest) 76%,transparent);
}
/* A linha acima pinta o paragrafo de Verde Floresta, o que so funciona sobre
   fundo claro. Quando o cabecalho e escuro, ele precisa do contrario, senao
   some. Apareceu ao trocar a cor do Enquire no slide 56 e a do What's On no
   slide 51. */
.ph--almond .ph__note,.ph--sage .ph__note,.ph--olive .ph__note,.ph--forest .ph__note{
  color:color-mix(in srgb,var(--cotton) 84%,transparent);
}

/* Cabecalho que ocupa a tela. Pedido no slide 51 para o What's On. */
.ph--tall{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
}
@media (min-width:900px){
  .ph--letter .ph__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
                        align-items:end;gap:clamp(40px,5vw,96px)}
  .ph--letter .ph__note{margin-top:0;padding-bottom:.5em}
}

/* ── abertura em estratos, de ponta a ponta ─────────────────────────────── */
.ph--layers{position:relative;padding:0;background:var(--cotton);color:var(--forest);overflow:hidden}
/* véu no topo, para o menu não sumir sobre a foto */
.ph--layers::before,.ph--mosaic::before{
  content:"";position:absolute;inset:0 0 auto;z-index:3;pointer-events:none;
  height:clamp(96px,15vh,180px);
  background:linear-gradient(to bottom,rgba(45,58,40,.52),rgba(45,58,40,0));
}
.layer{position:relative;overflow:hidden;margin:0;height:clamp(132px,19vw,252px)}
.layer:first-child{height:clamp(196px,26vw,356px)}
.layer img{width:100%;height:100%;object-fit:cover;display:block}
.layer .mv{inset:-16% 0}
.layer figcaption{
  position:absolute;left:var(--gut);bottom:16px;
  font-size:clamp(10px,.7vw,11.5px);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cotton);text-shadow:0 1px 12px rgba(45,58,40,.75);
}
.ph--layers .ph__type{
  padding:clamp(38px,4.2vw,70px) 0 clamp(40px,4.4vw,74px);
  position:relative;
}
.ph--layers .ph__lead{max-width:min(100%,62ch)}
.ph--layers h1.display{font-size:clamp(32px,4.4vw,72px)}
.ph--layers .ph__top{
  position:relative;padding-top:calc(clamp(52px,6vw,86px) + clamp(34px,4vw,56px));
  padding-bottom:clamp(30px,3.4vw,54px);
}

/* ── abertura em mosaico, com o bloco de texto por cima ─────────────────── */
.ph--mosaic{padding:0;position:relative;overflow:hidden;background:var(--sand)}
.mosaic{
  display:grid;grid-template-columns:repeat(2,1fr);
  grid-auto-rows:clamp(150px,20vw,260px);gap:5px;
}
@media (min-width:760px){.mosaic{grid-template-columns:repeat(4,1fr)}}
.mosaic figure{position:relative;overflow:hidden;margin:0}
.mosaic img{width:100%;height:100%;object-fit:cover;display:block}
.mosaic figure:nth-child(1){grid-row:span 2}
@media (min-width:760px){
  .mosaic{grid-template-columns:repeat(6,1fr)}
  .mosaic figure:nth-child(1){grid-column:span 3;grid-row:span 2}
  .mosaic figure:nth-child(2){grid-column:span 2}
  .mosaic figure:nth-child(4){grid-column:span 2}
  .mosaic figure:nth-child(6){grid-column:span 6;min-height:clamp(200px,25vw,340px)}
}
.ph--mosaic .ph__card{
  position:relative;z-index:2;background:var(--sand);color:var(--forest);
  border-radius:26px 26px 0 0;max-width:min(100%,660px);
  padding:clamp(30px,3.6vw,58px) clamp(26px,3.4vw,54px) clamp(34px,3.8vw,62px);
  margin:clamp(-190px,-14vw,-120px) 0 0 var(--gut);
}
.ph--mosaic .ph__card .eyebrow{color:var(--almond)}
.ph--mosaic .ph__card h1.display{font-size:clamp(32px,4.2vw,66px);margin:.2em 0 0}
.ph--mosaic .ph__card p{color:color-mix(in srgb,var(--forest) 78%,transparent);margin-top:1em}
@media (min-width:1100px){
  .ph--mosaic .ph__card{margin-left:calc(var(--gut) + var(--rail) * .3)}
}

/* ── ampliar a foto ─────────────────────────────────────────────────────── */
.rail-x img,.strip img,.trip img,.mosaic img,.layer img,.cal__media img,.facade img{cursor:zoom-in}
.lb{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:clamp(16px,4vw,54px);
  background:rgba(38,49,34,.965);
  opacity:0;visibility:hidden;
  transition:opacity .42s var(--ease),visibility .42s var(--ease);
}
.lb.is-open{opacity:1;visibility:visible}
.lb__fig{margin:0;display:grid;justify-items:center;gap:18px;max-width:100%}
.lb__fig img{
  max-width:min(1180px,100%);max-height:min(80vh,920px);
  object-fit:contain;border-radius:16px;display:block;
  transform:scale(.965);transition:transform .5s var(--ease);
}
.lb.is-open .lb__fig img{transform:none}
.lb__cap{
  margin:0;font-size:clamp(10.5px,.74vw,12px);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:color-mix(in srgb,var(--linen) 92%,transparent);
  text-align:center;max-width:60ch;
}
.lb__btn{
  position:absolute;width:48px;height:48px;border-radius:999px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--sand) 40%,transparent);
  background:color-mix(in srgb,var(--forest) 55%,transparent);color:var(--sand);
  font:inherit;font-size:17px;line-height:1;display:grid;place-items:center;
  transition:background-color .35s var(--ease),opacity .35s var(--ease);
}
.lb__btn:hover{background:color-mix(in srgb,var(--sand) 22%,transparent)}
.lb__btn:focus-visible{outline:2px solid var(--sand);outline-offset:3px}
.lb__btn[disabled]{opacity:.25;cursor:default}
.lb__x{top:clamp(14px,2.4vw,28px);right:clamp(14px,2.4vw,28px)}
.lb__p{left:clamp(10px,2vw,30px);top:50%;transform:translateY(-50%)}
.lb__n{right:clamp(10px,2vw,30px);top:50%;transform:translateY(-50%)}
@media (max-width:640px){
  .lb__p{left:14px;top:auto;bottom:18px;transform:none}
  .lb__n{right:14px;top:auto;bottom:18px;transform:none}
}
html.lb-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .lb,.lb__fig img{transition:none}
}

/* a mesma abertura da home, com foto no lugar do vídeo */
.hero__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(var(--vs,1.06));
}
.hero--still{height:190vh}
@media (max-width:900px){.hero--still{height:100vh}}
.hero__side .btn{border-color:var(--sand);color:var(--sand)}
.hero__side .btn:hover{background:var(--sand)}
.hero__side .btn:hover span{color:var(--forest)}

/* ── inscrição no Field Notes ────────────────────────────────────────────
   Herda o vocabulário dos campos do Enquire: fundo transparente, só a linha
   de baixo, e o foco firma essa linha. Assim o campo nasce parecendo parte
   do site e não um formulário colado por cima. */
.nl{display:grid;gap:14px;width:min(480px,100%)}
.nl__row{display:flex;align-items:flex-end;gap:clamp(14px,1.6vw,24px);flex-wrap:wrap}
.nl__in{
  font:inherit;font-size:clamp(15px,1.05vw,17px);color:inherit;
  background:transparent;border:0;border-radius:0;
  border-bottom:1px solid color-mix(in srgb,currentColor 32%,transparent);
  padding:10px 0 12px;flex:1 1 150px;min-width:0;
  transition:border-color .4s var(--ease);
}
.nl__in::placeholder{color:color-mix(in srgb,currentColor 42%,transparent)}
.nl__in:focus{outline:none;border-bottom-color:currentColor}
.nl__note,.nl__msg{
  margin:0;font-size:clamp(12px,.82vw,13.5px);line-height:1.55;max-width:48ch;
}
/* Linha do aceite: caixinha e rotulo alinhados pelo topo, para o rotulo poder
   correr em varias linhas sem descolar da caixa. */
.nl__agree{
  display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;
  font-size:clamp(11.5px,.8vw,13px);line-height:1.5;
}
.nl__agree input{
  flex:none;margin:.18em 0 0;width:15px;height:15px;accent-color:currentColor;cursor:pointer;
}
.nl__agree label{cursor:pointer}

.nl__note{color:color-mix(in srgb,currentColor 60%,transparent)}
.nl__note a{color:inherit}
.nl__msg{font-weight:700;letter-spacing:.02em}
.nl__msg--erro{color:var(--almond)}
.nl--sand .nl__msg--erro{color:var(--sand)}
/* rótulo lido por leitor de tela, invisível na tela */
.nl__lab{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
/* isca: invisível para gente, preenchida por robô */
.nl__trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.nl--sand .btn{border-color:var(--sand);color:var(--sand)}
.nl button[disabled]{opacity:.5;cursor:progress}

/* ── aviso de cookies ────────────────────────────────────────────────────
   Camada 70: acima do menu (60) e abaixo da foto ampliada (200), para que a
   foto aberta continue cobrindo tudo. */
/* A barra vem no HTML, escondida, e um script curto no proprio documento a
   revela quando ainda nao ha resposta guardada. Antes ela so aparecia depois
   que o React assumia a pagina, e como e o maior bloco de texto da tela o
   Lighthouse a media como o "maior elemento": a nota de desempenho passava a
   depender de quanto tempo o JavaScript levava para carregar, o que dava 8 a
   9 segundos num celular lento. Vindo pronta no HTML, ela pinta junto com o
   resto. */
.ck{display:none}
body.ck-perguntar .ck{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--forest);color:var(--sand);
  border-top:1px solid color-mix(in srgb,var(--sand) 18%,transparent);
  padding:clamp(14px,1.5vw,20px) var(--gut);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(14px,2vw,36px);flex-wrap:wrap;
}
.ck__txt{
  margin:0;font-size:clamp(12.5px,.85vw,14px);line-height:1.55;max-width:74ch;
  color:color-mix(in srgb,var(--sand) 86%,transparent);
}
.ck__txt a{color:var(--sand)}
.ck__acts{display:flex;gap:10px;flex-wrap:wrap;flex:none}
.ck .btn{padding:.78em 1.5em .72em;border-color:var(--sand);color:var(--sand)}
.ck .btn--quiet{
  border-color:color-mix(in srgb,var(--linen) 45%,transparent);
  color:color-mix(in srgb,var(--linen) 88%,transparent);
}
@media(max-width:719px){
  .ck{padding-bottom:calc(clamp(14px,1.5vw,20px) + env(safe-area-inset-bottom))}
  .ck__acts{width:100%}
  .ck .btn{flex:1 1 auto;text-align:center}
}

/* mensagem de retorno do formulário de contato */
.form__done{
  margin:0;font-size:clamp(15px,1.05vw,17px);line-height:1.6;max-width:46ch;
}
/* A confirmacao entra sozinha, por animacao de CSS, e nao pelo observador
   do site.js, que so enxerga o que ja estava na pagina quando ela carregou.
   O bloco de prefers-reduced-motion la em cima zera esta duracao. */
.form--done{animation:sobe .7s var(--ease) both}
@keyframes sobe{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.form__note--erro{color:var(--almond);font-weight:700}

/* ── texto legal ────────────────────────────────────────────────────────── */
/* A politica de privacidade. Nenhuma foto: quem abre esta pagina veio
   procurar uma resposta, e o que importa e achar a secao depressa. Os
   titulos sao menores que os do resto do site de proposito, para a lista
   inteira caber na tela e dar para varrer. */
.legal{max-width:68ch}
.legal__bloco + .legal__bloco{margin-top:clamp(34px,3.6vw,56px)}
.legal h2{
  font-family:var(--f-display);font-weight:400;margin:0 0 .6em;
  font-size:clamp(20px,1.7vw,27px);line-height:1.12;letter-spacing:-.006em;
}
.legal p{margin:0 0 .85em}
.legal p:last-child{margin-bottom:0}
.legal__data{
  margin-top:clamp(40px,4vw,64px);padding-top:clamp(18px,2vw,28px);
  border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);
  font-size:13px;letter-spacing:.04em;color:color-mix(in srgb,currentColor 62%,transparent);
}