/* Forum e Hanken Grotesk, licenca SIL Open Font License 1.1, servidos do proprio dominio */
@font-face{font-family:'Forum';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fontes/forum-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Forum';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fontes/forum-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 500;font-display:swap;src:url(/assets/fontes/hankengrotesk-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 500;font-display:swap;src:url(/assets/fontes/hankengrotesk-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
  :root {
    --preto:#141313; --porcelana:#E7E3DE; --couro:#A9662F; --ambar:#D2995F;
    --grafite:#5C544C; --madeira:#382F29;
    --fio:rgba(231,227,222,.16); --fio-forte:rgba(231,227,222,.32);
    --fio-couro:rgba(169,102,47,.45);
    --clara-72:rgba(231,227,222,.72); --clara-55:rgba(231,227,222,.55);
    --display:Forum,"Times New Roman",serif;
    --corpo:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
    --barra:70px; --topo:60px;
  }
  * { box-sizing:border-box; }
  /* o <picture> não desenha nada: quem manda no tamanho é sempre o <img> */
  picture { display:contents; }
  html { scroll-behavior:smooth; }
  body {
    margin:0; background:var(--preto); color:var(--porcelana);
    font-family:var(--corpo); font-weight:300; font-size:16px; line-height:1.72;
    -webkit-font-smoothing:antialiased; padding-bottom:var(--barra);
    overflow-x:hidden;
  }
  img { max-width:100%; display:block; }
  a { color:inherit; }
  /* a margem do site, para que texto e foto compartilhem o mesmo eixo
     mesmo quando a foto sai do container e vai até a borda da tela */
  body { --margem:22px; }
  @media (min-width:1164px) { body { --margem:calc((100% - 1120px) / 2 + 22px); } }
  .env { max-width:1120px; margin:0 auto; padding:0 22px; }
  .estreito { max-width:640px; }
  .env.estreito { max-width:662px; padding-left:0; margin-right:auto; margin-left:var(--margem); }

  /* ---- as seções só de texto, em duas colunas na tela grande --------
     No celular tudo isto é uma coluna só e nada muda. Numa tela de 1400
     a coluna estreita deixava metade da página vazia, e era o que fazia
     o site parecer inacabado no computador: o título fica de um lado, o
     texto do outro, e a linha do olho é a mesma do resto do site. */
  @media (min-width:1080px) {
    .dupla-a > :last-child, .dupla-b > :last-child { margin-bottom:0; }
    .env.estreito.dupla {
      max-width:1120px; margin-left:auto; margin-right:auto; padding:0 22px;
      display:grid; align-items:start; gap:0 72px;
      grid-template-columns:minmax(0,390px) minmax(0,1fr);
    }
    .dupla-a h2 { margin-bottom:0; }
    .dupla-b > :first-child { margin-top:0; }
    .dupla-b p { max-width:52ch; }
  }

  /* luz da casa: focos quentes, fixos, discretos */
  body:before {
    content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(58vw 42vw at 8% 12%, rgba(210,153,95,.075), transparent 62%),
      radial-gradient(50vw 40vw at 96% 74%, rgba(169,102,47,.065), transparent 60%);
  }
  /* grão fotográfico */
  body:after {
    content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
    mix-blend-mode:soft-light;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  header, main, footer, .barra-reserva { position:relative; z-index:2; }

  /* topo */
  header.topo {
    position:sticky; top:0; z-index:40; background:rgba(20,19,19,.9);
    backdrop-filter:blur(10px); border-bottom:1px solid var(--fio);
  }
  .topo-in { display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:14px 22px; max-width:1120px; margin:0 auto; }
  .topo img { width:100px; }
  .topo-fim { display:flex; align-items:center; gap:18px; }
  /* o menu de seções e o botão de reservar são só de tela grande. No
     celular a navegação continua sendo a rolagem, e o reservar segue
     na barra de baixo, que é onde o polegar alcança. */
  /* a especificidade precisa vencer o .btn genérico, que vem mais abaixo */
  nav.menu, .topo-fim .topo-btn { display:none; }
  nav.idiomas { display:flex; gap:2px; }
  nav.idiomas a {
    color:var(--clara-55); text-decoration:none; font-family:var(--corpo);
    font-size:11px; letter-spacing:.18em; text-transform:uppercase;
    padding:7px 9px; font-weight:400; transition:color .2s;
  }
  nav.idiomas a[aria-current="true"] { color:var(--ambar); }
  nav.idiomas a:hover { color:var(--porcelana); }
  a:focus-visible, summary:focus-visible, .btn:focus-visible, button:focus-visible, input:focus-visible {
    outline:2px solid var(--ambar); outline-offset:3px;
  }

  /* ---- o topo na tela grande ----------------------------------------
     No computador o reservar sai da barra de baixo e sobe para o topo,
     junto de um menu das seções. Quem chega pelo computador lê a página
     inteira antes de decidir, e o botão lá embaixo ficava longe demais
     do olho. No celular nada disto muda. */
  @media (min-width:860px) {
    :root { --barra:0px; --topo:70px; }
    body { padding-bottom:0; }
    .topo-in { padding:11px 22px; gap:28px; }
    nav.menu { display:flex; gap:26px; margin-left:8px; }
    nav.menu a {
      color:var(--clara-72); text-decoration:none; font-size:12.5px;
      letter-spacing:.03em; padding:6px 0; position:relative; transition:color .2s;
    }
    nav.menu a:after {
      content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
      background:var(--ambar); transition:right .28s cubic-bezier(.2,.6,.2,1);
    }
    nav.menu a:hover { color:var(--porcelana); }
    nav.menu a:hover:after { right:0; }
    .topo-fim .topo-btn { display:inline-block; padding:12px 22px; font-size:10.5px; }
  }
  /* entre 860 e 1080 o menu não cabe junto do resto sem apertar */
  @media (min-width:860px) and (max-width:1079px) { nav.menu { display:none; } }

  /* capa */
  .capa { position:relative; min-height:calc(100svh - var(--topo) - var(--barra));
    display:flex; align-items:flex-end; padding:0; border:0; overflow:hidden; }
  .capa-foto { position:absolute; inset:0; }
  .capa-foto img { width:100%; height:100%; object-fit:cover; object-position:52% 42%; opacity:.78;
    animation:respiro 26s ease-in-out infinite alternate; }
  @keyframes respiro { from { transform:scale(1); } to { transform:scale(1.06); } }
  .capa-foto:after { content:""; position:absolute; inset:0;
    background:linear-gradient(178deg, rgba(20,19,19,.55) 0%, rgba(20,19,19,.18) 34%, rgba(20,19,19,.86) 78%, #141313 100%); }
  /* capa curta, para as páginas internas */
  .capa.curta { min-height:min(62svh, 520px); }
  .capa.curta .capa-foto img { object-position:center 28%; }
  /* na tela grande a capa usa outra foto, já recortada deitada: o
     enquadramento vem pronto do arquivo e o navegador não corta mais nada */
  @media (min-width:860px) {
    .capa-foto img { object-position:center center; }
    /* a foto grande tem muito desenho embaixo, onde o título entra;
       o escurecimento precisa ser mais firme do que no celular */
    .capa-foto:after {
      background:linear-gradient(178deg, rgba(20,19,19,.5) 0%, rgba(20,19,19,.1) 26%,
        rgba(20,19,19,.62) 62%, rgba(20,19,19,.93) 86%, #141313 100%);
    }
    .capa.curta { min-height:min(86svh, 780px); }
    .capa.curta .capa-foto img { object-position:center center; }
    .capa-txt { padding:0 22px 64px; }
  }
  .capa.curta h1 { font-size:clamp(34px,7.4vw,56px); margin-top:6px; }
  .capa.curta .kicker { color:var(--ambar); }
  .capa-txt { position:relative; padding:0 22px 56px; max-width:1120px; margin:0 auto; width:100%; }
  .capa-txt > * { animation:sobe .9s cubic-bezier(.2,.65,.2,1) both; }
  .capa-txt > *:nth-child(2) { animation-delay:.14s; }
  .capa-txt > *:nth-child(3) { animation-delay:.26s; }
  @keyframes sobe { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
  h1 { font-family:var(--display); font-weight:400; font-size:clamp(38px,9.4vw,68px);
       line-height:1.02; margin:0; text-wrap:balance; }
  .lead { font-size:clamp(16px,3.9vw,19px); color:var(--clara-72); margin:20px 0 0; max-width:33em; }
  .capa-meta { font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--clara-55); margin:28px 0 0; display:flex; align-items:flex-start; gap:12px; }
  .capa-meta:before { content:""; width:26px; height:1px; background:var(--couro);
    flex:none; margin-top:.72em; }

  /* botões */
  /* fundo âmbar com texto Preto Tarso: 7,47:1. O couro fica nos filetes,
     como manda o manual, e não em área grande. */
  .btn { display:inline-block; background:var(--ambar); color:var(--preto); text-decoration:none;
    font-size:11.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
    padding:16px 30px; border:1px solid var(--ambar); transition:background .25s, border-color .25s, color .25s; }
  .btn:hover { background:#E0B183; border-color:#E0B183; }
  .btn.linha { background:transparent; color:var(--porcelana); border-color:var(--fio-forte); }
  .btn.linha:hover { background:transparent; border-color:var(--ambar); color:var(--ambar); }

  /* seções */
  /* o topo é fixo, então a seção precisa parar abaixo dele quando o
     menu leva até ela */
  section[id] { scroll-margin-top:var(--topo); }
  section { padding:88px 0; }
  @media (min-width:1080px) { section { padding:120px 0; } }
  .risco { border-top:1px solid var(--fio); }
  .kicker { font-size:10px; letter-spacing:.36em; text-transform:uppercase; color:var(--ambar);
    font-weight:500; margin:0 0 18px; display:flex; align-items:center; gap:12px; }
  .kicker:before { content:""; width:22px; height:1px; background:var(--couro); flex:none; }
  h2 { font-family:var(--display); font-weight:400; font-size:clamp(29px,6.2vw,44px);
    line-height:1.12; margin:0 0 20px; text-wrap:balance; }
  section p { margin:0 0 16px; color:var(--clara-72); max-width:58ch; }
  section p.forte { color:var(--porcelana); }

  /* revelação ao rolar */
  .rv { opacity:0; transform:translateY(18px); }
  .rv.visivel { opacity:1; transform:none;
    transition:opacity .85s cubic-bezier(.2,.6,.2,1), transform .85s cubic-bezier(.2,.6,.2,1); }

  /* faixa de foto de ponta a ponta */
  .faixa { position:relative; height:min(72vh,600px); overflow:hidden; padding:0; }
  .faixa.grande { height:min(88vh,780px); }
  .faixa img { width:100%; height:100%; object-fit:cover; opacity:.9;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
            mask-image:linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%); }
  .faixa:after { content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(20,19,19,.28) 0%, transparent 34%, rgba(20,19,19,.72) 100%); }
  .faixa figcaption { position:absolute; left:0; right:0; bottom:0; z-index:2;
    padding:0 22px 40px; max-width:1120px; margin:0 auto; }
  .faixa .frase { font-family:var(--display); font-size:clamp(21px,4.6vw,31px);
    line-height:1.28; margin:0; max-width:19ch; }
  .faixa .credito { font-size:10px; letter-spacing:.3em; text-transform:uppercase;
    color:var(--clara-55); margin:14px 0 0; }

  /* valores, informados sem destaque */
  .valores { margin:30px 0 0; }
  .valores div { padding:15px 0; border-top:1px solid var(--fio); display:grid; gap:2px;
    grid-template-columns:1fr; }
  @media (min-width:600px) { .valores div { grid-template-columns:200px 1fr; gap:20px; align-items:baseline; } }
  .valores div:last-child { border-bottom:1px solid var(--fio); }
  .valores dt { font-family:var(--display); font-size:19px; }
  .valores dd { margin:0; color:var(--clara-72); font-size:15px; }
  .valores dd b { font-weight:400; color:var(--porcelana); font-variant-numeric:tabular-nums; }
  .nota-valores { font-size:13.5px; color:var(--clara-55); margin:14px 0 0; }

  /* temporada */
  .temporada { position:relative; background:var(--madeira); overflow:hidden; }
  .temporada .fundo { position:absolute; inset:0; }
  .temporada .fundo img { width:100%; height:100%; object-fit:cover; opacity:.16; }
  .temporada .fundo:after { content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(56,47,41,.96) 0%, rgba(56,47,41,.7) 60%, rgba(56,47,41,.5) 100%); }
  .temporada .env { position:relative; }
  .temporada h2 { max-width:16ch; }
  /* na tela grande sobra espaço à direita, e a foto do salão pode
     aparecer de verdade em vez de ficar como uma mancha marrom */
  @media (min-width:1080px) {
    .temporada .fundo img { opacity:.34; }
    .temporada .fundo:after {
      background:linear-gradient(90deg, rgba(56,47,41,.97) 0%, rgba(56,47,41,.9) 34%,
        rgba(56,47,41,.42) 72%, rgba(56,47,41,.24) 100%);
    }
  }

  /* formulário do aviso de temporada */
  .oculto { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .forma { display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
  .forma input {
    flex:1 1 240px; min-width:0; background:transparent; color:var(--porcelana);
    border:1px solid var(--fio-forte); padding:15px 16px; font-family:var(--corpo);
    font-size:15px; font-weight:300; border-radius:0;
  }
  .forma input::placeholder { color:var(--clara-55); }
  .forma input:focus { outline:none; border-color:var(--ambar); }
  .forma .btn { flex:0 0 auto; border:1px solid var(--ambar); cursor:pointer; }
  .forma .btn[disabled] { opacity:.5; cursor:default; }
  .recado { min-height:1.4em; margin:14px 0 0; font-size:14.5px; color:var(--ambar); }
  .recado.erro { color:#E08B6B; }

  /* tira de pratos, rola para o lado */
  .tira-caixa { position:relative; margin-top:38px; }
  .tira { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:0 22px; scroll-padding-left:22px; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; }
  .tira::-webkit-scrollbar { display:none; }
  .tira figure { margin:0; flex:0 0 auto; width:min(72vw,300px); scroll-snap-align:start; }
  /* height:auto é o que faz a proporção 2:3 valer. Sem ele o atributo
     height do HTML manda na altura e a foto sai cortada nas laterais. */
  .tira img { width:100%; height:auto; aspect-ratio:2/3; object-fit:cover;
    object-position:center; border:1px solid var(--fio); }
  .tira-setas { display:none; }
  @media (min-width:860px) {
    .tira { padding:0 max(22px, calc((100% - 1120px) / 2 + 22px));
      scroll-padding-left:max(22px, calc((100% - 1120px) / 2 + 22px)); }
    .tira-setas { display:flex; gap:8px; justify-content:flex-end;
      max-width:1120px; margin:20px auto 0; padding:0 22px; }
    .seta { background:none; border:1px solid var(--fio-forte); color:var(--porcelana);
      width:44px; height:44px; cursor:pointer; font-family:var(--corpo); font-size:20px;
      line-height:1; transition:border-color .2s, color .2s; }
    .seta:hover { border-color:var(--ambar); color:var(--ambar); }
  }

  /* os percursos usam o mesmo desenho dos valores dos menus */
  .percursos { margin:30px 0 0; }

  /* ---- texto e foto lado a lado, com a foto saindo pela borda ----
     A foto não fica emoldurada: ela sangra até o limite da tela e
     se dissolve no fundo pelo lado que encosta no texto. */
  .par { display:grid; gap:30px; grid-template-columns:1fr; }
  .par-texto { padding:0 22px; }
  @media (min-width:860px) {
    /* Quatro colunas: duas sarjetas elásticas e as duas metades do
       conteúdo. As sarjetas são 1fr cada, então o miolo fica centrado
       exatamente como o .env, e o texto nasce no mesmo eixo do resto
       do site. A foto ocupa uma metade e segue até a borda da tela. */
    .par { gap:0; align-items:center;
      grid-template-columns:minmax(22px,1fr) minmax(0,538px) minmax(0,538px) minmax(22px,1fr); }
    /* A linha precisa ser dita. Quando o texto fica à direita e a foto à
       esquerda, o navegador não volta atrás para encaixar a foto ao lado
       do texto: joga a foto para a linha de baixo, e a seção se parte em
       duas. Era o que quebrava para beber, a visita e os eventos. */
    .par-texto, .par > .foto { grid-row:1; }
    .par-texto { grid-column:2 / 3; padding:0 56px 0 0; }
    .par > .foto { grid-column:3 / 5; }
    .par.invertido .par-texto { grid-column:3 / 4; padding:0 0 0 56px; }
    .par.invertido > .foto { grid-column:1 / 3; }
  }

  .foto { position:relative; overflow:hidden; }
  .foto img, .foto video { width:100%; height:100%; display:block; object-fit:cover;
    background:var(--madeira); }
  .foto.media img, .foto.media video { height:min(64vh, 520px); }
  /* Na tela grande a altura sai da proporção, e não de um número fixo.
     A foto aparece exatamente com o recorte que foi cortado no arquivo,
     sem o navegador cortar de novo, que era o que decepava a cabeça do
     chef. O teto de altura só entra em monitor muito largo. */
  @media (min-width:860px) {
    .foto.media img, .foto.media video {
      height:auto; aspect-ratio:0.878; max-height:880px;
      object-position:center var(--pos, 50%);
    }
  }

  /* o esmaecimento: no celular a foto se dissolve em cima e embaixo;
     na tela grande, pelo lado em que encosta no texto */
  .foto.esmaece img, .foto.esmaece video {
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image:linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
  @media (min-width:860px) {
    /* funde-esq: a foto se dissolve pela borda esquerda, que é a que
       encosta no texto quando ela sangra para a direita. */
    .foto.esmaece.funde-esq img, .foto.esmaece.funde-esq video {
      -webkit-mask-image:linear-gradient(to right, transparent 0, #000 18%);
              mask-image:linear-gradient(to right, transparent 0, #000 18%);
    }
    .foto.esmaece.funde-dir img, .foto.esmaece.funde-dir video {
      -webkit-mask-image:linear-gradient(to left, transparent 0, #000 18%);
              mask-image:linear-gradient(to left, transparent 0, #000 18%);
    }
    /* dois véus ao mesmo tempo: o do lado que encosta no texto e um bem
       leve em cima e embaixo, para a foto não terminar em régua. Só onde
       o navegador sabe cruzar duas máscaras; nos outros fica só o lateral. */
    @supports (mask-composite:intersect) {
      .foto.esmaece.funde-esq img, .foto.esmaece.funde-esq video {
        -webkit-mask-image:linear-gradient(to right, transparent 0, #000 18%),
                           linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
                mask-image:linear-gradient(to right, transparent 0, #000 18%),
                           linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
        -webkit-mask-composite:source-in; mask-composite:intersect;
      }
      .foto.esmaece.funde-dir img, .foto.esmaece.funde-dir video {
        -webkit-mask-image:linear-gradient(to left, transparent 0, #000 18%),
                           linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
                mask-image:linear-gradient(to left, transparent 0, #000 18%),
                           linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
        -webkit-mask-composite:source-in; mask-composite:intersect;
      }
    }
  }

  /* a foto pequena, tratada como detalhe e não como bloco */
  .foto.pequena { max-width:280px; margin:34px 0 0 22px; }
  .foto.pequena img { height:auto; aspect-ratio:2 / 3; }
  @media (min-width:860px) { .foto.pequena { max-width:360px; margin:0; justify-self:center; } }

  /* a foto entrando: assenta, em vez de subir */
  .rv-foto { opacity:0; }
  .rv-foto img, .rv-foto video { transform:scale(1.06); }
  .rv-foto.visivel { opacity:1; transition:opacity 1s ease; }
  .rv-foto.visivel img, .rv-foto.visivel video {
    transform:none; transition:transform 1.5s cubic-bezier(.2,.6,.2,1); }

  /* reconhecimento */
  .premios { font-size:17px; color:var(--porcelana); max-width:52ch; }
  .imprensa { margin:34px 0 0; }
  .imprensa a { display:block; padding:17px 0; border-top:1px solid var(--fio);
    text-decoration:none; transition:padding-left .25s; }
  .imprensa a:last-child { border-bottom:1px solid var(--fio); }
  .imprensa a:hover { padding-left:10px; }
  .imprensa .veiculo { font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--ambar); }
  .imprensa .chamada { font-family:var(--display); font-size:20px; margin-top:6px; display:block; }
  .imprensa a:hover .chamada { color:var(--ambar); }

  /* visita */
  .visita { margin:28px 0 0; }
  .visita div { padding:17px 0; border-top:1px solid var(--fio); display:grid; gap:4px;
    grid-template-columns:1fr; }
  @media (min-width:600px) { .visita div { grid-template-columns:150px 1fr; gap:22px; } }
  .visita div:last-child { border-bottom:1px solid var(--fio); }
  .visita dt { font-size:10px; letter-spacing:.26em; text-transform:uppercase;
    color:var(--clara-55); padding-top:6px; }
  .visita dd { margin:0; color:var(--porcelana); }

  /* perguntas */
  details { border-top:1px solid var(--fio); }
  details:last-of-type { border-bottom:1px solid var(--fio); }
  summary { cursor:pointer; list-style:none; padding:18px 0; display:flex; gap:15px;
    align-items:baseline; font-size:16.5px; transition:color .2s; }
  summary:hover { color:var(--ambar); }
  summary::-webkit-details-marker { display:none; }
  summary:before { content:"+"; color:var(--couro); font-size:17px; line-height:1; flex:none; }
  details[open] summary:before { content:"–"; }
  details p { margin:0 0 18px 30px; color:var(--clara-72); font-size:15.5px; }

  /* rodapé */
  footer { border-top:1px solid var(--fio); padding:60px 0 44px; }
  .rodape { display:grid; gap:30px; grid-template-columns:1fr; }
  @media (min-width:780px) { .rodape { grid-template-columns:1.3fr 1fr 1fr; } }
  footer .logo-rod { width:116px; margin-bottom:16px; }
  footer h3 { font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--clara-55);
    margin:0 0 12px; font-weight:500; }
  footer a { color:var(--clara-72); text-decoration:none; display:block; padding:4px 0; transition:color .2s; }
  footer a:hover { color:var(--ambar); }
  .marca-fim { display:block; width:24px; margin:48px auto 0; opacity:.45; }
  .assinatura { margin-top:22px; padding-top:22px; border-top:1px solid var(--fio);
    font-size:11.5px; color:var(--clara-55); letter-spacing:.08em; text-align:center; }

  /* barra fixa */
  .barra-reserva {
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:rgba(20,19,19,.96); backdrop-filter:blur(12px);
    border-top:1px solid var(--fio-couro); padding:11px 22px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
  }
  .barra-reserva .info { font-size:11.5px; color:var(--clara-55); letter-spacing:.14em;
    text-transform:uppercase; }
  .barra-reserva .btn { padding:14px 26px; }
  @media (max-width:580px) {
    .barra-reserva .info { display:none; }
    .barra-reserva .btn { width:100%; text-align:center; }
  }
  /* no computador o reservar já está no topo, e esta barra sai de cena.
     A regra mora aqui, depois do display:flex acima, senão perde para ele. */
  @media (min-width:860px) { .barra-reserva { display:none; } }

  @media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *, *:before, *:after { transition:none !important; animation:none !important; }
    .rv, .rv-foto { opacity:1; transform:none; }
    .rv-foto img, .rv-foto video { transform:none; }
  }