/* ═══════════════════════════════════════════════════════════
   VIBES CAFÉ — protótipo institucional
   Escrito mobile-first: quem procura o Vibes está na rua,
   pós-praia, decidindo agora. O caminho até "como chegar"
   tem que caber num polegar.
   Paleta OFICIAL da marca, conforme o manual enviado pela cliente
   em 31/08/2026: turquesa #03989E, areia #EBDCAB, verde #DBF6B7.
   Os tons escuros foram realinhados ao mesmo matiz (H=182) do
   turquesa dela, pra família de cor ficar coerente.
   --mar-texto é o MESMO turquesa escurecido só o bastante pra
   texto pequeno passar em contraste (4,6:1). Não trocar por #03989E
   em texto: a cor pura dá 3,5:1 e reprova em acessibilidade.
   ═══════════════════════════════════════════════════════════ */

:root{
  --mar:          #03989E;
  --mar-texto:    #038287;
  --mar-escuro:   #0A3F41;
  --mar-noite:    #062E2F;
  --espuma:       #DBEBEC;
  --mar-claro:    #8FE0E3;
  --mar-medio:    #6FCDD0;
  --veu:          4,35,36;
  --areia:        #EBDCAB;
  --areia-clara:  #F5EEDC;
  --verde:        #DBF6B7;
  --luz:          #F1F4F1;
  --luz-2:        #E7EDEA;
  --madeira:      #2A1C15;
  --tinta:        #16201E;
  --tinta-suave:  #4D5C58;
  --sol:          #E0A034;
  --zap:          #25D366;
  --branco:       #FFFFFF;

  --display: "Cardo", Georgia, "Times New Roman", serif;
  --corpo:   "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --largura: 1180px;
  --gutter:  clamp(1.15rem, 5vw, 4rem);
  --raio:    3px;
  --barra-h: 64px;

  --t-rapida: .25s cubic-bezier(.4,0,.2,1);
  --t-suave:  .6s cubic-bezier(.22,.61,.36,1);
}

/* ── reset ─────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--luz);
  color:var(--tinta);
  font-family:var(--corpo);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }
figure{ margin:0; }
blockquote{ margin:0; }
button{ font:inherit; }

:focus-visible{ outline:2px solid var(--mar); outline-offset:3px; }

.pular{
  position:absolute; left:-999px; top:0; z-index:300;
  background:var(--mar); color:#fff; padding:.75rem 1.25rem;
  font-family:var(--corpo); font-size:.9rem;
}
.pular:focus{ left:0; }

.envelope{ width:100%; max-width:var(--largura); margin-inline:auto; padding-inline:var(--gutter); }

/* ── tipografia de apoio ───────────────────────────────── */
.sobrancelha{
  font-family:var(--corpo);
  font-size:.7rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--mar-texto);
  margin-bottom:1rem;
}
.secao__titulo{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(2.1rem, 1.2rem + 3.4vw, 3.75rem);
  line-height:1.04; letter-spacing:-.022em;
}
.secao__titulo em{ font-style:italic; }
.secao__apoio{
  margin-top:1.1rem; max-width:48ch;
  color:var(--tinta-suave); font-size:1.04rem;
}
.secao__cabeca{ margin-bottom:clamp(2.25rem,5vw,4rem); max-width:52ch; }
.secao__cabeca--claro .sobrancelha{ color:var(--mar-medio); }
.secao__cabeca--claro .secao__titulo{ color:var(--branco); }
.secao__cabeca--claro .secao__apoio{ color:rgba(255,255,255,.7); }

/* ── botões ────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:44px;
  font-family:var(--corpo); font-size:.85rem; font-weight:600; letter-spacing:.02em;
  padding:.7rem 1.25rem;
  border:1px solid transparent; border-radius:var(--raio);
  text-decoration:none; cursor:pointer;
  transition:background var(--t-rapida), color var(--t-rapida), border-color var(--t-rapida);
}
.btn--zap{ background:var(--mar); color:#fff; }
.btn--zap:hover{ background:#0B7B7F; }

/* ações de navegação: sempre o mesmo par, em toda a página */
.btn--mapa{ background:var(--mar-escuro); color:#fff; }
.btn--mapa:hover{ background:var(--mar); }
.btn--waze{ background:#1B93BE; color:#fff; }
.btn--waze:hover{ background:#1580A6; }
.btn--zap2{ background:transparent; color:var(--tinta); border-color:rgba(22,32,30,.24); }
.btn--zap2:hover{ background:var(--zap); border-color:var(--zap); color:#fff; }

/* ═══════════ CABEÇALHO ═══════════ */
.topo{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding-block:.9rem;
  transition:background var(--t-suave), box-shadow var(--t-suave), padding var(--t-suave);
}
.topo__interno{
  width:100%; max-width:var(--largura); margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; gap:1.5rem;
}
.topo__marca{ flex-shrink:0; line-height:0; }
.topo__marca img{ width:clamp(104px,12vw,140px); height:auto; transition:filter var(--t-suave); }
.topo__nav{ margin-left:auto; display:flex; gap:1.85rem; }
.topo__nav a{
  font-size:.82rem; font-weight:500; letter-spacing:.02em;
  color:#fff; text-decoration:none; padding-block:.35rem;
  position:relative; transition:color var(--t-rapida);
}
.topo__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-rapida);
}
.topo__nav a:hover::after{ transform:scaleX(1); }
.topo__zap{ flex-shrink:0; min-height:38px; padding:.55rem 1.05rem; font-size:.79rem; }
.topo__menu{ display:none; }
.menu-mobile{ display:none; }
.menu-mobile[hidden]{ display:none; }

.topo.rolado{
  background:rgba(241,244,241,.95);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(22,32,30,.09);
  padding-block:.6rem;
}
/* recolore o logo branco para o turquesa da marca quando o cabeçalho fica claro.
   Os números foram MEDIDOS (canvas + leitura de pixel), não estimados: produzem
   rgb(0,151,158), que é o #03989E do manual. O filtro anterior estava calibrado
   para o turquesa velho e, com a paleta nova, pintava o logo de rgb(6,196,224) —
   um ciano que não existe na marca. ⚠️ Este filtro NÃO acompanha o token sozinho:
   se a cor da marca mudar, medir de novo. */
.topo.rolado .topo__marca img{ filter:invert(42%) sepia(78%) saturate(850%) hue-rotate(135deg) brightness(70%); }
.topo.rolado .topo__nav a{ color:var(--tinta); }

/* ═══════════ HERO COM VÍDEO ═══════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding:6rem 0 2rem;
  isolation:isolate; overflow:hidden;
}
.hero__midia{ position:absolute; inset:0; z-index:-2; background:var(--mar-noite); }
.hero__video{ width:100%; height:100%; object-fit:cover; object-position:center; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top,  rgba(var(--veu),.92) 0%,  rgba(var(--veu),.66) 32%, rgba(var(--veu),.16) 66%, rgba(var(--veu),.42) 100%),
    linear-gradient(100deg,  rgba(var(--veu),.62) 0%,  rgba(var(--veu),.24) 54%, rgba(var(--veu),.04) 84%);
}
.hero__conteudo{
  width:100%; max-width:var(--largura); margin-inline:auto;
  padding-inline:var(--gutter); color:#fff;
}
.hero .sobrancelha{ color:var(--mar-claro); margin-bottom:.8rem; }
.hero__titulo{
  font-family:var(--display); font-weight:300;
  font-size:clamp(2.7rem, 1.4rem + 6.4vw, 5.6rem);
  line-height:.96; letter-spacing:-.032em;
  margin-bottom:1rem; max-width:14ch;
  text-shadow:0 2px 30px rgba(var(--veu),.55);
}
.hero__titulo em{ font-style:italic; color:var(--mar-claro); }
.hero__texto{
  max-width:40ch; font-size:clamp(1rem,.95rem + .35vw,1.15rem);
  color:rgba(255,255,255,.94); margin-bottom:1.75rem;
  text-shadow:0 1px 16px rgba(var(--veu),.6);
}

/* ── escolha da casa, dentro do hero ───────────────────── */
.escolha{
  background:rgba(var(--veu),.5);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:6px;
  padding:clamp(1rem,2.5vw,1.4rem);
  max-width:660px;
}
.escolha__titulo{
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.72); margin-bottom:.9rem;
}
.escolha__cartoes{ display:grid; gap:.6rem; }

.casa-atalho{
  display:flex; flex-direction:column; align-items:stretch; gap:.7rem;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);
  border-radius:4px;
  padding:.7rem .75rem .7rem 1rem;
  transition:background var(--t-rapida), border-color var(--t-rapida);
}
.casa-atalho:hover{ background:rgba(255,255,255,.14); border-color:rgba(143,224,227,.45); }
.casa-atalho__texto{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.casa-atalho__nome{ font-family:var(--display); font-size:1.22rem; line-height:1.15; color:#fff; }
.casa-atalho__end{ font-size:.8rem; color:rgba(255,255,255,.68); line-height:1.3; }
.casa-atalho__acoes{ display:grid; grid-template-columns:1fr 1fr; gap:.45rem; }

.pino{
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  min-height:44px; padding:.5rem .8rem;
  border-radius:3px; text-decoration:none;
  font-size:.78rem; font-weight:700; letter-spacing:.03em;
  transition:background var(--t-rapida), transform var(--t-rapida);
}
.pino:active{ transform:scale(.97); }
.pino--maps{ background:#fff; color:var(--mar-noite); }
.pino--maps:hover{ background:var(--espuma); }
.pino--waze{ background:#1B93BE; color:#fff; }
.pino--waze:hover{ background:#178AB3; }

.escolha__mais{
  display:inline-block; margin-top:.9rem;
  font-size:.82rem; color:rgba(255,255,255,.72);
  text-decoration:underline; text-underline-offset:3px;
}
.escolha__mais:hover{ color:var(--mar-claro); }

/* ═══════════ FAIXA DE FATOS ═══════════ */
.fatos{ background:var(--mar-noite); color:#fff; padding-block:clamp(1.75rem,3.5vw,2.75rem); }
.fatos__grade{
  width:100%; max-width:var(--largura); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:1fr 1fr; gap:1.35rem 1rem;
}
.fato{ display:flex; flex-direction:column; gap:.25rem; position:relative; }
.fato__valor{
  font-family:var(--display); font-size:clamp(1.4rem,1.1rem + .9vw,1.9rem);
  font-weight:400; line-height:1.1; letter-spacing:-.01em;
  display:flex; align-items:center; gap:.4rem;
}
.estrela{ color:var(--sol); }
.fato__rotulo{
  font-size:.72rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

/* ═══════════ AS DUAS CASAS ═══════════ */
.casas{ background:var(--mar-escuro); color:#fff; padding-block:clamp(4rem,9vw,7.5rem); }
.casas__grade{ display:grid; gap:clamp(1.5rem,3.5vw,2.5rem); }
.casa{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.11);
  border-radius:5px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color var(--t-rapida), background var(--t-rapida);
}
.casa:hover{ border-color:rgba(111,205,208,.4); background:rgba(255,255,255,.075); }
.casa__foto{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.casa__foto img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.22,.61,.36,1); }
.casa:hover .casa__foto img{ transform:scale(1.05); }
.casa__etiqueta{
  position:absolute; left:.9rem; top:.9rem;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:var(--mar-noite);
  font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:.4rem .75rem; border-radius:99px;
}
.casa__corpo{
  padding:clamp(1.4rem,3.5vw,2.15rem);
  display:flex; flex-direction:column; gap:.7rem; flex:1;
}
.casa__corpo h3{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.65rem,1.3rem + 1.1vw,2.15rem); line-height:1.1;
}
.casa__resumo{ color:rgba(255,255,255,.78); font-size:.98rem; }
.casa__resumo em{ font-style:normal; color:var(--mar-claro); font-weight:600; }
.casa__endereco{
  display:flex; align-items:flex-start; gap:.45rem;
  color:rgba(255,255,255,.9); font-size:.95rem; font-weight:500;
}
.casa__endereco svg{ color:var(--mar-medio); flex-shrink:0; margin-top:.28rem; }
.casa__horario{ color:rgba(255,255,255,.5); font-size:.88rem; }
.casa__acoes{
  display:grid; grid-template-columns:1fr 1fr; gap:.5rem;
  margin-top:auto; padding-top:.6rem;
}
.casa__acoes .btn--zap2{ grid-column:1 / -1; }
.casas .btn--zap2{ color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.28); }
.casas .btn--zap2:hover{ background:var(--zap); border-color:var(--zap); color:#fff; }

/* ═══════════ NA MESA ═══════════ */
.mesa{ background:var(--luz); padding-block:clamp(4rem,9vw,7.5rem); }
.pratos{ border-top:1px solid rgba(22,32,30,.14); }
.prato{ padding-block:1.35rem; border-bottom:1px solid rgba(22,32,30,.14); }
.prato h3{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.3rem,1.15rem + .6vw,1.65rem);
  line-height:1.15; letter-spacing:-.01em; margin-bottom:.15rem;
}
.prato p{ color:var(--tinta-suave); font-size:.94rem; }
.prato--destaque h3{ color:var(--mar-texto); }
.prato--destaque h3::after{
  content:"mais pedido";
  display:inline-block; vertical-align:middle; margin-left:.65rem;
  font-family:var(--corpo); font-size:.6rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:#fff; background:var(--mar);
  padding:.22rem .5rem; border-radius:99px;
}

.mesa__fotos{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(.55rem,1.4vw,1rem);
  margin-top:clamp(1.5rem,3.5vw,2.25rem);
}
.mesa__fotos figure{ overflow:hidden; aspect-ratio:1/1; border-radius:3px; }
.mesa__fotos img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.22,.61,.36,1); }
.mesa__fotos figure:hover img{ transform:scale(1.06); }

.mesa__nota{
  margin-top:clamp(2rem,5vw,3rem); padding-top:1.4rem;
  border-top:1px solid rgba(22,32,30,.12);
  font-size:.93rem; color:var(--tinta-suave);
}
.mesa__nota a{ color:var(--mar-texto); font-weight:600; text-underline-offset:3px; }

/* ═══════════ O CAFÉ ═══════════ */
.cafe{ background:var(--madeira); color:#fff; display:grid; }
.cafe__foto{ min-height:clamp(320px,58vw,660px); }
.cafe__foto img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.cafe__texto{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2.75rem,7vw,6rem) var(--gutter);
}
.cafe__texto .sobrancelha{ color:var(--areia); }
.cafe__texto .secao__titulo{ color:#fff; margin-bottom:1.35rem; }
.cafe__texto > p{ color:rgba(255,255,255,.74); max-width:44ch; }

.citacao{ margin-top:2.25rem; padding-left:1.3rem; border-left:2px solid rgba(235,220,171,.5); }
.citacao blockquote{
  font-family:var(--display); font-style:italic; font-weight:300;
  font-size:clamp(1.08rem,1rem + .5vw,1.32rem); line-height:1.42; color:var(--areia-clara);
}
.citacao figcaption{
  margin-top:.8rem; font-size:.76rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--areia);
}
.citacao figcaption span{ font-weight:400; letter-spacing:.04em; text-transform:none; opacity:.65; }

/* ═══════════ O LUGAR (galeria) ═══════════ */
.lugar{ background:var(--luz-2); padding-block:clamp(4rem,9vw,7.5rem); overflow:hidden; }
.galeria__trilho{
  display:flex; gap:clamp(.55rem,1.4vw,1rem);
  padding-inline:var(--gutter); padding-bottom:1rem;
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:rgba(22,32,30,.24) transparent;
}
.galeria__trilho figure{
  flex:0 0 74vw; max-width:330px;
  aspect-ratio:3/4; overflow:hidden; border-radius:3px;
  scroll-snap-align:start;
}
.galeria__trilho img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.22,.61,.36,1); }
.galeria__trilho figure:hover img{ transform:scale(1.06); }
.galeria__trilho::-webkit-scrollbar{ height:6px; }
.galeria__trilho::-webkit-scrollbar-thumb{ background:rgba(22,32,30,.22); border-radius:99px; }

/* ═══════════ DEPOIMENTOS ═══════════ */
.vozes{ background:#0C8286; color:#fff; padding-block:clamp(4rem,9vw,7.5rem); }
.vozes .secao__cabeca--claro .sobrancelha{ color:rgba(255,255,255,.78); }
.vozes__grade{ display:grid; gap:clamp(1rem,2.5vw,1.75rem); }
.voz{
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);
  border-radius:4px;
  padding:clamp(1.4rem,3vw,2.1rem);
  display:flex; flex-direction:column;
}
.voz blockquote{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.1rem,1.02rem + .5vw,1.35rem);
  line-height:1.4; color:#fff;
}
.voz blockquote em{ font-style:italic; }
.voz figcaption{
  margin-top:auto; padding-top:1.05rem;
  font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

/* ═══════════ VISITAR ═══════════ */
.visitar{ background:var(--luz); padding-block:clamp(4rem,9vw,7.5rem); }
.visitar__interno{ display:grid; gap:clamp(2.25rem,5vw,4.5rem); align-items:start; }
.visitar__aviso{
  margin-top:1.35rem; padding:.8rem 1.05rem;
  background:var(--espuma); border-left:3px solid var(--mar); border-radius:2px;
  font-size:.93rem; font-weight:500; color:#0B5B5F;
}
.horarios{ margin-top:2.25rem; border-top:1px solid rgba(22,32,30,.14); }
.horarios > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding-block:1.05rem; border-bottom:1px solid rgba(22,32,30,.14);
}
.horarios dt{ font-weight:500; }
.horarios dd{ margin:0; font-family:var(--display); font-size:1.3rem; }

.comodidades{
  margin-top:clamp(2rem,4.5vw,3rem); padding-top:clamp(1.5rem,3.5vw,2rem);
  border-top:1px solid rgba(22,32,30,.14);
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.comodidades li{
  /* o verde do manual (#DBF6B7) entra aqui, na lista de confortos: é o único
     lugar do site onde uma cor clara e positiva cabe sem virar enfeite */
  font-size:.8rem; font-weight:500; padding:.42rem .8rem;
  background:var(--verde); border:1px solid rgba(150,196,110,.45);
  border-radius:99px; color:#33452A;
}

.visitar__contato{ display:flex; flex-direction:column; gap:clamp(1rem,2.5vw,1.4rem); }
.cartao{
  background:var(--branco); border:1px solid rgba(22,32,30,.1);
  border-radius:5px; padding:clamp(1.35rem,3vw,1.9rem);
}
.cartao h3{ font-family:var(--display); font-weight:400; font-size:1.45rem; margin-bottom:1.15rem; }
.linha{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding-block:.9rem; min-height:44px;
  border-top:1px solid rgba(22,32,30,.1);
  text-decoration:none; transition:color var(--t-rapida);
}
.linha:hover{ color:var(--mar-texto); }
.linha__rotulo{ font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-suave); }
.linha__valor{ font-family:var(--display); font-size:1.12rem; }

.destino{ padding-top:1.15rem; border-top:1px solid rgba(22,32,30,.1); }
.destino + .destino{ margin-top:1.15rem; }
.destino__nome{ font-family:var(--display); font-size:1.2rem; line-height:1.2; }
.destino__nome span{
  font-family:var(--corpo); font-size:.64rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--mar-texto);
  margin-left:.5rem; vertical-align:middle;
}
.destino__end{ font-size:.9rem; color:var(--tinta-suave); margin-top:.15rem; }
.destino__acoes{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.85rem; }

/* ═══════════ RODAPÉ ═══════════ */
.rodape{ background:var(--mar-noite); color:#fff; padding-top:clamp(3rem,7vw,6rem); }
.rodape__interno{
  display:grid; grid-template-columns:1fr 1fr; gap:2.25rem;
  padding-bottom:clamp(2.5rem,5vw,4.5rem); align-items:start;
}
.rodape__marca{ grid-column:1 / -1; }
.rodape__marca img{ width:clamp(148px,16vw,190px); height:auto; }
.rodape__tagline{
  margin-top:.65rem; font-size:.68rem; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase; color:rgba(255,255,255,.42);
}
.rodape__nav{ display:flex; flex-direction:column; gap:.65rem; }
.rodape__nav a{ font-size:.9rem; text-decoration:none; color:rgba(255,255,255,.72); transition:color var(--t-rapida); }
.rodape__nav a:hover{ color:var(--mar-medio); }
.rodape__contato{ display:flex; flex-direction:column; gap:.55rem; font-size:.9rem; color:rgba(255,255,255,.72); }
.rodape__contato a{ text-decoration:none; transition:color var(--t-rapida); }
.rodape__contato a:hover{ color:var(--mar-medio); }
.rodape__base{
  border-top:1px solid rgba(255,255,255,.12);
  padding:1.35rem var(--gutter);
  padding-bottom:calc(1.35rem + var(--barra-h) + env(safe-area-inset-bottom, 0px));
  text-align:center;
  font-size:.72rem; font-weight:500; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(255,255,255,.4);
}

/* ═══════════ BARRA DE AÇÃO (celular) ═══════════ */
.barra{
  position:fixed; left:0; right:0; bottom:0; z-index:110;
  display:grid; grid-template-columns:1fr 1fr;
  background:rgba(6,46,47,.97);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.12);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  transform:translateY(110%);
  transition:transform var(--t-suave);
}
.barra.aparece{ transform:none; }
.barra__btn{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:var(--barra-h);
  border:0; background:none; cursor:pointer;
  color:#fff; text-decoration:none;
  font-size:.88rem; font-weight:600; letter-spacing:.02em;
  transition:background var(--t-rapida);
}
.barra__btn:active{ background:rgba(255,255,255,.1); }
.barra__btn--principal svg{ color:var(--mar-claro); }
.barra__btn--zap{ background:var(--zap); }
.barra__btn--zap:active{ background:#1EBE5A; }

/* ── folha de destinos ─────────────────────────────────── */
.folha{
  position:fixed; inset:0; z-index:120;
  background:rgba(var(--veu),.6);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  display:flex; align-items:flex-end;
}
.folha[hidden]{ display:none; }
.folha__caixa{
  width:100%; max-width:560px; margin-inline:auto;
  background:var(--luz);
  border-radius:14px 14px 0 0;
  padding:.65rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom, 0px));
  animation:subir .32s cubic-bezier(.22,.61,.36,1);
  max-height:88svh; overflow-y:auto;
}
@keyframes subir{ from{ transform:translateY(100%) } to{ transform:none } }
.folha__puxador{
  width:38px; height:4px; border-radius:99px;
  background:rgba(22,32,30,.2); margin:.35rem auto 1.15rem;
}
.folha__titulo{ font-family:var(--display); font-size:1.35rem; line-height:1.2; margin-bottom:1.15rem; }
.folha__destino{ padding-block:1.15rem; border-top:1px solid rgba(22,32,30,.12); }
.folha__nome{ font-family:var(--display); font-size:1.22rem; line-height:1.2; }
.folha__nome span{
  font-family:var(--corpo); font-size:.63rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--mar-texto);
  margin-left:.45rem; vertical-align:middle;
}
.folha__end{ font-size:.9rem; color:var(--tinta-suave); margin-top:.1rem; }
.folha__acoes{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:.85rem; }
.folha__fechar{
  width:100%; min-height:46px; margin-top:1.15rem;
  background:none; border:1px solid rgba(22,32,30,.2); border-radius:var(--raio);
  color:var(--tinta-suave); font-size:.86rem; font-weight:600; cursor:pointer;
}
.folha__fechar:hover{ background:rgba(22,32,30,.05); }

/* ═══════════ REVELAÇÃO AO ROLAR ═══════════ */
.revelar{
  opacity:0; transform:translateY(20px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
.revelar.visivel{ opacity:1; transform:none; }

/* ═══════════════════════════════════════════════════════
   A PARTIR DE TABLET
   ═══════════════════════════════════════════════════════ */
@media (min-width:640px){
  .fatos__grade{ grid-template-columns:repeat(4,1fr); gap:1.5rem; }
  .fato + .fato{ padding-left:1.5rem; }
  .fato + .fato::before{
    content:""; position:absolute; left:0; top:.15rem; bottom:.15rem;
    width:1px; background:rgba(255,255,255,.16);
  }
  .vozes__grade{ grid-template-columns:1fr 1fr; }
  .galeria__trilho figure{ flex-basis:clamp(230px,26vw,330px); }
  .galeria__trilho figure:nth-child(3n){ aspect-ratio:4/3; flex-basis:clamp(300px,34vw,440px); align-self:center; max-width:440px; }
  .escolha__cartoes{ grid-template-columns:1fr 1fr; }
  .casa-atalho{ padding:.9rem 1rem; }
}

/* ═══════════════════════════════════════════════════════
   A PARTIR DE DESKTOP
   ═══════════════════════════════════════════════════════ */
@media (min-width:861px){
  .barra{ display:none; }
  .folha{ display:none !important; }
  .rodape__base{ padding-bottom:1.35rem; }

  .hero{ padding:7rem 0 clamp(3rem,6vw,5rem); }
  .escolha{ padding:1.4rem 1.5rem; }
  .escolha__cartoes{ gap:.75rem; }
  .escolha__cartoes{ grid-template-columns:1fr 1fr; }
  .casa-atalho{ padding:.9rem 1rem; }

  .casas__grade{ grid-template-columns:1fr 1fr; }
  .mesa__fotos{ grid-template-columns:repeat(4,1fr); }
  .mesa__fotos figure{ aspect-ratio:4/5; }
  .cafe{ grid-template-columns:1fr 1fr; align-items:stretch; }
  .cafe__texto{ padding-inline:clamp(2.5rem,5vw,5rem); max-width:640px; }
  .vozes__grade{ grid-template-columns:repeat(3,1fr); }
  .visitar__interno{ grid-template-columns:1fr 1fr; }
  .rodape__interno{ grid-template-columns:1.2fr 1fr 1fr; gap:clamp(2rem,5vw,4rem); }
  .rodape__marca{ grid-column:auto; }
}

/* ═══════════════════════════════════════════════════════
   MENU NO CELULAR
   ═══════════════════════════════════════════════════════ */
@media (max-width:860px){
  .topo__nav, .topo__zap{ display:none; }
  .topo__menu{
    display:flex; flex-direction:column; justify-content:center; gap:6px;
    margin-left:auto; width:44px; height:44px;
    background:none; border:0; cursor:pointer; padding:0;
  }
  .topo__menu span{
    display:block; height:1.5px; width:26px; margin-inline:auto; background:#fff;
    transition:transform var(--t-rapida), background var(--t-suave);
  }
  .topo.rolado .topo__menu span{ background:var(--tinta); }
  .topo__menu[aria-expanded="true"] span{ background:var(--tinta); }
  .topo__menu[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
  .topo__menu[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

  .menu-mobile{
    display:flex; flex-direction:column; gap:.2rem;
    background:rgba(241,244,241,.98);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-top:1px solid rgba(22,32,30,.1);
    padding:1.1rem var(--gutter) 1.75rem;
  }
  .menu-mobile[hidden]{ display:none; }
  .menu-mobile a{
    font-family:var(--display); font-size:1.42rem; font-weight:300;
    text-decoration:none; padding-block:.6rem; min-height:46px;
    border-bottom:1px solid rgba(22,32,30,.08);
  }
  .menu-mobile__zap{
    margin-top:.9rem; border-bottom:0 !important;
    background:var(--mar); color:#fff;
    font-family:var(--corpo) !important; font-size:.9rem !important; font-weight:600 !important;
    text-align:center; padding:1rem !important; border-radius:var(--raio);
  }
}

/* no celular o hero encolhe para caber título + escolha das casas */
/* no toque, links de texto também precisam de área confortável */
@media (hover:none){
  .rodape__nav a, .rodape__contato a{ padding-block:.45rem; }
  .escolha__mais{ padding-block:.5rem; }
  .mesa__nota a{ display:inline-block; padding-block:.3rem; }
}

@media (max-width:520px){
  .hero{ min-height:auto; padding-top:5.5rem; padding-bottom:2rem; }
  .hero__titulo{ margin-bottom:.75rem; }
  .hero__texto{ margin-bottom:1.4rem; font-size:1rem; }
  .escolha{ padding:.9rem; }
  .casa-atalho{ padding:.8rem; }
}

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

/* ═══════════ IMPRESSÃO ═══════════ */
@media print{
  .topo,.barra,.folha,.menu-mobile{ display:none !important; }
  body{ background:#fff; }
}

/* ═══════════════════════════════════════════════════════════
   UMA CASA SÓ — 31/08/2026
   A cliente vai encerrar a unidade da Praia (fim do contrato com
   a pousada). O site passou a falar de um endereço só, então os
   layouts que existiam para comparar duas casas lado a lado
   precisam parar de dividir a largura no meio.
   ═══════════════════════════════════════════════════════════ */

/* atalho do hero: um cartão não deve ocupar meia tela */
.escolha__cartoes--unica{ grid-template-columns:1fr !important; }

@media (min-width:700px){
  .escolha__cartoes--unica{ max-width:33rem; }
}

/* a casa: com um card só, a foto vai para o lado do texto */
.casas__grade--unica{ grid-template-columns:1fr !important; }

@media (min-width:820px){
  .casas__grade--unica .casa{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    align-items:stretch;
  }
  .casas__grade--unica .casa__foto{ aspect-ratio:auto; height:100%; min-height:22rem; }
  .casas__grade--unica .casa__corpo{ align-self:center; }
}

/* ═══════════════════════════════════════════════════════════
   AJUSTE DE MÉTRICA DA CARDO — 31/08/2026
   A Cardo (fonte do manual de marca, escolhida no lugar da
   Newsreader) tem x-height menor e caracteres mais estreitos.
   Duas consequências que precisam de correção, e só duas:
   1. `ch` encolheu, então caixas medidas em ch quebram antes —
      o título do hero passou a quebrar em duas linhas;
   2. em corpo pequeno ela parece menor que a Newsreader no
      mesmo font-size, e some sobre fundo escuro.
   Se um dia voltar para a Newsreader, apagar este bloco inteiro.
   ═══════════════════════════════════════════════════════════ */

.hero__titulo{ max-width:18ch; }
.casa-atalho__nome{ font-size:1.32rem; }
.destino__nome,.folha__nome{ font-size:1.3rem; }
.linha__valor{ font-size:1.2rem; }
.horarios dd{ font-size:1.4rem; }

/* ═══════════════════════════════════════════════════════════
   CARDÁPIO NO SITE — 31/08/2026
   Os 44 itens do PDF oficial da Karla, com preço. Substituiu a
   lista antiga de pratos sem preço que mandava o cliente para o
   Instagram — que era exatamente o buraco apontado no deck.
   Apresentação: LISTA COMPLETA, escolhida pelo Gabriel entre as
   4 opções de `site/cardapio/`. Sem aba e sem clique: rola e lê.
   ═══════════════════════════════════════════════════════════ */

.cardapio{ margin-top:clamp(2.5rem,5vw,3.5rem); }
.cardapio__grupo{ break-inside:avoid; margin-bottom:2.6rem; }
.cardapio__grupo:last-child{ margin-bottom:0; }
.cardapio__grupo h3{
  font-family:var(--display); font-size:1.5rem; line-height:1.2;
  display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap;
  padding-bottom:.5rem; margin-bottom:1rem;
  border-bottom:2px solid var(--mar);
}
.cardapio__selo{
  background:var(--mar); color:#fff; font-family:var(--corpo);
  font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:.28rem .58rem; border-radius:2px;
}
.cardapio__grupo ul{ display:grid; gap:.6rem; }
.cardapio__linha{ display:flex; align-items:baseline; gap:.45rem; }
.cardapio__nome{ flex:0 1 auto; }
.cardapio__item--desc .cardapio__nome{ font-weight:700; }
.cardapio__fio{
  flex:1 1 auto; min-width:1.2rem;
  border-bottom:1px dotted rgba(22,32,30,.28); transform:translateY(-.28rem);
}
.cardapio__preco{
  flex:0 0 auto; font-weight:600; color:var(--mar-texto);
  font-variant-numeric:tabular-nums;
}
.cardapio__desc{
  color:var(--tinta-suave); font-size:.93rem; line-height:1.45; margin-top:.1rem;
}

/* duas colunas a partir do tablet — 44 itens numa coluna só ficam longos demais */
@media (min-width:820px){
  .cardapio{ columns:2; column-gap:clamp(2.5rem,5vw,4rem); }
}