/* ============================================================
   CASA FORESTI — sistema visual v3
   Origem: frames do Figma (WEBSITE / Slide 16:9 - 1, 2, 3), 1920px.
   Todo valor abaixo foi medido no arquivo, não estimado.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root{
  /* -- primitivos ------------------------------------------- */
  --navy:        #0E2A7B;   /* identidade oficial              */
  --navy-deep:   #091B52;   /* derivado: cabeçalho e rodapé    */
  --cream:       #F5EFE9;   /* identidade oficial              */
  --amber:       #FFE1C2;   /* NOVO no Figma — 2ª linha títulos*/
  --butter:      #FBF1D7;   /* NOVO no Figma — fundo claro     */
  --terra:       #B0653C;   /* identidade oficial              */
  --terra-deep:  #96522F;   /* preenchimento de botão (5,19)   */
  --terra-dark:  #8A4B2B;   /* derivado: hover do botão        */
  --ink:         #2F2F2E;   /* NOVO no Figma — corpo no claro  */

  /* -- semânticos ------------------------------------------- */
  --surface:        var(--butter);
  --surface-invert: var(--navy);
  --text:           var(--ink);
  --text-strong:    var(--navy);
  --text-invert:    var(--cream);
  --accent-invert:  var(--amber);
  /* O botão usa a tinta, não o terracota puro: com o texto em 15px
     no celular ele perde a isenção de "texto grande" e cai pra 3,86.
     #96522F dá 5,19 e passa em qualquer tamanho. */
  --action:         var(--terra-deep);
  --action-hover:   var(--terra-dark);
  --action-text:    var(--cream);
  /* tom apagado do texto secundário: a 66% dava 4,32 sobre o creme e
     reprovava em 13px. 80% fecha em 5,2 e continua lendo como apagado. */
  --text-mute:      rgb(47 47 46 / .8);
  --text-mute-inv:  rgb(245 239 233 / .78);
  --rule:           rgb(14 42 123 / .16);
  --rule-invert:    rgb(245 239 233 / .24);

  /* -- tipografia ------------------------------------------- */
  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* escalas: o vw é o valor do Figma ÷ 1920. Em 1920 bate exato. */
  /* Display e H2 seguem o Figma — são o destaque e estão aprovados.
     O texto DESCRITIVO desceu: 48px de lead virava parágrafo-cartaz e
     estourava a medida de leitura. Lead e corpo agora são de leitura,
     e a hierarquia kicker → lead → h2 → display voltou a existir. */
  --fs-display: clamp(2.5rem,    4.568vw, 6rem);      /* 87,7 — Figma  */
  --fs-h2:      clamp(2.125rem,  3.959vw, 5.25rem);   /* 76,0 — Figma  */
  --fs-h3:      clamp(1.35rem,   1.90vw,  2.35rem);   /* 36,5 derivado */
  --fs-lead:    clamp(1.0625rem, 1.55vw,  1.85rem);   /* 29,8 (era 48) */
  --fs-body:    clamp(1rem,      1.15vw,  1.35rem);   /* 22,1 (era 26) */
  --fs-kicker:  clamp(.6875rem,  1.05vw,  1.35rem);   /* 20,2 (era 26) */
  --fs-nav:     clamp(.8125rem,  1.00vw,  1.30rem);   /* 19,2 (era 21) */

  --track-display: -.03em;   /* -2,63px em 87,7 */
  --track-body:    -.02em;   /* -0,96px em 48   */
  --track-kicker:   .1em;    /* +2,6px  em 26   */
  --lh-display:    1.04;
  --lh-body:       1.52;

  /* -- espaço ------------------------------------------------ */
  /* RODADA 19: o piso da clamp era o valor do celular, e era curto —
     em 390px a seção respirava 56px em cima e embaixo, contra 145 no
     desktop. O teto (o valor do Figma) não mudou; só o piso subiu. */
  --space-section: clamp(5rem,   7.56vw, 9.5rem);  /* 145 · piso 80 */
  --space-block:   clamp(2.75rem,4.20vw, 5.5rem);  /* piso 44 */
  --space-gap:     clamp(1.25rem,2.25vw, 3.25rem); /* 43,3 entre vinhetas */
  /* RODADA 20: o vão entre o kicker e o que vem depois estava escrito
     em cinco lugares diferentes (.28em, .5em, um clamp inline, um
     --space-block inline e nada) — dava 0, 9.5, 11.2, 16, 17 e 44px na
     mesma página. Agora é um token só, para todos. */
  --space-kick:  clamp(.6rem,  1.11vw, 1rem);      /* 16 no desktop, 9,6 no celular */

  --vinheta-gap:  clamp(.75rem, 4vw,   1.15rem);   /* só o vão entre dois cartões de gravura */

  --space-tight:   clamp(.75rem, 1.20vw, 1.5rem);

  /* -- forma ------------------------------------------------- */
  --r-pill:  999px;
  --r-card:  clamp(1.25rem, 2.604vw, 3.5rem);  /* 50 */
  --r-photo: clamp(.875rem, 1.667vw, 2.25rem); /* 32 */

  /* -- grade — UMA só, alinhada pela margem do cabeçalho ----- */
  --container: 1648px;                          /* 1920 − 2×136,19 */
  --gutter:    clamp(1.25rem, 7.09vw, 8.5rem);

  /* -- motion ------------------------------------------------ */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .7s;
}

/* ------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box }
/* RODADA 20 — o `display:none` de [hidden] vem da folha do NAVEGADOR e
   perde para qualquer `display` de autor. `.btn{display:inline-flex}` é
   de autor, então o botão "Ver as outras N avaliações" continuava na
   tela no desktop mesmo com `botao.hidden = true` no JS. Vale para
   qualquer elemento que a gente esconda por atributo daqui pra frente. */
[hidden]{ display:none !important }
html{ -webkit-text-size-adjust:100% }
body,h1,h2,h3,p,figure,blockquote{ margin:0 }
img,picture,svg,video{ display:block; max-width:100%; height:auto }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer }
a{ color:inherit; text-decoration:none }
ul{ margin:0; padding:0; list-style:none }

body{
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:var(--track-body);
  color:var(--text);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

:focus-visible{ outline:2px solid var(--terra); outline-offset:3px; border-radius:2px }
::selection{ background:var(--amber); color:var(--navy) }

/* ------------------------------------------------------------
   3. GRADE
   ------------------------------------------------------------ */
.wrap{
  width:100%;
  max-width:calc(var(--container) + 2 * var(--gutter));
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:var(--space-section) }
.section--navy{ background:var(--surface-invert); color:var(--text-invert) }
.section--butter{ background:var(--surface); color:var(--text) }

/* ------------------------------------------------------------
   4. TIPOGRAFIA
   ------------------------------------------------------------ */
.kick{
  font-family:var(--serif);
  font-weight:300;
  font-size:var(--fs-kicker);
  letter-spacing:var(--track-kicker);
  line-height:1.04;
  text-transform:uppercase;
}
.section--butter .kick{ font-weight:400; color:var(--text-strong) }

.display,.h2{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:var(--track-display);
  line-height:var(--lh-display);
  text-wrap:balance;
}
.display{ font-size:var(--fs-display) }
.h2{ font-size:var(--fs-h2) }
.h3{
  font-family:var(--serif); font-weight:500;
  font-size:var(--fs-h3); line-height:1.12;
  letter-spacing:var(--track-display);
}

/* 2ª linha em âmbar: é um recurso de FUNDO ESCURO.
   No claro o título fica monocromático em marinho (frame 3). */
.section--navy .display em,
.section--navy .h2 em,
.hero em{ font-style:normal; color:var(--accent-invert) }
.section--butter .h2{ color:var(--text-strong) }
.section--butter .h2 em{ font-style:normal; color:inherit }

.lead{
  font-size:var(--fs-lead);
  font-weight:500;
  line-height:var(--lh-body);
  letter-spacing:var(--track-body);
  text-wrap:pretty;
}
.body{ max-width:62ch; text-wrap:pretty }

/* ------------------------------------------------------------
   5. BOTÕES
   ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(.9375rem,1.341vw,1.625rem);   /* 25,76 @1920 */
  letter-spacing:0;
  padding:clamp(.7rem,1.453vw,1.75rem) clamp(1.4rem,4.164vw,5rem);
  border-radius:var(--r-pill);
  transition:transform .25s var(--ease), background-color .25s var(--ease),
             color .25s var(--ease), box-shadow .25s var(--ease);
  will-change:transform;
}
.btn--primary{ background:var(--action); color:var(--action-text) }
.btn--primary:hover{ background:var(--action-hover); transform:translateY(-2px);
  box-shadow:0 10px 28px rgb(9 27 82 / .28) }
.btn--ghost{ background:var(--cream); color:var(--navy) }
.btn--ghost:hover{ background:#fff; transform:translateY(-2px);
  box-shadow:0 10px 28px rgb(9 27 82 / .28) }
/* Botão de segunda ordem: contorno marinho, sem preenchimento. Existe
   para os destinos que NÃO são a reserva direta (Airbnb, Booking) —
   em terracota eles competiam de igual pra igual com o CTA que não
   paga comissão, numa seção cujo título promete "sem taxa". O contorno
   usa box-shadow inset, não border: `.plat a{border:0}` mataria a borda
   e o padding do botão já está calibrado sem ela. */
.btn--linha{ background:transparent; color:var(--navy);
  box-shadow:inset 0 0 0 1.5px var(--navy) }
.btn--linha:hover{ background:var(--navy); color:var(--cream);
  transform:translateY(-2px); box-shadow:inset 0 0 0 1.5px var(--navy),
  0 10px 28px rgb(9 27 82 / .22) }
.section--navy .btn--linha{ color:var(--cream);
  box-shadow:inset 0 0 0 1.5px var(--rule-invert) }
.section--navy .btn--linha:hover{ background:var(--cream); color:var(--navy);
  box-shadow:inset 0 0 0 1.5px var(--cream) }
.btn:active{ transform:translateY(0) }

/* ------------------------------------------------------------
   6. CABEÇALHO
   ------------------------------------------------------------ */
.site-head{
  position:absolute; inset-inline:0; top:0; z-index:20;
  padding-block:clamp(1.1rem,4.045vw,4.85rem);
}
.site-head__in{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-gap) }
.site-head__logo{ width:clamp(150px,17.32vw,333px) }
.site-nav{ display:flex; gap:clamp(1rem,3.53vw,4.25rem) }
/* Desktop: hero com os dois botões e cabeçalho sem CTA, como no Figma.
   Celular: hero só com "Conheça" — lá o "Reserve" já aparece duas vezes
   (cabeçalho e barra fixa). Regra no bloco de ≤760px. */
.site-head__cta{
  display:none; font-size:clamp(.82rem,.95vw,1.05rem);
  padding:.62rem clamp(1.1rem,1.6vw,1.7rem);
  background:var(--action); color:var(--action-text);
  font-family:var(--serif); font-weight:600; border-radius:var(--r-pill);
}
.site-head__cta:hover{ background:var(--action-hover) }
.site-nav a{
  font-family:var(--serif); font-weight:500;
  font-size:var(--fs-nav); letter-spacing:var(--track-kicker);
  text-transform:uppercase; color:#fff; position:relative; padding-block:.25em;
}
.site-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--amber); transition:right .35s var(--ease);
}
.site-nav a:hover::after{ right:0 }

/* ------------------------------------------------------------
   7. HERO — wordmark atrás, gravura por cima
   Geometria traduzida do frame 1920×1386.
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   7. HERO — wordmark atrás, gravura por cima

   A v1 travava tudo na LARGURA (altura 72,2vw, gravura 106,67%).
   Isso quebrava nos dois extremos: tela alta e estreita sobrava um
   vão morto de marinho, tela baixa e larga a gravura subia por cima
   do H1. Agora o hero é uma grade de duas faixas — conteúdo e arte —
   e a faixa de arte tem teto TAMBÉM em altura de viewport. Assim a
   arte nunca invade o texto e o texto nunca fica solto no vazio.
   ------------------------------------------------------------ */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--surface-invert); color:var(--text-invert);
  /* nunca passa da tela por capricho, mas cresce se o texto exigir */
  min-height:min(100svh, calc(var(--art-h) + 26rem));
  display:grid; grid-template-rows:1fr auto;
  /* A gravura aparece INTEIRA: a faixa tem exatamente a altura que a
     arte ocupa na largura da tela (proporção 1600×606 = 2,64). Como a
     faixa nunca é menor que a arte, não há o que recortar. */
  --art-ratio:2.64;
  --art-h:calc(100vw / var(--art-ratio));
}
.hero__content{
  position:relative; z-index:3; text-align:center;
  align-self:center;
  padding-top:clamp(5.5rem,10vw,12rem);      /* folga do cabeçalho */
  padding-bottom:clamp(1rem,2vw,2.5rem);
}
.hero .kick{ color:var(--text-invert) }
.hero .display{ margin-top:var(--space-kick); max-width:none }
.hero__cta{
  display:flex; flex-wrap:wrap; gap:clamp(.6rem,1.5vw,1.6rem);
  justify-content:center;
  margin-top:clamp(1.4rem,2.5vw,2.8rem);
}

/* faixa de arte: altura própria, recorta o excedente por cima */
.hero__art{
  position:relative; height:var(--art-h); min-height:150px; overflow:hidden;
}
/* a gravura ancora no rodapé e cresce o bastante pra sempre cobrir a
   faixa; quando a faixa é limitada pela altura, o céu é que é cortado */
.hero__engraving{
  position:absolute; bottom:0; left:50%;
  /* o deslocamento do parallax entra por variável, não sobrescrevendo
     o transform — senão o JS mata a centralização e a arte desloca */
  transform:translateX(-50%) translateY(var(--par-y, 0px));
  width:100%; max-width:none; z-index:2; pointer-events:none;
}
.hero__engraving img{ display:block; width:100%; height:auto }

/* wordmark: escala junto com a faixa, não com a tela — é o que mantém
   a relação de profundidade entre ele e a gravura em qualquer formato */
.hero__wordmark{
  position:absolute; left:50%; z-index:1;
  transform:translateX(-50%) translateY(var(--par-y, 0px));
  bottom:calc(var(--art-h) * .509);
  width:93.75%; max-width:none; pointer-events:none;
}

/* ------------------------------------------------------------
   8. VINHETAS (cartão creme com gravura) — frame 2
   ------------------------------------------------------------ */
.vignettes{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--space-gap); margin-top:var(--space-block);
}
.vignette{
  background:var(--cream); border-radius:var(--r-card);
  aspect-ratio:1; overflow:hidden;
}
.vignette img{ width:100%; height:100%; object-fit:cover }

/* ------------------------------------------------------------
   9. FOTO
   ------------------------------------------------------------ */
.photo{ border-radius:var(--r-photo); overflow:hidden; background:var(--navy-deep) }
.photo img{ width:100%; height:100%; object-fit:cover }

/* ------------------------------------------------------------
   10. DUPLA texto + foto — frame 2, parte de baixo
   ------------------------------------------------------------ */
.duo{
  display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:clamp(1.5rem,4.7vw,5.6rem); align-items:end;
  margin-top:var(--space-section);
}
.duo__text{ align-self:start }
.duo__text .lead{ margin-top:clamp(1rem,2.3vw,3rem) }
.duo .photo{ aspect-ratio:964/870 }

/* ------------------------------------------------------------
   11. DESTAQUES alternados — frame 3
   ------------------------------------------------------------ */
.feature{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.5rem,5.9vw,7rem); align-items:center;
}
.feature + .feature{ margin-top:clamp(2.5rem,6.7vw,8.4rem) }
.feature__media{ aspect-ratio:822/410; border-radius:var(--r-card) }
.feature__body .lead{ margin-top:clamp(.75rem,1.7vw,2.1rem); max-width:22ch }
.feature--flip .feature__media{ order:2 }

/* ------------------------------------------------------------
   12. MOTION
   ------------------------------------------------------------ */
.reveal{ opacity:0; transform:translateY(26px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease) }
.reveal.is-in{ opacity:1; transform:none }
.reveal[data-delay="1"]{ transition-delay:.09s }
.reveal[data-delay="2"]{ transition-delay:.18s }
.reveal[data-delay="3"]{ transition-delay:.27s }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none }
}

/* ------------------------------------------------------------
   13. RESPONSIVO
   O Figma só tem desktop (1920). O mobile abaixo é derivação.
   ------------------------------------------------------------ */
@media (max-width:1100px){
  .duo{ grid-template-columns:1fr; align-items:start }
  .duo .photo{ aspect-ratio:4/3 }
  .feature{ grid-template-columns:1fr; gap:var(--space-block) }
  .feature--flip .feature__media{ order:0 }
  .feature__body .lead{ max-width:38ch }
}

@media (max-width:760px){
  :root{ --gutter:clamp(1.25rem,6vw,2.5rem) }

  /* A nav some no celular — mas sumir sem substituir foi exatamente o
     erro que deixou o tio Sérgio sem achar onde reservar. Entra um
     Reserve compacto e sempre visível no lugar dela. */
  .site-nav{ display:none }
  .site-head{ padding-block:1.25rem }
  .site-head__logo{ width:170px }
  .site-head__cta{ display:inline-flex }

  /* No celular a gravura precisa de escala pra continuar legível: a
     faixa cresce em proporção de tela, não de largura. O wordmark e a
     gravura seguem amarrados na mesma variável, então a composição
     não precisa de números soltos por breakpoint. */
  /* OPÇÃO A — escolhida pelo Henrique [20/ago].
     A gravura aparece INTEIRA em largura cheia também no celular. Como
     ela é 2,64:1 e a tela é 0,46:1, isso a reduz a uma faixa baixa — o
     custo foi dito e a escolha é dele. O que dá pra fazer é a faixa
     parecer decisão e não sobra: hero encurta até encostar nela, sem
     vão morto, e a próxima seção começa já visível. */
  .hero{ min-height:auto }
  .hero__content{ padding-top:clamp(4.5rem,17vw,7rem); padding-bottom:clamp(1.25rem,4vw,2rem) }
  .hero__cta .btn{ flex:1 1 auto; min-width:9rem }
  .hero__cta--reserve{ display:none }   /* já está no cabeçalho e na barra fixa */

  /* RODADA 20 — as três gravuras.
     O `gap:.75rem` era um número fixo (12px) que atropelava o token e
     valia para as duas direções: a legenda da primeira linha ficava a
     16px da própria gravura e a 12px da gravura de baixo, ou seja,
     mais perto da imagem errada. A coluna continua estreita (é só o
     vão entre dois cartões), mas a LINHA passa a respirar como o resto
     da seção. E a terceira, que fica sozinha, era 60% da largura —
     206px contra 166px das irmãs. Agora ela tem exatamente a medida
     de uma coluna. */
  .vignettes{
    grid-template-columns:1fr 1fr;
    column-gap:var(--vinheta-gap);
    row-gap:var(--space-block);
  }
  .vignettes > :nth-child(3){
    grid-column:1 / -1;
    width:calc(50% - var(--vinheta-gap) / 2);
    max-width:none; margin-inline:auto;
  }
}

/* abaixo de 420 as vinhetas seguem em 2 colunas: empilhar as 3 custa
   uma tela inteira de rolagem e elas são decorativas, não conteúdo. */

/* ============================================================
   ENTREGA 2 — as seções que não têm frame no Figma.
   Todas derivadas da linguagem dos 3 frames: cartão creme sobre
   marinho, foto em raio 32, kicker centrado, título bicolor no
   escuro e monocromático no claro, respiro de seção constante.
   ============================================================ */

/* -- cabeça de seção centrada (padrão dos frames 2 e 3) ------- */
/* 62ch cabia o lead mas cortava a 2ª linha do título (precisava de 688px
   e tinha 616). O lead tem cap próprio logo abaixo, então dá pra alargar
   só a caixa sem esparramar o texto corrido. */
.head{ text-align:center; max-width:76ch; margin-inline:auto }
/* vale para os kickers que NÃO estão dentro de um .head (hero, cinema,
   anfitriã, história, destaques) — o de dentro é a regra logo abaixo. */
.kick + *{ margin-top:var(--space-kick) }
/* Um kicker em cima de TEXTO ganha de graça a entrelinha do título: o
   vão que se enxerga é o número mais o espaço vazio acima das maiúsculas.
   Em cima de FOTO esse espaço não existe, e o mesmo número parece a
   metade. Um quarto do corpo do título é mais ou menos o que a
   entrelinha doaria — é o que se soma aqui, e escala junto com ele.
   Só o "Destaques • Estadia" cai neste caso hoje. */
.kick + :not(h1):not(h2):not(h3):not(p){
  margin-top:calc(var(--space-kick) + var(--fs-h2) / 4);
}
.head .h2{ margin-top:var(--space-kick) }
.head .lead{ margin-top:clamp(.8rem,1.6vw,1.9rem); max-width:56ch;
  margin-inline:auto }

/* -- tira de fotos com legenda (A casa · Entorno) ------------- */
.strip{
  display:grid; gap:var(--space-gap); margin-top:var(--space-block);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.strip figure{ margin:0 }
.strip .photo{ aspect-ratio:3/4 }
.strip figcaption{
  margin-top:.85em; font-size:clamp(.8rem,.95vw,1.05rem);
  letter-spacing:0; line-height:1.4; opacity:.78;
}

/* -- ficha técnica (Speeranza) -------------------------------- */
.film{ display:grid; grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);
  gap:clamp(1.5rem,4.7vw,5.6rem); align-items:center }
.film .photo{ aspect-ratio:3/4 }
.spec{ margin-top:clamp(1.5rem,3vw,3rem); border-top:1px solid var(--rule) }
.section--navy .spec{ border-color:var(--rule-invert) }
.spec div{
  display:flex; justify-content:space-between; gap:1.5rem;
  padding:.85em 0; border-bottom:1px solid var(--rule);
  font-size:clamp(.85rem,1vw,1.1rem); letter-spacing:0;
}
.section--navy .spec div{ border-color:var(--rule-invert) }
.spec dt{
  font-family:var(--serif); font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; font-size:.82em; opacity:.72; flex:none;
}
.spec dd{ margin:0; text-align:right }

/* -- cartão de cardápio (A mesa) — o cartão creme dos frames -- */
.menus{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-gap); margin-top:var(--space-block);
}
.menu{
  background:var(--cream); color:var(--ink);
  border-radius:var(--r-card); padding:clamp(1.5rem,3.1vw,3.75rem);
  display:flex; flex-direction:column;
}
/* nome e preço SEMPRE empilhados: em linha, o cartão de nome curto
   alinha e o de nome longo quebra, e os dois filetes desencontram. */
.menu__top{ display:flex; flex-direction:column; align-items:flex-start;
  gap:.3em; padding-bottom:clamp(.8rem,1.4vw,1.4rem);
  border-bottom:1px solid var(--rule); min-height:4.4em; }
.menu__name{ font-family:var(--serif); font-weight:500; color:var(--navy);
  font-size:clamp(1.35rem,2.24vw,2.75rem); line-height:1.1;
  letter-spacing:var(--track-display) }
.menu__price{ font-family:var(--serif); font-weight:600; color:var(--terra-deep);
  font-size:clamp(1rem,1.35vw,1.6rem); white-space:nowrap; letter-spacing:0 }
.menu ul{ margin:clamp(1rem,1.9vw,2rem) 0 0; display:grid; gap:.55em }
.menu li{ display:flex; gap:.7em; align-items:flex-start;
  font-size:clamp(.95rem,1.15vw,1.35rem); line-height:1.45; letter-spacing:0 }
.menu li::before{ content:""; flex:none; width:5px; height:5px; margin-top:.62em;
  border-radius:50%; background:var(--terra) }
.menu__note{ margin-top:auto; padding-top:clamp(1rem,1.9vw,2rem);
  font-size:clamp(.8rem,.95vw,1.05rem); line-height:1.5;
  color:var(--text-mute); letter-spacing:0 }

/* -- banda de números (Acomodação · Prova social) ------------- */
.stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-gap); margin-top:var(--space-block);
  border-top:1px solid var(--rule-invert); border-bottom:1px solid var(--rule-invert);
  padding-block:clamp(1.5rem,3.2vw,3.8rem);
}
.section--butter .stats{ border-color:var(--rule) }
.stat b{
  display:block; font-family:var(--serif); font-weight:500;
  font-size:clamp(2rem,3.44vw,4.5rem); line-height:1;
  letter-spacing:var(--track-display); color:var(--accent-invert);
}
.section--butter .stat b{ color:var(--text-strong) }
.stat span{ display:block; margin-top:.5em; font-size:clamp(.8rem,.95vw,1.05rem);
  letter-spacing:0; opacity:.76 }

/* -- lista de comodidades ------------------------------------- */
.split{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.5rem,4.7vw,5.6rem); margin-top:var(--space-block) }
.amen{ columns:2; column-gap:clamp(1rem,2.2vw,2.5rem) }
.amen li{ break-inside:avoid; display:flex; gap:.7em; align-items:flex-start;
  margin-bottom:.7em; font-size:clamp(.95rem,1.1vw,1.3rem);
  line-height:1.45; letter-spacing:0 }
.amen li::before{ content:""; flex:none; width:5px; height:5px; margin-top:.62em;
  border-radius:50%; background:var(--terra) }
.sub{ font-family:var(--serif); font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; font-size:clamp(.72rem,.85vw,.95rem);
  opacity:.72; margin-bottom:1.1em; display:block }

/* -- galeria — regras antigas removidas: o nth-child(6) fazia uma
   segunda célula dupla e a conta virava 13 em grade de 4, o que
   abria três buracos na última fila. A grade válida está adiante. */

/* -- citação ---------------------------------------------------*/
.quote{
  margin-top:clamp(1.5rem,3vw,3rem); padding-left:clamp(1rem,1.4vw,1.6rem);
  border-left:2px solid var(--terra);
}
.quote p{ font-family:var(--serif); font-weight:400; font-style:normal;
  font-size:clamp(1.15rem,1.9vw,2.35rem); line-height:1.35;
  letter-spacing:var(--track-display) }
.quote cite{ display:block; margin-top:.9em; font-style:normal;
  font-size:clamp(.8rem,.95vw,1.05rem); letter-spacing:0; opacity:.72 }

/* -- avaliações ------------------------------------------------*/
/* Grade de 6 colunas em vez de `columns:3`. O masonry distribuía por
   altura e jogava as duas avaliações com foto nas colunas 1 e 2, deixando
   ~570px de marinho vazio no canto. Com spans explícitos (6 / 3 / 2) as
   três linhas fecham exatas. */
.revs{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--space-gap); margin-top:var(--space-block); align-items:stretch;
}
.rev{
  grid-column:span 2;
  background:var(--cream); color:var(--ink);
  border-radius:var(--r-card); padding:clamp(1.25rem,2.3vw,2.75rem);
}
/* `.revs` na frente eleva a especificidade para (0,2,0). Sem isso, as
   media queries adiante — que mexem em `.rev`, (0,1,0) — vinham depois
   no arquivo e roubavam o span do destaque e do cartão largo. */
.revs .rev--largo{ grid-column:span 3 }
.revs .rev--destaque{ grid-column:1 / -1 }
/* terracota puro sobre creme dá 3,86 e reprova em texto pequeno.
   Vale a mesma regra do resto do sistema: tinta terracota. */
.rev__stars{ color:var(--terra-deep); font-size:.9rem; letter-spacing:.18em }
.rev p{ margin-top:.7em; font-size:clamp(.95rem,1.15vw,1.35rem);
  line-height:1.5; letter-spacing:0 }
.rev cite{ display:block; margin-top:.9em; font-style:normal;
  font-size:clamp(.78rem,.9vw,1rem); letter-spacing:0; color:var(--text-mute) }

/* -- reservar --------------------------------------------------*/
.steps{ display:grid; gap:clamp(1rem,1.9vw,2.2rem); margin-top:var(--space-block) }
.step{ display:flex; gap:clamp(.9rem,1.4vw,1.6rem); align-items:flex-start }
/* creme sobre terracota puro dá 3,86; o número tem 16,6px e não
   alcança o limiar de "texto grande", então precisa da tinta. */
.step b{
  flex:none; width:clamp(2.1rem,2.8vw,3.4rem); aspect-ratio:1;
  display:grid; place-items:center; border-radius:50%;
  background:var(--action); color:var(--cream);
  font-family:var(--serif); font-weight:600;
  font-size:clamp(.95rem,1.15vw,1.4rem); letter-spacing:0;
}
.step span{ display:block; font-size:clamp(.95rem,1.15vw,1.35rem);
  line-height:1.5; letter-spacing:0 }
.step span i{ display:block; font-style:normal; font-family:var(--serif);
  font-weight:600; color:var(--navy); margin-bottom:.15em;
  font-size:clamp(1.05rem,1.35vw,1.6rem) }

.form{ background:var(--cream); border-radius:var(--r-card);
  padding:clamp(1.5rem,3.1vw,3.75rem) }
.form__grid{ display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(.75rem,1.4vw,1.5rem) }
.form label{ display:block; font-size:clamp(.75rem,.9vw,1rem);
  letter-spacing:.06em; text-transform:uppercase; font-family:var(--serif);
  font-weight:600; color:var(--navy); opacity:.8; margin-bottom:.5em }
.form input,.form select,.form textarea{
  width:100%; font:inherit; font-size:clamp(.9rem,1.05vw,1.2rem);
  letter-spacing:0; color:var(--ink); background:#fff;
  border:1px solid var(--rule); border-radius:calc(var(--r-photo) * .5);
  padding:.7em .9em;
}
.form textarea{ min-height:5.5em; resize:vertical }
.form .full{ grid-column:1 / -1 }
.form .btn{ width:100%; margin-top:.4em }
.form__foot{ margin-top:1em; text-align:center;
  font-size:clamp(.78rem,.9vw,1rem); letter-spacing:0; color:var(--text-mute) }
.form__foot a{ color:var(--terra-deep); text-decoration:underline;
  text-underline-offset:3px }
.form__foot small{ display:block; margin-top:.7em; font-size:.88em; opacity:.72 }

/* Consentimento opcional (LGPD): sem ele o registro serve pra responder
   esta reserva, não pra campanha depois. `label` vira o alvo inteiro —
   o quadradinho de 16px sozinho não é área de toque aceitável. */
.form .check{
  display:flex; align-items:flex-start; gap:.65em; cursor:pointer;
  padding-block:.35em;   /* alvo de toque: sem isto a linha fica em 19px */
  margin-bottom:0; text-transform:none; letter-spacing:0; opacity:1;
  font-family:var(--sans); font-weight:400; color:var(--text-mute);
  font-size:clamp(.82rem,.95vw,1.05rem); line-height:1.45;
}
.form .check input{
  width:auto; flex:none; margin:.15em 0 0; padding:0;
  accent-color:var(--action); inline-size:1.1em; block-size:1.1em;
}
.form .check span{ text-wrap:pretty }

.plats{ display:grid; grid-template-columns:1fr 1fr;
  gap:var(--space-gap); margin-top:var(--space-block) }
.plat{ border:1px solid var(--rule); border-radius:var(--r-card);
  padding:clamp(1.25rem,2.3vw,2.75rem) }
.plat b{ font-family:var(--serif); font-weight:600; color:var(--navy);
  font-size:clamp(1.05rem,1.35vw,1.6rem) }
.plat__rate{ font-family:var(--serif); color:var(--terra-deep);
  font-size:clamp(.95rem,1.1vw,1.3rem); letter-spacing:0; margin-top:.3em }
.plat span{ display:block; font-size:clamp(.8rem,.95vw,1.05rem);
  letter-spacing:0; opacity:.7; margin-top:.2em }
/* o link virou botão cheio; a regra antiga pintava o texto de
   --terra-deep, que passou a ser o próprio fundo — texto invisível */
.plat a:not(.btn){ display:inline-block; margin-top:1em; color:var(--terra-deep);
  font-family:var(--serif); font-weight:600; letter-spacing:0;
  font-size:clamp(.9rem,1.05vw,1.2rem); border-bottom:1px solid currentColor }

/* -- rodapé ----------------------------------------------------*/
.foot{ background:var(--navy-deep); color:var(--cream);
  padding-block:clamp(2.5rem,5.2vw,6.5rem) }
.foot__in{ display:grid; grid-template-columns:1.3fr 1fr 1fr;
  gap:clamp(1.5rem,3.5vw,4rem) }
.foot__logo{ width:clamp(120px,11vw,210px) }
.foot p,.foot li{ font-size:clamp(.85rem,1vw,1.1rem); line-height:1.7;
  letter-spacing:0; color:rgb(245 239 233 / .74) }
.foot a:hover{ color:var(--amber) }
/* `.foot .foot__bar` e não `.foot__bar`: o seletor curto é (0,1,0) e
   perdia para `.foot p` (0,2,0) logo acima — a cor da barra nunca
   chegou a valer. Com a especificidade certa ela volta a ser mais
   apagada que as colunas (6,13 contra 8,27), e ainda passa em AA. */
.foot .foot__bar{ margin-top:clamp(1.75rem,3.5vw,4rem);
  padding-top:clamp(1rem,1.8vw,2rem); border-top:1px solid var(--rule-invert);
  font-size:clamp(.75rem,.85vw,.95rem); letter-spacing:0;
  color:rgb(245 239 233 / .62) }
.foot .foot__bar a{ color:rgb(245 239 233 / .85); text-decoration:underline;
  text-underline-offset:3px }

/* -- barra fixa de reserva no celular -------------------------- */
.dock{
  position:fixed; inset-inline:0; bottom:0; z-index:40; display:none;
  padding:.7rem clamp(.9rem,4vw,1.25rem)
    calc(.7rem + env(safe-area-inset-bottom, 0px));
  background:rgb(9 27 82 / .94); backdrop-filter:blur(10px);
  border-top:1px solid var(--rule-invert);
}
.dock .btn{ width:100%; padding-block:.8rem }

/* ------------------------------------------------------------
   RESPONSIVO das seções novas
   ------------------------------------------------------------ */
@media (max-width:1100px){
  .film{ grid-template-columns:1fr; align-items:start }
  .film .photo{ aspect-ratio:4/3 }
  .menus{ grid-template-columns:1fr }
  .split{ grid-template-columns:1fr }
  .revs{ columns:2 }
  .strip{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .gal{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .gal .photo:nth-child(1),.gal .photo:nth-child(6){ grid-column:span 2 }
  .foot__in{ grid-template-columns:1fr 1fr }
}

@media (max-width:760px){
  .stats{ grid-template-columns:1fr 1fr; gap:var(--space-block) }
  .revs{ columns:1 }
  .plats{ grid-template-columns:1fr }
  .form__grid{ grid-template-columns:1fr }
  .amen{ columns:1 }
  .foot__in{ grid-template-columns:1fr; gap:var(--space-block) }
  .dock{ display:block }
  /* RODADA 20 — a reserva de espaço da barra fixa saiu do body.
     O padding estava no <body>, que é creme, então sobrava uma faixa
     de 80px de creme DEPOIS do rodapé marinho e a página não terminava
     no rodapé. A mesma reserva, feita dentro do rodapé, some do olho
     (é marinho sobre marinho) e continua impedindo que o dock cubra a
     última linha. `:has` porque privacidade.html não tem dock e não
     deve ganhar 80px de rodapé à toa. */
  body{ padding-bottom:0 }
  body:has(.dock) .foot{
    padding-bottom:calc(clamp(2.5rem,5.2vw,6.5rem) + 5rem);
  }
  .spec div{ flex-direction:column; gap:.2rem }
  .spec dd{ text-align:left }
  /* no celular o formulário vem ANTES dos cards de plataforma */
  .book__form{ order:-1 }
}

/* O cartão creme só "salta" sobre o marinho. Sobre a manteiga os dois
   tons quase se confundem — no claro ele precisa de fio pra existir. */
.section--butter .form,
.section--butter .menu,
.section--butter .rev{ border:1px solid var(--rule) }

/* Alvo de toque: os links do rodapé têm ~14px e ficam colados na lista.
   O mínimo é 24x24 — o padding cresce a área sem mexer no visual. */
.foot li a{ display:inline-block; padding-block:.4em; }
.foot li{ line-height:1.6 }

/* endereço com ícone: era texto morto num lugar onde chegar é dúvida
   real (casa rural, na estrada). Agora abre o Maps. */
.foot__mapa a{ display:flex; align-items:flex-start; gap:.5em }
.foot__mapa .ico{ flex:none; font-size:1.15em; margin-top:.15em; opacity:.75 }

/* APROVADA [rodada 15]: a coluna de navegação interna saiu — quem chega
   ao rodapé acabou de rolar a página e tem o menu fixo no topo. No lugar
   entram os perfis onde a casa já tem reputação. */

/* O título do passo é marinho — no index a seção Reservar é clara e
   funciona, mas na página do investidor ela é marinha e o texto some.
   Todo componente que fixa cor precisa da contraparte no escuro. */
.section--navy .step span i{ color:var(--accent-invert) }
.section--navy .menu__name,
.section--navy .plat b,
.section--navy .form label{ color:var(--navy) }

/* ============================================================
   RODADA DE AJUSTES — ícones, cor e vida
   ============================================================ */

/* -- ícone base ------------------------------------------------ */
.ico{ width:1em; height:1em; flex:none; display:inline-block; vertical-align:-.12em }

/* selo: ícone dentro de disco. É o elemento que traz cor às seções
   que estavam chapadas, e reaproveita o símbolo da marca. */
.selo{
  display:inline-grid; place-items:center; flex:none;
  width:clamp(2.6rem,3.6vw,3.9rem); aspect-ratio:1; border-radius:50%;
  background:var(--action); color:var(--cream);
  font-size:clamp(1.2rem,1.7vw,1.75rem);
}
.selo--claro{ background:var(--amber); color:var(--navy) }
.selo--fio{ background:none; color:var(--action);
  box-shadow:inset 0 0 0 1.5px currentColor }
.section--navy .selo--fio{ color:var(--amber) }

/* kicker com selo ao lado */
.kick-linha{ display:flex; align-items:center; gap:.75em }
.head .kick-linha{ justify-content:center }

/* -- números com ícone ---------------------------------------- */
/* Centralizado por dentro e por fora [rodada 15]: cada número alinha
   ícone, valor e rótulo no eixo, e os quatro deixam de ser esticados
   em 4 colunas de 1fr pra virar um bloco só, centrado na página. Com
   `auto` a coluna vale a largura do conteúdo — rótulo longo não força
   as outras três a crescerem junto. */
.stat{ display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:.15em }
.stat .ico{
  font-size:clamp(1.4rem,1.9vw,2rem); color:var(--action);
  margin-bottom:.35em;
}
.section--navy .stat .ico{ color:var(--amber) }
.stats{
  grid-template-columns:repeat(4,auto); justify-content:center;
  align-items:start; gap:clamp(1.5rem,4.5vw,6rem);
}
@media (max-width:760px){
  .stats{ grid-template-columns:repeat(2,auto); gap:clamp(1.75rem,6vw,2.5rem) }
}

/* -- comodidades com ícone ------------------------------------ */
/* 12 comodidades: em 3 colunas fecham 4 linhas exatas e a lista deixa
   de ocupar meia largura da seção. Cai para 2 no tablet e 1 no celular. */
.amen{ columns:auto; column-gap:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.55rem,1vw,.95rem) clamp(1rem,2vw,2.2rem) }
@media (max-width:1100px){ .amen{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.amen li{ display:flex; gap:.7em; align-items:center; margin:0;
  font-size:clamp(.92rem,1.05vw,1.25rem); line-height:1.35; letter-spacing:0 }
.amen li::before{ content:none }
.amen .ico{ font-size:1.35em; color:var(--action); opacity:.95 }
.section--navy .amen .ico{ color:var(--amber) }

/* -- quartos ilustrados --------------------------------------- */
.quartos{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-gap); margin-top:var(--space-block);
}
.quarto{ position:relative; border-radius:var(--r-photo); overflow:hidden;
  aspect-ratio:3/4; background:var(--navy-deep) }
.quarto img{ width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease) }
.quarto:hover img{ transform:scale(1.04) }
.quarto figcaption{
  position:absolute; inset-inline:0; bottom:0; z-index:2;
  padding:clamp(.8rem,1.4vw,1.4rem);
  background:linear-gradient(to top, rgb(9 27 82 / .92), rgb(9 27 82 / 0));
  color:var(--cream);
}
.quarto b{ display:block; font-family:var(--serif); font-weight:600;
  font-size:clamp(.95rem,1.15vw,1.3rem); letter-spacing:0 }
.quarto span{ display:block; margin-top:.15em; font-size:clamp(.78rem,.9vw,1rem);
  letter-spacing:0; color:var(--amber) }

/* -- galeria: 1 grande (2×2) + 8 normais = 12 células, 3 filas
   exatas em 4 colunas. Sem buraco por construção. --------------- */
.gal{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:1fr; gap:var(--space-gap); margin-top:var(--space-block);
}
.gal .photo{ aspect-ratio:1; margin:0 }
.gal .photo:first-child{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto }
.gal{ grid-auto-flow:dense }
.gal button{
  display:block; width:100%; height:100%; padding:0; cursor:zoom-in;
  border-radius:inherit; overflow:hidden; position:relative;
}
.gal img{ width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease), filter .35s var(--ease) }
.gal button:hover img{ transform:scale(1.05) }
.gal button::after{
  content:""; position:absolute; inset:0;
  background:rgb(9 27 82 / 0); transition:background .35s var(--ease);
}
.gal button:hover::after{ background:rgb(9 27 82 / .18) }
.gal__lupa{
  position:absolute; right:.7rem; bottom:.7rem; z-index:2;
  width:2.1rem; height:2.1rem; display:grid; place-items:center;
  border-radius:50%; background:rgb(251 241 215 / .92); color:var(--navy);
  font-size:1.1rem; opacity:0; transform:translateY(6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.gal button:hover .gal__lupa,.gal button:focus-visible .gal__lupa{
  opacity:1; transform:none }

/* -- lightbox --------------------------------------------------- */
.lb{
  position:fixed; inset:0; z-index:90; display:none;
  background:rgb(9 27 82 / .96); padding:clamp(1rem,4vw,3rem);
}
.lb[open],.lb.is-on{ display:grid; grid-template-rows:auto 1fr auto; gap:1rem }
.lb__topo{ display:flex; justify-content:space-between; align-items:center;
  color:var(--cream); font-size:.9rem; letter-spacing:.08em }
/* flex, e não grid: como item de grid a imagem não resolvia o
   `max-height:100%` contra a altura do palco e abria no tamanho
   natural — 1200×900 num palco de 704, ou seja, cortada por baixo.
   Em flex a porcentagem resolve e a foto cabe inteira. */
.lb__palco{ position:relative; min-height:0;
  display:flex; align-items:center; justify-content:center }
.lb__palco img{ max-width:100%; max-height:100%; width:auto; height:auto;
  border-radius:var(--r-photo); object-fit:contain }
.lb__legenda{ text-align:center; color:rgb(245 239 233 / .8);
  font-size:clamp(.85rem,1vw,1.05rem); letter-spacing:0 }
.lb__btn{
  width:2.9rem; height:2.9rem; display:grid; place-items:center;
  border-radius:50%; color:var(--cream); font-size:1.2rem;
  background:rgb(245 239 233 / .12); transition:background .25s var(--ease);
}
.lb__btn:hover{ background:rgb(245 239 233 / .26) }
.lb__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3 }
.lb__nav--ant{ left:0 } .lb__nav--prox{ right:0 }

/* -- avaliações com foto e bandeira ---------------------------- */
.rev{ display:flex; flex-direction:column }
.rev__foto{ border-radius:calc(var(--r-card) - 12px); overflow:hidden;
  aspect-ratio:16/10; margin-bottom:clamp(.9rem,1.4vw,1.4rem) }
.rev__foto img{ width:100%; height:100%; object-fit:cover }
.rev__pe{ display:flex; align-items:center; gap:.6em;
  margin-top:auto; padding-top:.9em }
.rev__bandeira{ width:1.55em; height:1.11em; flex:none; border-radius:2px;
  box-shadow:0 0 0 1px rgb(14 42 123 / .18) }
.rev cite{ margin:0 }

/* -- avaliação em destaque: galeria do hóspede + texto completo ---
   As fotos são as que a própria hóspede publicou no Booking, e abrem
   no mesmo lightbox da galeria da casa. */
.rev--destaque{
  display:grid; grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);
  gap:clamp(1.25rem,2.8vw,3.2rem); align-items:center;
}
.rev--destaque .rev__corpo{ display:flex; flex-direction:column }
.rev__galeria{ display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(.5rem,.8vw,.85rem) }
.rev__galeria button{
  padding:0; border:0; background:none; cursor:zoom-in; display:block;
  border-radius:calc(var(--r-card) - 12px); overflow:hidden;
  aspect-ratio:3/4;
}
.rev__galeria img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--ease) }
.rev__galeria button:hover img{ transform:scale(1.05) }
.rev__galeria button:focus-visible{ outline:2px solid var(--terra-deep);
  outline-offset:3px }
/* tira de 3 fotos num cartão comum (a Bruna não escreveu comentário:
   as fotos dela são o depoimento). `flex:1` faz a tira ocupar a sobra
   quando o cartão vizinho da linha é mais alto. */
.rev__tira{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.4rem,.7vw,.7rem); margin-top:clamp(.9rem,1.5vw,1.5rem);
  flex:1; min-height:clamp(140px,14vw,220px);
}
.rev__tira button{
  padding:0; border:0; background:none; cursor:zoom-in; display:block;
  border-radius:calc(var(--r-card) - 14px); overflow:hidden; height:100%;
}
.rev__tira img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--ease) }
.rev__tira button:hover img{ transform:scale(1.05) }
.rev__tira button:focus-visible{ outline:2px solid var(--terra-deep); outline-offset:3px }

.rev__titulo{ font-family:var(--serif); font-weight:600; color:var(--navy);
  font-size:clamp(1.05rem,1.35vw,1.5rem); line-height:1.25;
  letter-spacing:var(--track-display); margin-top:.55em }
.rev--destaque .rev__titulo{ font-size:clamp(1.2rem,1.9vw,2.35rem) }
.rev--destaque > .rev__corpo > p{ text-wrap:pretty }

@media (max-width:1100px){
  /* o destaque empilha: as 4 fotos viram tira horizontal sobre o texto */
  .revs .rev--destaque{ grid-template-columns:1fr }
  .rev--destaque .rev__galeria{ grid-template-columns:repeat(4,minmax(0,1fr)) }
  .rev--destaque .rev__galeria button{ aspect-ratio:1 }
  .rev--destaque .rev__corpo{ margin-top:clamp(1rem,2vw,1.6rem) }
}
@media (max-width:900px){
  /* duas por linha para todos os tamanhos de cartão; o destaque e o
     último ocupam a linha inteira, e com 6 depoimentos não sobra célula */
  .revs .rev,.revs .rev--largo{ grid-column:span 3 }
  .revs .rev--destaque{ grid-column:1 / -1 }
  /* o destaque ocupa uma linha inteira, então os demais se emparelham a
     partir do 2º: só sobra um sozinho quando o total é par. Nesse caso o
     último abre a largura toda — vale para qualquer quantidade. */
  .revs .rev:last-child:nth-child(even){ grid-column:1 / -1 }
}
@media (max-width:620px){
  .revs .rev,.revs .rev--largo,.revs .rev--destaque{ grid-column:1 / -1 }
  .rev--destaque .rev__galeria{ grid-template-columns:1fr 1fr }
}

/* -- cartões de plataforma, com peso --------------------------- */
.plats{ gap:clamp(1rem,1.8vw,1.6rem) }
.plat{
  display:flex; flex-direction:column; gap:.2em;
  background:var(--cream); border:1px solid var(--rule);
  border-radius:var(--r-card); padding:clamp(1.4rem,2.4vw,2.4rem);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease),
             border-color .3s var(--ease);
}
.plat:hover{ transform:translateY(-3px); border-color:var(--action);
  box-shadow:0 14px 34px rgb(14 42 123 / .14) }
.plat__topo{ display:flex; align-items:baseline; justify-content:space-between;
  gap:.6rem; flex-wrap:wrap }
.plat b{ font-size:clamp(1.15rem,1.5vw,1.75rem) }
.plat__nota{
  font-family:var(--serif); font-weight:600; color:var(--action);
  font-size:clamp(1.6rem,2.4vw,2.8rem); line-height:1;
  letter-spacing:var(--track-display); display:flex; align-items:center; gap:.15em;
}
.plat__nota .ico{ font-size:.62em; color:var(--action) }
.plat span{ margin-top:.35em }
.plat .btn{
  margin-top:clamp(1rem,1.6vw,1.5rem); align-self:stretch;
  padding-block:clamp(.6rem,1vw,.9rem); font-size:clamp(.88rem,1vw,1.1rem);
}
.plat a{ border:0 }

/* -- Speeranza e Anfitriã: composição de duas fotos ------------ */
.film{ align-items:center }
.film__fotos{ position:relative }
.film__fotos .photo:first-child{ aspect-ratio:3/4 }
.film__inset{
  position:absolute; right:-6%; bottom:-8%; width:44%;
  border-radius:var(--r-photo); overflow:hidden; aspect-ratio:4/3;
  box-shadow:0 18px 40px rgb(9 27 82 / .3);
  outline:6px solid var(--surface);
}
.section--navy .film__inset{ outline-color:var(--navy) }
.film__inset img{ width:100%; height:100%; object-fit:cover }

/* ficha técnica em cartão, não solta no fundo */
.spec{
  margin-top:clamp(1.4rem,2.4vw,2.4rem); border-top:0;
  background:var(--cream); border:1px solid var(--rule);
  border-radius:var(--r-photo); padding:clamp(1rem,1.8vw,1.8rem) clamp(1.1rem,2vw,2rem);
}
.section--navy .spec{ background:rgb(245 239 233 / .07); border-color:var(--rule-invert) }
.spec div:last-child{ border-bottom:0; padding-bottom:0 }

/* citação com peso: cartão, aspas e estrelas */
.quote{
  position:relative; margin-top:clamp(1.4rem,2.4vw,2.4rem);
  background:var(--cream); border:1px solid var(--rule); border-left:3px solid var(--action);
  border-radius:0 var(--r-photo) var(--r-photo) 0;
  padding:clamp(1.1rem,2vw,2rem) clamp(1.2rem,2.2vw,2.2rem);
}
.section--navy .quote{ background:rgb(245 239 233 / .07); border-color:var(--rule-invert);
  border-left-color:var(--amber) }
.quote p{ font-size:clamp(1.05rem,1.55vw,1.75rem) }
.quote__pe{ display:flex; align-items:center; gap:.55em; margin-top:1em;
  font-size:clamp(.8rem,.92vw,1.02rem); letter-spacing:0; opacity:.78 }
.quote__pe .rev__stars{ font-size:.85em }

/* -- entorno: três pontos em texto, sem cartão e sem foto ------ */
/* Sem moldura de propósito: o acervo não tem foto de restaurante nem
   do trem, e cartão com imagem prometia o que não existe. Sem
   border-radius e sem overflow — com padding lateral zero, o raio do
   canto comia o começo da última linha do parágrafo. */
.perto{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-gap); margin-top:var(--space-block);
}
.perto__card{ display:flex; flex-direction:column }
.perto__txt{ padding:clamp(1rem,1.6vw,1.6rem) 0 0;
  border-top:1px solid var(--rule);
  display:flex; flex-direction:column; gap:.5em }
.section--navy .perto__txt{ border-color:var(--rule-invert) }
.perto__txt .selo{ margin-bottom:.2em }
.perto__txt b{ font-family:var(--serif); font-weight:600; color:var(--navy);
  font-size:clamp(1.05rem,1.35vw,1.5rem); letter-spacing:var(--track-display) }
.perto__txt p{ font-size:clamp(.9rem,1.05vw,1.22rem); line-height:1.5;
  letter-spacing:0; color:var(--text-mute); text-wrap:pretty }

/* faixa de contexto (tráfego da região) */
.faixa{
  display:flex; align-items:center; justify-content:center; gap:clamp(.7rem,1.4vw,1.2rem);
  flex-wrap:wrap; text-align:center;
  margin-top:var(--space-block); padding:clamp(1rem,1.8vw,1.7rem) clamp(1.2rem,2vw,2rem);
  background:rgb(14 42 123 / .06); border-radius:var(--r-pill);
  font-size:clamp(.9rem,1.05vw,1.22rem); letter-spacing:0;
}
.section--navy .faixa{ background:rgb(245 239 233 / .08) }
.faixa .ico{ font-size:1.5em; color:var(--action) }
.section--navy .faixa .ico{ color:var(--amber) }
.faixa b{ font-family:var(--serif); color:var(--navy) }
.section--navy .faixa b{ color:var(--amber) }
/* destaque: fundo marinho, para o dado da região não se perder */
.faixa--destaque{ background:var(--navy); color:var(--cream) }
.faixa--destaque .ico,
.faixa--destaque b{ color:var(--amber) }

/* -- página de texto corrido (privacidade) --------------------
   Coluna de leitura única, sem cartão e sem `.reveal`: documento
   legal não pode depender de JS pra aparecer. */
.prosa{ max-width:68ch; margin-inline:auto }
.prosa > * + *{ margin-top:1.15em }
.prosa h2{
  font-family:var(--serif); font-weight:600; color:var(--text-strong);
  font-size:clamp(1.2rem,1.7vw,2rem); line-height:1.25;
  letter-spacing:var(--track-display); margin-top:2.2em;
}
.prosa h2:first-child{ margin-top:0 }
.prosa p,.prosa li{ font-size:var(--fs-body); line-height:var(--lh-body);
  letter-spacing:0; text-wrap:pretty }
.prosa ul{ padding-left:1.15em; list-style:disc }
.prosa li{ margin-top:.5em }
.prosa li::marker{ color:var(--action) }
.prosa a{ color:var(--terra-deep); text-decoration:underline;
  text-underline-offset:3px }
.prosa strong{ font-weight:500; color:var(--text-strong) }
.prosa__data{ font-size:clamp(.82rem,.95vw,1.05rem); color:var(--text-mute);
  letter-spacing:.06em; text-transform:uppercase; font-family:var(--serif) }

/* cabeçalho curto: existe pra o topo branco absoluto ter marinho atrás */
.capa{ background:var(--surface-invert); color:var(--text-invert);
  padding-block:clamp(7rem,13vw,12rem) clamp(2.5rem,5vw,5rem) }
.capa .h2{ color:var(--text-invert); margin-top:.2em }

/* ------------------------------------------------------------
   RESPONSIVO dos componentes novos
   ------------------------------------------------------------ */
@media (max-width:1100px){
  .quartos{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .perto{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .film__inset{ width:38%; right:0; bottom:-6% }
}
@media (max-width:760px){
  .amen{ grid-template-columns:1fr }
  /* RODADA 20 — uma coluna no celular (pedido do Henrique).
     Em duas colunas de 166px o cartão ficava com metade da altura em
     legenda: "Três quartos / de casal" quebrava em duas linhas em cima
     da foto. Numa coluna a legenda cabe em uma linha só. A proporção
     abre de 3:4 para 4:3 — em retrato, quatro cartões de 457px viravam
     1,9 mil pixels de rolagem só aqui. O vão vem do token, não de um
     número solto: 12px entre duas fotos de largura inteira era o mesmo
     defeito das gravuras. */
  .quartos{ grid-template-columns:1fr; gap:var(--space-gap) }
  .quarto{ aspect-ratio:4/3 }
  .perto{ grid-template-columns:1fr }
  .gal{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .gal .photo:first-child{ grid-column:span 2; grid-row:span 1; aspect-ratio:3/2 }
  .film__inset{ position:relative; right:auto; bottom:auto; width:100%;
    margin-top:.75rem; outline:0; box-shadow:none; aspect-ratio:16/10 }
  .lb__nav{ top:auto; bottom:0; transform:none }
  .plats{ grid-template-columns:1fr }
}

/* Cartão de plataforma — três correções de medição:
   1. `.plat span` (0,2,0) vencia `.plat__nota` (0,1,0) e achatava a nota;
   2. o padding do botão padrão é largo demais pra caixa estreita do
      cartão e quebrava "Ver no Airbnb" em duas linhas;
   3. sem margin-top:auto os botões desalinhavam quando um dos textos
      de detalhe ocupava duas linhas. */
.plat span:not(.plat__nota){ display:block; font-size:clamp(.8rem,.95vw,1.05rem);
  letter-spacing:0; opacity:.7 }
.plat .plat__nota{
  display:flex; opacity:1;
  font-size:clamp(1.5rem,2.2vw,2.6rem);
}
.plat .btn{
  margin-top:auto; padding-inline:clamp(1rem,1.5vw,1.6rem);
  white-space:nowrap; gap:.4em;
}
.plat .btn .ico{ margin-left:0 !important }

/* APROVADO [rodada 2]: as gravuras deixam de ser enfeite e viram três
   pilares nomeados. O cartão creme sai de trás do bloco e fica só na
   imagem, pra a legenda respirar sobre o marinho. */
.vignette{ background:transparent; border-radius:0; aspect-ratio:auto;
  display:flex; flex-direction:column }
/* RODADA 20 — o `height:100%` da regra base sobrevivia aqui, e num
   flex em coluna ele vira "estique até o fim do cartão". Como a grade
   iguala a altura das figuras, a gravura de legenda CURTA engordava
   para compensar: no celular a do fogão saía 184px de altura contra
   164px da uva, lado a lado, e o quadrado deixava de ser quadrado.
   `height:auto` devolve o comando para o aspect-ratio. */
.vignette img{ background:var(--cream); border-radius:var(--r-card);
  aspect-ratio:1; height:auto }
.vignette__cap{ display:block; margin-top:1em; text-align:center }
.vignette__cap b{ display:block; font-family:var(--serif); font-weight:600;
  color:var(--amber); font-size:clamp(1rem,1.3vw,1.45rem);
  letter-spacing:var(--track-display) }
.vignette__cap span{ display:block; margin-top:.25em;
  font-size:clamp(.82rem,.95vw,1.05rem); letter-spacing:0; color:var(--text-mute-inv) }
.section--butter .vignette__cap b{ color:var(--navy) }
.section--butter .vignette__cap span{ color:var(--text-mute) }

/* ---- bloco de apoio da seção 2 — APROVADO [rodada 2] ---------
   Ficha + faixa de países. Preenche a coluna sob o texto, que ficava
   vazia enquanto a foto ao lado ia até embaixo. */
.ficha{ display:grid }
.paises{ display:flex }

.ficha{ margin-top:clamp(1.5rem,2.6vw,2.6rem); gap:clamp(.7rem,1.2vw,1.2rem) }
.ficha li{ display:flex; gap:.85em; align-items:flex-start; margin:0 }
.ficha li::before{ content:none }
.ficha .ico{ font-size:clamp(1.25rem,1.55vw,1.7rem); color:var(--amber);
  margin-top:.1em }
.section--butter .ficha .ico{ color:var(--action) }
.ficha b{ display:block; font-family:var(--serif); font-weight:600;
  font-size:clamp(.98rem,1.15vw,1.3rem); letter-spacing:0; line-height:1.3 }
.ficha span{ display:block; font-size:clamp(.82rem,.95vw,1.05rem);
  letter-spacing:0; line-height:1.4; color:var(--text-mute-inv); margin-top:.1em }
.section--butter .ficha span{ color:var(--text-mute) }

.paises{ align-items:center; gap:.7em;
  margin-top:clamp(1.2rem,2vw,2rem); padding-top:clamp(1rem,1.6vw,1.6rem);
  border-top:1px solid var(--rule-invert);
  font-size:clamp(.85rem,.98vw,1.1rem); letter-spacing:0;
  color:var(--text-mute-inv); line-height:1.45 }
.section--butter .paises{ border-color:var(--rule); color:var(--text-mute) }
/* Reino Unido (#012169) e Nova Zelândia (#00247D) são quase o marinho
   da página: sem fio elas somem e sobram as cruzes soltas no fundo.
   Fio claro nas seções escuras resolve — e um degrau a mais de tamanho
   deixa as estrelas da NZ legíveis. */
.paises__flags{ display:inline-flex; gap:.38em; flex:none }
.paises .rev__bandeira{ width:1.85em; height:1.32em; border-radius:2px }
.section--navy .paises .rev__bandeira{
  box-shadow:0 0 0 1px rgb(245 239 233 / .5) }

/* ---- seção 3 — APROVADO [rodada 3]: linhas numeradas ---------
   Mantém o formato alternado e ganha índice, linha de detalhe e CTA.
   A foto passou de 2:1 para 4:3, que é a proporção do acervo — antes
   a fachada precisava de reenquadramento manual pra caber. */
.feature__selo{ display:none }
.feature__media{ aspect-ratio:4/3 }
.feature__body{ display:flex; flex-direction:column }
.feature__num{ display:block; margin-bottom:.9em }
.feature__num{
  font-family:var(--serif); font-weight:600; color:var(--action);
  font-size:clamp(.78rem,.9vw,1rem); letter-spacing:.18em;
}
.feature__det{
  display:block; text-wrap:pretty;
  margin-top:clamp(.6rem,1vw,1rem);
  font-size:clamp(.85rem,1vw,1.12rem); line-height:1.5;
  letter-spacing:0; color:var(--text-mute); max-width:34ch;
}
.section--navy .feature__det{ color:var(--text-mute-inv) }
.destaques__cta{ display:block; text-align:center; margin-top:var(--space-block) }

/* ---- rag: quebra de linha que não deixa órfã nem viúva --------
   `balance` distribui as linhas do título (bom até ~6 linhas);
   `pretty` evita a última linha sozinha em texto corrido.
   Só o display/h2/lead/body tinham; o resto quebrava por acaso. */
.h3,.menu__name,.quarto b,.perto__txt b,.plat b,
.feature__num + .h2,.stat span{ text-wrap:balance }

.feature__det,.vignette__cap span,.ficha span,.ficha b,
.menu li,.menu__note,.rev p,.perto__txt p,.spec dd,
.step span,.quote p,.faixa span,.plat span,.foot p,.foot li,
.form__foot,.figcaption,figcaption{ text-wrap:pretty }

/* preço e nota nunca quebram no meio */
.menu__price,.plat__nota,.stat b,.rev__stars,.paises__flags{ white-space:nowrap }

/* ---- seção 4 — APROVADO [rodada 4]: aérea abre, ficha em linha ---
   A ficha sai do formato cartão e vira quatro colunas com fio em cima,
   pra ler como ficha técnica e não como caixa. */
.spec--casa,
.section--navy .spec--casa{   /* .section--navy .spec vence .spec--casa sozinho */
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 clamp(1rem,2vw,2rem);
  background:none; border:0; padding:0; max-width:none;
  margin-top:clamp(1.4rem,2.4vw,2.4rem);
}
.spec--casa div{
  flex-direction:column; align-items:flex-start; gap:.25rem;
  border-bottom:0; border-top:1px solid var(--rule-invert);
  padding:.9em 0 0;
}
.spec--casa dd{ text-align:left }

/* a vista aérea ocupa a linha inteira; os três detalhes dividem a seguinte */
/* -- grades de 3 da página do investidor -----------------------
   Antes eram `style="grid-template-columns:repeat(3,...)"` no HTML.
   Inline não perde para media query nenhuma, então as três colunas
   sobreviviam até 390px: o bloco de texto virava coluna de 98px e a
   tira de fotos, três miniaturas de 104px. Vira classe pra poder ceder. */
.split--3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.strip--3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:900px){ .split--3{ grid-template-columns:1fr } }
@media (max-width:760px){ .strip--3{ grid-template-columns:1fr } }

/* Link dentro de parágrafo de corpo sobre marinho: sem regra o "Como
   cuidamos deles" saía idêntico ao texto ao redor — link invisível é
   link que ninguém clica. Sublinhado em vez de cor: terracota sobre
   marinho não passa em contraste. */
.section--navy .body a{ color:inherit; text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px }
.section--navy .body a:hover{ color:var(--amber) }

.strip--casa{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.strip--casa figure:first-child{ grid-column:1 / -1 }
.strip--casa figure:first-child .photo{ aspect-ratio:21/9 }

@media (max-width:760px){
  .spec--casa{ grid-template-columns:1fr 1fr }
  .strip--casa{ grid-template-columns:1fr 1fr }
  .strip--casa figure:first-child{ grid-column:1 / -1 }
  .strip--casa figure:first-child .photo{ aspect-ratio:16/9 }
}

/* ---- seção 5 — SPEERANZA -------------------------------------
   Fundo: entre duas seções marinhas, esta vira a mais clara da página
   (papel, quase branco). Mantém a alternância e dá registro próprio
   à única seção que fala de cinema. */
#speeranza{ background:#FCFAF6 }
#speeranza .film__fotos .photo{ aspect-ratio:2/3 }
/* A foto de apoio pendurava PARA FORA da caixa (right:-6%; bottom:-8%),
   esticando a coluna da esquerda e deixando um elemento solto no meio
   do nada. Agora ela sobrepõe DENTRO dos limites da foto principal. */

/* APROVADO [rodada 5, opção 1]: em vez de empurrar a ficha pra baixo,
   ela SOBE em 2×2 e preenche a coluna que sobrava. O vazio de 199px
   entre o conteúdo e os dados foi a zero e a seção encurtou 157px. */
.film{ align-items:start; row-gap:0;
  grid-template-columns:minmax(0,.42fr) minmax(0,.58fr) }
.film__fotos{ grid-row:1 / span 2 }
.film__fotos .photo{ aspect-ratio:4/5 }

.spec--film{
  grid-column:2; grid-row:2;
  margin-top:clamp(1.5rem,2.6vw,2.6rem);
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1rem,1.8vw,1.8rem) clamp(1.2rem,2.2vw,2.2rem);
  background:none; border:0; border-radius:0; padding:0;
}
.spec--film div{
  flex-direction:column; align-items:flex-start; gap:.25rem;
  border-bottom:0; border-top:1px solid var(--rule); padding:.8em 0 0;
}
.spec--film dd{ text-align:left }

@media (max-width:1100px){
  .film{ grid-template-columns:1fr }
  .film__fotos,.film__texto,.spec--film{ grid-column:1; grid-row:auto }
  .spec--film{ margin-top:var(--space-block) }
}

/* ---- seção 5 · citação da arquitetura ------------------------ */
.film__cita{
  margin-top:clamp(1.2rem,2.2vw,2.2rem);
  padding-left:clamp(.9rem,1.4vw,1.4rem);
  border-left:2px solid var(--action);
}
.film__cita p{
  /* itálico fora: serifada em itálico no tamanho grande não é legível */
  font-family:var(--serif); font-weight:400; font-style:normal;
  font-size:clamp(1.05rem,1.5vw,1.7rem); line-height:1.38;
  letter-spacing:var(--track-display); text-wrap:pretty;
}
.film__cita em{ font-style:normal; color:var(--action); font-weight:600 }
.section--navy .film__cita{ border-left-color:var(--amber) }
.section--navy .film__cita em{ color:var(--amber) }
.film__cita cite{
  display:block; margin-top:.7em; font-style:normal;
  font-size:clamp(.78rem,.9vw,1rem); letter-spacing:0; color:var(--text-mute);
}
.section--navy .film__cita cite{ color:var(--text-mute-inv) }
.film__ponte{
  margin-top:clamp(1rem,1.8vw,1.8rem);
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1rem,1.25vw,1.4rem); line-height:1.42;
  letter-spacing:var(--track-display); color:var(--text-strong); text-wrap:pretty;
}
.section--navy .film__ponte{ color:var(--amber) }
.film__texto .body{ margin-top:clamp(1rem,1.8vw,1.8rem); max-width:52ch }

/* ---- seção 7 — APROVADO [rodada 7] --------------------------
   Duas vozes de hóspede + ficha prática de como ela recebe. A foto
   ESTICA até a altura da coluna de texto em vez de eu fixar uma
   proporção — assim ela se ajusta ao que a seção pedir. */
.quote--dois{ display:block; margin-top:clamp(1rem,1.6vw,1.6rem) }

.ficha--anfitria{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(.9rem,1.5vw,1.5rem) clamp(1.2rem,2vw,2rem);
  margin-top:clamp(1.4rem,2.2vw,2.2rem);
  padding-top:clamp(1.2rem,2vw,2rem); border-top:1px solid var(--rule);
}
/* em duas colunas, rótulo e detalhe lado a lado espremem e quebram feio */
.ficha--anfitria li{ display:grid; grid-template-columns:auto 1fr;
  gap:.1em .7em; align-items:start }
.ficha--anfitria li .ico{ grid-row:1 / span 2; margin-top:.15em }

#anfitria .film{ align-items:stretch }
#anfitria .film__fotos{ display:flex }
#anfitria .film__fotos .photo{ height:100%; width:100%; aspect-ratio:auto }
/* o cover corta as laterais: puxa o enquadramento pro casal, que está
   no centro-direita do original, e não pro centro geométrico */
#anfitria .film__fotos .photo img{ object-position:68% 50% }

@media (max-width:1100px){
  #anfitria .film__fotos .photo{ height:auto; aspect-ratio:4/3 }
  #anfitria .film__fotos .photo img{ object-position:50% 50% }
}
@media (max-width:760px){ .ficha--anfitria{ grid-template-columns:1fr } }


/* ============================================================
   RODADA 17 — otimização de celular
   O celular é o foco de acesso do site. Tudo aqui é correção de
   coisa que só quebra abaixo de 760px; nada muda no desktop.
   ============================================================ */
@media (max-width:760px){

  /* 🔴 O bug mais caro da página. O Safari do iPhone dá zoom
     automático em qualquer campo com fonte < 16px: ao tocar em
     "Seu nome" a tela pula, o layout desloca e o hóspede precisa
     dar pinch pra voltar — exatamente no ponto de conversão.
     A clamp entregava 14,4px em 390px. 16px é o piso, não gosto. */
  .form input, .form select, .form textarea{ font-size:16px }

  /* O alvo de toque secundário estava em 121×17px: quem só quer
     conversar (e é gente que converte) tinha um link fino no meio
     de um parágrafo. Vira botão de largura cheia. */
  .form__foot{ margin-top:1.4em }
  .form__foot a[href^="https://wa.me"]{
    display:block; margin-top:.6em; padding:.75rem 1rem;
    border:1px solid var(--rule); border-radius:999px;
    color:var(--navy); text-decoration:none; font-weight:500;
  }

  /* A barra fixa some quando a seção de reserva está na tela: ali
     ela não leva a lugar nenhum (já é o destino dela) e ainda
     cobria o "Enviar pelo WhatsApp" nos últimos 70px da rolagem. */
  .dock{ transition:transform .25s ease, opacity .25s ease }
  .dock[data-oculta="1"]{ transform:translateY(110%); opacity:0;
    pointer-events:none }

  /* 11 avaliações empilhadas davam 4.500px — mais de cinco telas de
     rolagem só de depoimento. Mostra 5 e abre o resto no toque. */
  .revs[data-colapsada="1"] > .rev:nth-child(n+6){ display:none }
  .revs-mais{ display:block; width:100%; margin-top:1.25rem }
  .revs-mais[hidden]{ display:none }
}

/* O <i> do título do filme caía em IBM Plex Sans itálico, que não é
   uma das faces carregadas — o navegador inclinava a romana na mão
   (falso itálico). O serifado itálico já vem no pacote e ainda lê
   melhor como título de obra. */
#speeranza i, #speeranza cite i{ font-family:var(--serif); font-style:italic }

/* Mesmo caso no <b>: sem peso declarado o navegador pede 700 ao
   serifado, que só tem até 600 carregado, e sintetiza o negrito. */
.faixa b, .body b, .lead b{ font-weight:600 }

/* ============================================================
   RODADA 18 — preço na seção de reserva
   ============================================================ */

/* A .faixa nasceu como banda larga de seção. Dentro de uma coluna
   estreita ela degrada: o ícone não cabe ao lado do texto e cai
   sozinho numa linha, e o raio de pílula come as laterais. Este
   modificador a transforma em cartão — e de quebra ela passa a
   combinar com os cartões de plataforma logo abaixo. */
.faixa--coluna{
  justify-content:flex-start; align-items:flex-start; text-align:left;
  flex-wrap:nowrap; border-radius:var(--r-card);
}
/* o ícone acompanha a PRIMEIRA linha, não o centro do bloco de 3 linhas */
.faixa--coluna .ico{ flex:none; margin-top:-.08em }

/* ============================================================
   RODADA 19 — respiro e grades do celular
   Tudo aqui nasceu de medição em 390px, não de impressão. O que
   está corrigido embaixo tem o número do defeito no comentário.
   ============================================================ */

/* -- 1. imagem colada no texto ---------------------------------
   `.film{row-gap:0}` foi escrito para o layout de DUAS colunas,
   onde as linhas são posicionadas à mão (`grid-row`). Quando a
   grade empilha, esse zero vira uma foto encostada no título:
   medido, o vão entre a foto e o texto era de 0px no Speeranza e
   na Anfitriã. Ao empilhar, a linha volta a ter respiro. */
@media (max-width:1100px){
  .film{ row-gap:var(--space-block) }
  .duo{ row-gap:var(--space-block) }
}

/* -- 2. ficha da seção 2 ---------------------------------------
   `.ficha li` era flex simples, então o título e o detalhe viravam
   irmãos LADO A LADO — "Casa inteira, 100% privada" quebrava em duas
   linhas de 12 caracteres com o detalhe espremido ao lado. Vira grade
   de duas colunas: o ícone ocupa a primeira e atravessa as duas
   linhas, título e detalhe empilham na segunda. É o mesmo desenho
   que a ficha da anfitriã já usava. */
.ficha li{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:.15em .85em; align-items:start;
}
.ficha li .ico{ grid-row:1 / span 2; margin-top:.15em }

/* -- 3. ficha da casa (seção 4) --------------------------------
   A media query mexia em `.spec--casa` (0,1,0) e perdia para
   `.section--navy .spec--casa` (0,2,0) declarada antes: as quatro
   colunas sobreviviam até 390px, com 73px cada — "CONSTRUÇÃO" em
   três linhas. A correção é a especificidade, não o valor. */
@media (max-width:760px){
  .spec--casa,
  .section--navy .spec--casa{
    grid-template-columns:1fr 1fr;
    gap:clamp(.9rem,3vw,1.4rem) clamp(1rem,4vw,1.6rem);
  }
}

/* -- 4. buraco na grade de fotos da casa -----------------------
   `.strip--casa` tem 4 fotos: a primeira abre a largura toda e as
   três restantes não fecham duas colunas — sobrava uma célula vazia
   do tamanho de uma foto. Quando o último item cai sozinho, ele abre
   a linha inteira em vez de deixar o vão. */
@media (max-width:760px){
  /* RODADA 20 — quem abre a largura passou a ser a fachada.
     Das quatro fotos só o rádio é retrato (900×1200). Na rodada 19 foi
     ele que caiu na faixa larga para fechar o buraco, e uma faixa 16:9
     mostra 42% da altura de uma foto 3:4: o rádio, que ocupa a metade
     de baixo do quadro, quase sumia. Agora a fachada (paisagem, 4:3)
     é que vira faixa — corte pequeno e no lugar certo — e o rádio volta
     para uma coluna 3:4, que é a proporção nativa dele: corte zero.
     `order` só reordena o desenho; a legenda anda junto com a figura,
     e no desktop (3 colunas, todas 3:4) nada disso vale. */
  .strip--casa figure:nth-child(3){ order:1; grid-column:1 / -1 }
  .strip--casa figure:nth-child(3) .photo{ aspect-ratio:16/9 }
}

/* -- 5. vãos na galeria "A casa por dentro" --------------------
   `grid-auto-rows:1fr` iguala TODAS as linhas à mais alta. No
   desktop isso é o que faz a foto grande de 2×2 fechar com as
   vizinhas; no celular, onde ela vira uma faixa 3:2 de 343px de
   altura, as linhas seguintes herdavam 343px para fotos quadradas
   de 163px — 180px de marinho vazio por linha, quatro vezes. No
   celular a linha passa a valer o que a foto ocupa. */
@media (max-width:760px){
  .gal{ grid-auto-rows:auto }
  /* a 6ª foto também abria duas colunas (regra herdada do breakpoint
     de 1100). Em duas colunas isso dá 11 células para 9 fotos: sobra
     uma vazia no fim e a 6ª vira um quadrado de 343px no meio da
     grade. Só a primeira abre; as oito seguintes fecham 4 linhas
     exatas, sem buraco por construção. */
  .gal .photo:nth-child(6){ grid-column:span 1 }
}

/* -- 6. o dado da região era uma pílula ------------------------
   Em três linhas de texto o raio de pílula deixa de ser forma e
   vira deformação: as laterais comem o começo e o fim das linhas
   do meio. Vira cartão, como o da diária na seção de reserva. */
.faixa{ border-radius:var(--r-card) }
@media (max-width:760px){
  .faixa{
    flex-direction:column; align-items:flex-start; text-align:left;
    gap:.85rem; padding:clamp(1.2rem,5vw,1.6rem);
  }
  .faixa--coluna{ flex-direction:row }   /* já é cartão e já cabe */
}

/* -- 7. hero apertada ------------------------------------------
   A gravura entra inteira (opção A, aprovada) e ocupa só 150px de
   altura no celular, então o hero inteiro é o bloco de texto: com
   20px embaixo, o botão ficava encostado na arte. */
@media (max-width:760px){
  .hero__content{
    padding-top:clamp(5.25rem,19vw,7.5rem);
    padding-bottom:clamp(2.25rem,7vw,3rem);
  }
  .hero__cta{ margin-top:clamp(1.8rem,6vw,2.4rem) }
}

/* -- 8. respiro entre blocos dentro da seção -------------------
   O que separa seção de seção subiu no token; estes são os vãos
   INTERNOS que ficaram curtos junto — legenda de foto colada na
   foto seguinte, cabeça de seção colada no primeiro bloco. */
@media (max-width:760px){
  .strip{ gap:clamp(1.4rem,5vw,1.8rem) }
  .strip figcaption{ margin-top:.7em }
  .head + *{ margin-top:var(--space-block) }
  .menus{ gap:clamp(1.25rem,4vw,1.6rem) }
}

/* -- 9. o mesmo buraco, no tablet ------------------------------
   Entre 761 e 1100 os três pontos do entorno caem em duas colunas
   e o terceiro fica sozinho, com uma célula vazia do lado. Como
   são blocos de texto (não têm foto para cortar), o que sobra abre
   a linha inteira em vez de deixar o vão. */
@media (min-width:761px) and (max-width:1100px){
  .perto > :last-child:nth-child(odd){ grid-column:1 / -1 }
}

/* -- 10. aviso de cookies --------------------------------------
   Nasce e morre com a primeira escolha do visitante (o JS remove
   o nó). Mora acima da `.dock` — no celular a barra fixa de
   reserva ocupa o mesmo rodapé, e cobrir o CTA seria pagar em
   conversão o preço de um aviso legal. O JS mede a altura e
   publica em `--aviso-h`; a dock sobe por essa medida. */
.aviso{
  position:fixed; inset-inline:0; bottom:0; z-index:60;
  display:flex; flex-wrap:wrap; align-items:center; gap:.85rem 1.5rem;
  padding:.9rem clamp(1rem,4vw,2.5rem)
    calc(.9rem + env(safe-area-inset-bottom, 0px));
  background:rgb(9 27 82 / .96); backdrop-filter:blur(10px);
  border-top:1px solid var(--rule-invert);
  font-family:var(--sans); letter-spacing:0; line-height:1.5;
  font-size:clamp(.8125rem,.9vw,.95rem);
  color:var(--text-mute-inv);
}
.aviso p{ flex:1 1 24rem; margin:0; max-width:70ch }
.aviso a{ color:rgb(245 239 233 / .9); text-decoration:underline;
  text-underline-offset:3px }
.aviso__acoes{ display:flex; gap:.6rem; flex:0 0 auto }
/* O `.btn` do sistema é grande demais para uma barra de aviso:
   aqui ele volta ao tamanho do texto e ao padding de controle. */
.aviso .btn{ font-size:inherit; padding:.6rem 1.25rem }
.aviso .btn--vazio{ background:transparent; color:var(--text-invert);
  box-shadow:inset 0 0 0 1.5px var(--rule-invert) }
.aviso .btn--vazio:hover{ background:var(--cream); color:var(--navy);
  transform:translateY(-2px); box-shadow:inset 0 0 0 1.5px var(--cream) }
body.tem-aviso .dock{ bottom:var(--aviso-h, 0px) }

@media (max-width:600px){
  .aviso{ gap:.75rem }
  .aviso p{ flex-basis:100% }
  .aviso__acoes{ width:100% }
  .aviso__acoes .btn{ flex:1 }
}