@font-face { font-family: "Overpass"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/overpass-latin-ext-400-normal.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: "Overpass"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/overpass-latin-400-normal.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: "Overpass"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/overpass-latin-ext-600-normal.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: "Overpass"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/overpass-latin-600-normal.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: "Overpass"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/overpass-latin-ext-700-normal.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: "Overpass"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/overpass-latin-700-normal.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: "Overpass"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/overpass-latin-ext-800-normal.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: "Overpass"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/overpass-latin-800-normal.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: "Overpass"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/overpass-latin-ext-900-normal.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: "Overpass"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/overpass-latin-900-normal.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; }

:root {
  --placa-verde: #1e4a2e;
  --placa-verde-fundo: #173b24;
  --tinta: #1f3320;
  --marrom: #5a3622;
  --marrom-fundo: #4a2c1b;
  --azul: #115a75;
  --sol: #fec865;
  --sol-forte: #f2b33d;
  --branco: #f5f6f2;
  --branco-puro: #ffffff;
  --creme-placa: #f4efe0;
  --texto: #1f3320;
  --texto-suave: #46594a;
  --texto-claro: #e9efe6;
  --texto-claro-suave: #c9d6c8;
  --linha: rgba(31, 51, 32, 0.16);
  --linha-clara: rgba(255, 255, 255, 0.28);
  --sombra-placa: 0 18px 40px -18px rgba(10, 24, 12, 0.55), 0 4px 10px -4px rgba(10, 24, 12, 0.3);
  --f-placa: "Overpass", "Helvetica Neue", Arial, sans-serif;
  --raio: 12px;
  --gutter: clamp(20px, 4vw, 56px);
  --max: 1240px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --barra-h: 0px;
  --chamada-veu: linear-gradient(180deg, rgba(23, 59, 36, 0.82), rgba(23, 59, 36, 0.62));
  --c-01: #0d1a0f;
  --c-02: #0f2616;
  --c-03: #2b1a10;
  --c-04: #9a2a12;
  --c-05: #e8d9cc;
  --c-06: #f0e4d8;
  --c-07: rgba(0, 0, 0, 0.12);
  --c-08: rgba(0, 0, 0, 0.45);
  --c-09: rgba(0, 0, 0, 0.5);
  --c-10: rgba(0, 0, 0, 0.6);
  --c-11: rgba(0, 0, 0, 0.7);
  --c-12: rgba(0, 0, 0, 0.8);
  --c-13: rgba(10, 24, 12, 0);
  --c-14: rgba(10, 24, 12, 0.35);
  --c-15: rgba(10, 24, 12, 0.45);
  --c-16: rgba(10, 24, 12, 0.5);
  --c-17: rgba(120, 80, 0, 0.6);
  --c-18: rgba(23, 59, 36, 0.88);
  --c-19: rgba(23, 59, 36, 1);
  --c-20: rgba(255, 255, 255, 0.12);
  --c-21: rgba(255, 255, 255, 0.14);
  --c-22: rgba(255, 255, 255, 0.28);
  --c-23: rgba(31, 51, 32, 0.12);
  --c-24: rgba(8, 16, 9, 0.2);
  --c-25: rgba(8, 16, 9, 0.35);
  --c-26: rgba(8, 16, 9, 0.6);
  --c-27: rgba(8, 16, 9, 0.8);
  --c-28: rgba(8, 16, 9, 0.88);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { overflow-x: clip; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--f-placa);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--placa-verde);
  padding-bottom: var(--barra-h);
}

::selection { background: var(--sol); color: var(--tinta); }

* { scrollbar-color: var(--placa-verde) var(--branco); }

img, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

:focus-visible { outline: 3px solid var(--sol-forte); outline-offset: 3px; border-radius: 4px; transition: none; }

h1, h2, h3 { font-family: var(--f-placa); line-height: 1.05; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

.icone { width: 1.25em; height: 1.25em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.envoltorio { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

.pular { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--sol); color: var(--tinta); padding: 10px 16px; border-radius: 8px; font-weight: 800; }
.pular:focus { top: 12px; }

/* placa: sign board with the inset white border every road sign carries */
.placa {
  position: relative;
  border-radius: var(--raio);
  box-shadow: var(--sombra-placa);
  isolation: isolate;
}
.placa::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid currentColor;
  border-radius: calc(var(--raio) - 5px);
  pointer-events: none;
  opacity: 0.9;
}
.placa--verde { background: var(--placa-verde); color: var(--branco-puro); }
.placa--marrom { background: var(--marrom); color: var(--branco-puro); }
.placa--azul { background: var(--azul); color: var(--branco-puro); }
.placa--branca { background: var(--branco-puro); color: var(--tinta); }
.placa--branca::before { border-color: var(--placa-verde); opacity: 0.85; }

/* botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 52px; padding: 0.85em 1.4em;
  font: 800 1.0625rem/1.1 var(--f-placa);
  border-radius: 10px; border: 0; cursor: pointer; text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.botao:active { transform: translateY(1px) scale(0.98); }
.botao--sol { background: var(--sol); color: var(--tinta); box-shadow: 0 6px 16px -8px var(--c-17); }
.botao--sol:hover { background: var(--sol-forte); }
.botao--verde { background: var(--placa-verde); color: var(--branco-puro); }
.botao--verde:hover { background: var(--placa-verde-fundo); }
.botao--contorno { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.botao--contorno:hover { background: var(--c-20); }
.botao .zap { width: 1.3em; height: 1.3em; fill: currentColor; }

/* cabeçalho */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  color: var(--branco-puro);
  transition: background-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.topo.solido { background: var(--placa-verde-fundo); box-shadow: 0 8px 24px -16px var(--c-10); }
.topo__in { display: flex; align-items: center; gap: 24px; padding-block: 14px; }
.topo__marca { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 800; font-size: 1rem; line-height: 1.15; }
.topo__marca img { width: 56px; height: 56px; transform-origin: left center; transition: transform 240ms var(--ease-out); }
.topo.solido .topo__marca img { transform: scale(0.8); }
.topo__marca span { max-width: 13ch; }
.topo__nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.topo__nav a:not(.botao) { padding: 10px 12px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.topo__nav a:not(.botao):hover { background: var(--c-21); }
.topo__nav .botao { min-height: 44px; padding: 0.6em 1em; margin-left: 8px; }
.topo:not(.solido) .topo__marca, .topo:not(.solido) .topo__nav a:not(.botao) { text-shadow: 0 1px 12px var(--c-08); }
@media (max-width: 920px) {
  .topo__nav a:not(.botao) { display: none; }
  .topo__marca span { display: none; }
}

/* hero */
.hero { position: relative; min-height: min(100svh, 920px); display: grid; color: var(--branco-puro); background: var(--placa-verde-fundo); }
.hero__foto { position: absolute; inset: 0; overflow: hidden; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 35% 45%; }
.hero__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--c-13) 45%, var(--c-14) 100%), linear-gradient(180deg, var(--c-15) 0%, var(--c-13) 22%); }
.hero__placas {
  position: relative; z-index: 2; align-self: center; justify-self: end;
  width: min(460px, 100%); margin-right: var(--gutter); padding-block: 116px 40px;
  display: grid; gap: 14px;
}
.destino { padding: 26px 28px 28px; }
.destino__linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; font-size: 1rem; color: var(--texto-claro); }
.destino__seta { width: 34px; height: 34px; stroke-width: 3; }
.destino h1 { font-size: clamp(2rem, 1.2rem + 2.4vw, 2.85rem); font-weight: 900; margin-top: 14px; letter-spacing: -0.025em; }
.destino p { margin-top: 12px; color: var(--texto-claro); font-size: 1.0625rem; line-height: 1.5; }

/* reserva */
.reserva { padding: 22px 24px 22px; scroll-margin-top: 96px; }
.reserva h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
.reserva__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.campo { display: grid; gap: 4px; min-width: 0; }
.campo label, .campo .rotulo { font-size: 0.875rem; font-weight: 700; color: var(--texto-suave); }
.campo input[type="date"], .campo select {
  width: 100%; min-height: 48px; padding: 10px 12px;
  font: 600 1rem var(--f-placa); color: var(--tinta);
  background: var(--branco); border: 1.5px solid var(--linha); border-radius: 8px;
  appearance: none; -webkit-appearance: none;
}
.campo select { background-image: linear-gradient(45deg, transparent 50%, var(--tinta) 50%), linear-gradient(135deg, var(--tinta) 50%, transparent 50%); background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.campo input[type="date"]:hover, .campo select:hover { border-color: var(--placa-verde); }
.contador { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 4px; background: var(--branco); border: 1.5px solid var(--linha); border-radius: 8px; }
.contador button { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 6px; background: var(--branco-puro); color: var(--tinta); cursor: pointer; box-shadow: 0 1px 2px var(--c-07); }
.contador button:hover:not(:disabled) { background: var(--sol); }
.contador button:disabled { opacity: 0.35; cursor: not-allowed; }
.contador output { font-weight: 800; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.idades { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.idades:empty { display: none; }
.escolhas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.escolhas:empty { display: none; }
.escolha { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; background: var(--creme-placa); border-radius: 999px; font-size: 0.875rem; font-weight: 700; }
.escolha button { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--tinta); cursor: pointer; }
.escolha button:hover { background: var(--c-23); }
.reserva__acao { margin-top: 14px; width: 100%; }
.reserva__resumo { margin-top: 10px; font-size: 0.9375rem; color: var(--texto-suave); line-height: 1.45; }
.reserva__resumo strong { color: var(--tinta); }
.erro { color: var(--c-04); font-weight: 700; }

@media (max-width: 760px) {
  .hero { min-height: auto; display: block; }
  .hero__foto { position: relative; height: 68svh; min-height: 420px; }
  .hero__foto img { object-position: 30% 50%; }
  .hero__foto::after { background: linear-gradient(180deg, var(--c-16) 0%, var(--c-13) 25%, var(--c-13) 70%, var(--c-19) 100%); }
  .hero__placas { width: auto; margin: -120px 14px 0; padding: 0 0 28px; }
}

/* seções */
.secao { padding-block: clamp(72px, 10vw, 136px); }
.titulo { font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); font-weight: 900; max-width: 18ch; }
.lead { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); color: var(--texto-suave); max-width: 58ch; margin-top: 18px; }

/* a casa */
.casa__grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.casa__texto p + p { margin-top: 14px; }
.casa__texto .lead { margin-top: 22px; }
.casa__anfitrioes { margin-top: 28px; display: flex; gap: 14px; align-items: flex-start; padding-top: 22px; border-top: 1px solid var(--linha); color: var(--texto-suave); font-size: 1rem; }
.casa__anfitrioes .icone { width: 26px; height: 26px; color: var(--placa-verde); margin-top: 2px; }
.casa__fotos { position: relative; }
.casa__fotos .principal { border-radius: var(--raio); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.casa__fotos .postal { position: absolute; left: -9%; bottom: 8%; width: 42%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; border: 6px solid var(--branco-puro); box-shadow: var(--sombra-placa); }
@media (max-width: 860px) {
  .casa__grade { grid-template-columns: minmax(0, 1fr); }
  .casa__fotos { margin-inline: 4% 0; }
}

/* suítes */
.suites { background: var(--placa-verde-fundo); color: var(--branco-puro); }
.suites .lead { color: var(--texto-claro-suave); }
.suites__cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.trilho { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 20px; margin-top: 44px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; overscroll-behavior-x: contain; }
.trilho::-webkit-scrollbar { height: 6px; }
.trilho::-webkit-scrollbar-thumb { background: var(--linha-clara); border-radius: 3px; }
.suite { scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; gap: 16px; }
.suite img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--raio); }
.suite__corpo { display: grid; gap: 8px; align-content: start; }
.suite h3 { font-size: 1.5rem; font-weight: 800; }
.suite p { color: var(--texto-claro-suave); }
.suite .botao { justify-self: start; margin-top: 8px; min-height: 46px; }
@media (max-width: 760px) { .trilho { grid-auto-columns: 82%; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); } }

/* estrutura */
.servicos { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; list-style: none; padding: 0; }
.servico { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; background: var(--branco-puro); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--linha); font-weight: 700; }
.servico .sinal { width: 46px; height: 46px; display: grid; place-items: center; background: var(--azul); color: var(--branco-puro); border-radius: 7px; box-shadow: inset 0 0 0 2px var(--azul), inset 0 0 0 4px var(--branco-puro); }
.servico .sinal .icone { width: 24px; height: 24px; }
.mosaico { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 48px; height: clamp(520px, 62vw, 760px); }
.mosaico figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--raio); }
.mosaico figure:first-child { grid-row: 1 / 3; }
.mosaico figure:nth-child(4) { grid-column: 2 / 4; }
.mosaico img { width: 100%; height: 100%; object-fit: cover; }

.mosaico figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; background: var(--c-18); color: var(--branco-puro); font-weight: 700; font-size: 0.9375rem; border-radius: 6px; }
@media (max-width: 760px) {
  .mosaico { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; height: auto; }
  .mosaico figure { aspect-ratio: 4 / 5; }
  .mosaico figure:first-child { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 4 / 4.4; }
  .mosaico figure:nth-child(4) { grid-column: 1 / -1; aspect-ratio: 16 / 11; }
}

/* café */
.cafe { position: relative; background: var(--creme-placa); }
.cafe__grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.cafe__fotos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: end; }
.cafe__fotos img { width: 100%; object-fit: cover; border-radius: var(--raio); }
.cafe__fotos img:first-child { aspect-ratio: 4 / 5; }
.cafe__fotos img:last-child { aspect-ratio: 4 / 5; margin-bottom: 18%; }
.cafe .placa { padding: 30px 30px 32px; }
.cafe .placa h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 900; }
.cafe .placa p { margin-top: 14px; color: var(--texto-claro); }
@media (max-width: 860px) { .cafe__grade { grid-template-columns: minmax(0, 1fr); } }

/* para dois */
.dois { position: relative; color: var(--branco-puro); background: var(--c-01); overflow: hidden; }
.dois__fundo { position: absolute; inset: 0; }
.dois__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; opacity: 0.7; }
.dois__fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--c-28) 0%, var(--c-25) 60%, var(--c-24) 100%); }
.dois__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 48px; align-items: center; min-height: 640px; }
.dois .titulo { color: var(--sol); }
.dois .lead { color: var(--texto-claro); }
.dois__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.dois__postal { justify-self: end; width: min(340px, 100%); transform: rotate(2.5deg); border: 8px solid var(--branco-puro); border-radius: 8px; box-shadow: 0 30px 60px -20px var(--c-12); }
.dois__postal img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
@media (max-width: 860px) {
  .dois__in { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .dois__postal { justify-self: start; width: 70%; }
  .dois__fundo::after { background: linear-gradient(180deg, var(--c-27), var(--c-26)); }
}

/* a serra */
.serra { background: var(--marrom-fundo); color: var(--branco-puro); }
.serra__intro { padding-block: clamp(72px, 10vw, 128px) 0; }
.serra__intro .lead { color: var(--c-05); }
.serra__palco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; min-height: 100svh; padding-block: 48px; }
.serra__texto { display: grid; gap: 22px; align-content: center; }
.atrativo { padding: 22px 26px 24px; display: flex; gap: 18px; align-items: center; min-height: 112px; }
.atrativo__picto { width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--branco-puro); color: var(--marrom); }
.atrativo__picto .icone { width: 36px; height: 36px; stroke-width: 2.2; }
.atrativo__nome { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); font-weight: 900; line-height: 1.05; }
.serra__frase { font-size: 1.1875rem; color: var(--c-06); max-width: 34ch; min-height: 3.2em; }
.serra__passos { display: flex; gap: 0; }
.serra__passos span { width: 48px; transform: scaleX(0.58); height: 4px; border-radius: 2px; background: var(--c-22); transform-origin: left center; transition: background-color 300ms var(--ease-out), transform 300ms var(--ease-out); }
.serra__passos span.ativo { background: var(--sol); transform: none; }
.serra__quadro { position: relative; justify-self: center; width: min(420px, 100%); aspect-ratio: 9 / 16; max-height: 84svh; border-radius: 16px; overflow: hidden; background: var(--c-03); box-shadow: 0 40px 80px -30px var(--c-11); }
.serra__quadro video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 700ms var(--ease-out); }
.serra__quadro video.ativo { opacity: 1; }
.serra__lista { display: none; }
.serra__fecho { padding-block: 24px clamp(72px, 10vw, 128px); }
.roteiro { padding: 28px 30px 30px; display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; }
.roteiro .atrativo__picto { width: 72px; height: 72px; }
.roteiro h3 { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); font-weight: 900; }
.roteiro p { margin-top: 6px; color: var(--c-06); max-width: 60ch; }
@media (max-width: 860px) {
  .serra__palco { display: none; }
  .serra__lista { display: grid; gap: 28px; margin-top: 40px; }
  .serra__item { display: grid; gap: 14px; }
  .serra__item video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; background: var(--c-03); }
  .serra__item .atrativo { margin-top: -56px; margin-inline: 12px; }
  .serra__item p { color: var(--c-06); padding-inline: 4px; }
  .roteiro { grid-template-columns: 1fr; }
}

/* depoimentos */
.vozes__grade { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); margin-top: 48px; align-items: start; }
.voz { margin: 0; }
.voz blockquote { margin: 0; }
.voz--grande blockquote { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; }
.voz--grande { padding-left: clamp(0px, 2vw, 24px); }
.voz figcaption { margin-top: 18px; font-weight: 800; }
.voz figcaption span { display: block; font-weight: 600; color: var(--texto-suave); font-size: 0.9375rem; }
.vozes__lista { display: grid; gap: 28px; }
.vozes__lista .voz { padding-bottom: 28px; border-bottom: 1px solid var(--linha); }
.vozes__lista .voz:last-child { border-bottom: 0; padding-bottom: 0; }
.vozes__lista blockquote { font-size: 1.0625rem; }
.vozes__google { display: inline-flex; margin-top: 36px; }
.aspas { width: 44px; height: 44px; color: var(--sol-forte); margin-bottom: 12px; }
@media (max-width: 860px) { .vozes__grade { grid-template-columns: 1fr; } }

/* dúvidas e como chegar */
.final { background: var(--creme-placa); }
.final__grade { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.duvidas { margin-top: 32px; border-top: 1px solid var(--linha); }
.duvidas details { border-bottom: 1px solid var(--linha); }
.duvidas summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-weight: 800; font-size: 1.125rem; cursor: pointer; list-style: none; }
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary .icone { transition: transform 240ms var(--ease-out); }
.duvidas details[open] summary .icone { transform: rotate(180deg); }
.duvidas details p { padding: 0 0 22px; color: var(--texto-suave); max-width: 62ch; }
.chegar { padding: 30px 30px 32px; }
.chegar__linha { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--texto-claro); }
.chegar h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 900; margin-top: 12px; }
.chegar address { font-style: normal; margin-top: 14px; color: var(--texto-claro); line-height: 1.55; }
.chegar__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chegar__acoes .botao { min-height: 46px; }

/* chamada final e rodapé */
.chamada { position: relative; overflow: hidden; background: var(--placa-verde-fundo); color: var(--branco-puro); text-align: center; padding-block: clamp(110px, 14vw, 200px); }
.chamada__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chamada::after { content: ""; position: absolute; inset: 0; background: var(--chamada-veu); }
.chamada .envoltorio { position: relative; z-index: 1; }
.chamada .titulo { margin-inline: auto; max-width: 20ch; }
.chamada .lead { margin-inline: auto; color: var(--texto-claro-suave); }
.chamada .botao { margin-top: 30px; }
.rodape { background: var(--c-02); color: var(--texto-claro-suave); padding-block: 56px 40px; font-size: 0.9375rem; }
.rodape__grade { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 40px; align-items: start; }
.rodape img { width: 96px; height: 96px; }
.rodape strong { color: var(--branco-puro); display: block; margin-bottom: 6px; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rodape a { color: var(--branco-puro); }
.rodape__base { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--c-20); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 760px) { .rodape__grade { grid-template-columns: minmax(0, 1fr); } }

/* barra fixa do celular */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; gap: 10px; align-items: center;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--placa-verde-fundo); box-shadow: 0 -10px 30px -12px var(--c-09);
  transform: translateY(0); transition: transform 280ms var(--ease-out);
}
.barra.oculta { transform: translateY(110%); }
.barra .botao { flex: 1; min-height: 50px; padding-inline: 14px; white-space: nowrap; font-size: 1rem; }
.barra .botao--contorno { color: var(--branco-puro); flex: 0 0 auto; }
@media (max-width: 760px) { .barra { display: flex; } :root { --barra-h: 74px; } .topo__nav .botao { display: none; } }

/* entrada única do hero */
@media (prefers-reduced-motion: no-preference) {
  .hero__placas > * { animation: placa-chega 900ms var(--ease-out) both; }
  .hero__placas > *:nth-child(2) { animation-delay: 140ms; }
  .hero__slide:first-child img { animation: foto-respira 1600ms var(--ease-out) both; }
}
@keyframes placa-chega { from { transform: translateY(22px) rotate(-0.6deg); } to { transform: none; } }
@keyframes foto-respira { from { transform: scale(1.06); filter: saturate(0.8); } to { transform: none; filter: none; } }
.mosaico figure:nth-child(4) img { object-position: center 62%; }
.mosaico figure:first-child img { object-position: center 85%; }
@media (min-width: 861px) { .serra__quadro { width: min(460px, 100%); } .atrativo__nome { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); } .serra__frase { font-size: 1.3125rem; } }
@media (max-width: 860px) { .final__grade { grid-template-columns: 1fr; } .casa__fotos { margin-inline: 10% 0; } .casa__fotos .postal { left: -9%; width: 40%; } }
@media (max-width: 520px) { .servicos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .servico { padding: 8px 10px 8px 8px; font-size: 0.9375rem; gap: 10px; } .servico .sinal { width: 40px; height: 40px; } }
@media (min-width: 761px) and (max-height: 860px) { .hero__placas { padding-block: 96px 24px; gap: 12px; } .destino { padding: 22px 26px 24px; } .destino h1 { font-size: 2.35rem; margin-top: 10px; } .reserva { padding: 18px 22px; } .reserva__grade { margin-top: 10px; } }

/* hero: suíte e cachoeira se alternam */
.hero__foto::after { z-index: 1; }
.hero__marcas { position: absolute; z-index: 2; left: var(--gutter); bottom: 28px; display: flex; gap: 6px; }
.hero__marcas span { width: 40px; height: 4px; border-radius: 2px; background: var(--c-22); transition: background-color 400ms var(--ease-out); }
.hero__marcas span.ativo { background: var(--sol); }
@media (max-width: 760px) { .hero__marcas { bottom: auto; top: 88px; } }
@media (prefers-reduced-motion: reduce) { .hero__marcas { display: none; } }

/* tucano que chega voando */
.casa__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.tucano { position: relative; flex: none; width: clamp(112px, 30vw, 168px); aspect-ratio: 1; margin: -24px -10px -8px 0; }
.tucano img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tucano__ave { transform-origin: 38% 76%; }
html.js .tucano:not(.visto) .tucano__ave { opacity: 0; transform: translate(160%, -140%) rotate(-20deg) scale(0.62, 0.56); }
html.js .tucano:not(.visto) .tucano__galho { clip-path: inset(0 0 0 100%); }
html.js .tucano.visto .tucano__ave { animation: tucano-voo 1500ms linear both, tucano-respira 4200ms cubic-bezier(0.77, 0, 0.175, 1) 1700ms infinite; }
html.js .tucano.visto .tucano__galho { animation: galho-surge 700ms var(--ease-out) 650ms both, galho-balanca 1400ms cubic-bezier(0.77, 0, 0.175, 1) 1250ms 1 both; transform-origin: 0% 70%; }
@keyframes tucano-voo {
  0% { opacity: 0; transform: translate(160%, -140%) rotate(-20deg) scale(0.62, 0.56); }
  8% { opacity: 1; }
  22% { transform: translate(112%, -98%) rotate(-16deg) scale(0.7, 0.76); }
  36% { transform: translate(74%, -64%) rotate(-12deg) scale(0.77, 0.66); }
  50% { transform: translate(42%, -34%) rotate(-8deg) scale(0.86, 0.9); }
  64% { transform: translate(16%, -10%) rotate(-3deg) scale(0.93, 0.86); }
  78% { transform: translate(0, 2%) rotate(1deg) scale(1.03, 0.95); }
  90% { transform: translate(0, 0) rotate(0) scale(0.99, 1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes tucano-respira { 0%, 100% { transform: none; } 50% { transform: scale(1, 1.018) rotate(-0.6deg); } }
@keyframes galho-surge { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes galho-balanca { 0%, 100% { transform: none; } 30% { transform: rotate(1.6deg); } 65% { transform: rotate(-0.8deg); } }

/* revelações leves ao rolar (só com JS e sem redução de movimento) */
html.js .titulo:not(.visto) { clip-path: inset(0 0 100% 0); transform: translateY(26px); }
html.js .titulo { transition: clip-path 900ms var(--ease-out), transform 900ms var(--ease-out); }
html.js .lead:not(.visto) { opacity: 0; transform: translateY(14px); }
html.js .lead { transition: opacity 700ms var(--ease-out) 120ms, transform 700ms var(--ease-out) 120ms; }
html.js .js-foto:not(.visto) { clip-path: inset(14% 0 0 0 round var(--raio)); }
html.js .js-foto:not(.visto) img, html.js img.js-foto:not(.visto) { transform: scale(1.08); }
html.js .js-foto { transition: clip-path 1000ms var(--ease-out) calc(var(--i, 0) * 80ms); }
html.js .js-foto img, html.js img.js-foto { transition: transform 1400ms var(--ease-out) calc(var(--i, 0) * 80ms), clip-path 1000ms var(--ease-out) calc(var(--i, 0) * 80ms); }
html.js .js-placa:not(.visto) { opacity: 0; transform: translateY(28px) rotate(-1.4deg); }
html.js .js-placa { transition: opacity 600ms var(--ease-out), transform 900ms var(--ease-out); transform-origin: 50% 0; }
html.js .js-sobe:not(.visto) { opacity: 0; transform: translateY(16px) scale(0.96); }
html.js .js-sobe { transition: opacity 500ms var(--ease-out) calc(var(--i, 0) * 55ms), transform 600ms var(--ease-out) calc(var(--i, 0) * 55ms); }

/* cabeçalho some ao descer e volta ao subir */
.topo { transition: background-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out), transform 300ms var(--ease-out); }
.topo.escondido { transform: translateY(-100%); }

/* toques de feedback */
@media (hover: hover) and (pointer: fine) {
  .botao--sol:hover, .botao--verde:hover { transform: translateY(-1px); }
  .suite img { transition: transform 600ms var(--ease-out); }
}
.contador output.pulou { animation: pulo 220ms var(--ease-out); }
@keyframes pulo { 0% { transform: scale(0.85); } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .tucano__ave, .tucano__galho { animation: none !important; }
  .topo.escondido { transform: none; }
}

.hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1200ms var(--ease-out); }
.hero__slide.ativo { opacity: 1; }
.hero__slide img, video.hero__slide { width: 100%; height: 100%; object-fit: cover; }
.hero__slide:not(.ativo) img, video.hero__slide:not(.ativo) { transform: scale(1.04); }
.hero__slide img, video.hero__slide { transition: transform 6000ms linear; }
.hero__slide.ativo img, video.hero__slide.ativo { transform: scale(1); }
.hero__slide:nth-child(3) img { object-position: center 60%; }
@media (max-width: 760px) { .hero__slide:nth-child(3) img { object-position: center 100%; } }

/* anfitrioes: the hosts as postcards pinned to the wall, each with its own name sign */
.anfitrioes { background: var(--branco-puro); overflow: hidden; }
.anfitrioes__texto { max-width: 46rem; }
.anfitrioes__assina { margin-top: 22px; font-weight: 900; font-size: 1.125rem; color: var(--placa-verde); }
.anfitrioes__fotos { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); align-items: start; }
.anfitriao { margin: 0; position: relative; }
.anfitriao--douglas { transform: rotate(-2deg); }
.anfitriao--val { transform: rotate(1.8deg); margin-top: clamp(32px, 6vw, 80px); }
.anfitriao--barbara { transform: rotate(-1.2deg); margin-top: clamp(12px, 2vw, 28px); }
.anfitriao img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 8px solid var(--branco-puro); border-radius: 8px; box-shadow: var(--sombra-placa); }
.anfitriao--val img { object-position: 60% 50%; }
.anfitriao figcaption { position: relative; margin: -34px 10px 0; padding: 16px 18px 18px; display: grid; gap: 4px; font-size: 0.9375rem; line-height: 1.4; }
.anfitriao figcaption strong { font-size: 1.375rem; font-weight: 900; letter-spacing: -0.01em; }
@media (max-width: 860px) {
  .anfitrioes__fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anfitriao--barbara { grid-column: 1 / -1; width: 50%; justify-self: center; margin-top: 8px; }
}
@media (max-width: 520px) {
  .anfitrioes__fotos { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .anfitriao, .anfitriao--barbara { width: 80%; margin-top: 0; grid-column: auto; }
  .anfitriao--val { justify-self: end; }
  .anfitriao--barbara { justify-self: start; }
}
.rotulo__nota { font-size: 0.75rem; font-weight: 600; opacity: 0.8; margin-left: 4px; }