/* ==========================================================================
   AIHotelCentral · Modelos de site v2 · PRIMITIVOS COMPARTILHADOS
   Só o que é comum a todos os modelos: reset, placeholders de foto/vídeo,
   widget do motor de reservas, barra fixa do celular, movimento (reveal,
   empilhamento, parallax, carrossel), menu em tela cheia, idioma/RTL e a
   barra de controles da prévia. TODO o layout de cada modelo fica no
   <style> do próprio arquivo do modelo.
   ========================================================================== */

[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg, #fff);
  color: var(--ink, #161616);
  font-family: var(--font-body, system-ui), var(--intl-fallback);
  line-height: 1.55;
  overflow-wrap: break-word;
}
:root {
  /* pilha de fallback global: latino estendido, árabe, hebraico, CJK */
  --intl-fallback: "Segoe UI", "Noto Sans", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans SC", "Noto Sans JP", "PingFang SC", "Hiragino Sans", "Microsoft YaHei", "Yu Gothic", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mbar-h: 72px;
}
h1, h2, h3, h4 { font-family: var(--font-display, inherit), var(--intl-fallback); margin: 0 0 .4em; line-height: 1.12; }
p { margin: 0 0 1em; }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.wrap { width: min(100% - 32px, var(--max, 1180px)); margin-inline: auto; }
@media (min-width: 768px) { .wrap { width: min(100% - 64px, var(--max, 1180px)); } }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 100; background: #000; color: #fff; padding: 10px 14px; }
.skip:focus { top: 8px; }
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--focus, #2f6fed); outline-offset: 2px; }
.tone-ok { color: var(--ok, #1d7a4c); } .tone-warn { color: var(--warn, #a15c00); } .tone-no { color: var(--no, #9b2c22); }
.dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: currentColor; margin-inline-end: .4em; vertical-align: .08em; }

/* ---------- placeholders de foto (mesmas "fotos" em todos os modelos) ---------- */
.ph { position: relative; background-color: #cfc8bb; background-size: cover; background-position: center; overflow: hidden; }

/* tratamentos de imagem (cada modelo escolhe um) */
.tr-duo { isolation: isolate; }
.tr-duo::after { content: ""; position: absolute; inset: 0; background: var(--duo, #2f4d34); mix-blend-mode: color; pointer-events: none; border-radius: inherit; }
.tr-gray { filter: grayscale(1) contrast(1.15); }
.tr-sepia { filter: sepia(.7) saturate(.9) contrast(1.05); }
.tr-dark { filter: brightness(.7) contrast(1.08) saturate(.9); }
.tr-warm { filter: saturate(1.12) sepia(.1); }

/* ---------- vídeo de hero: pôster primeiro, animação só depois do load ---------- */
.vid { position: relative; overflow: hidden; background: #111; }
.vid__poster, .vid__play { position: absolute; inset: 0; }
.vid__play { opacity: 0; transition: opacity 1.2s ease; animation: vid-pan 18s ease-in-out infinite alternate; transform-origin: 60% 50%; }
.vid__play::after { content: ""; position: absolute; inset: -20%; background: radial-gradient(40% 30% at 30% 40%, rgba(255,240,210,.22), transparent 70%), radial-gradient(30% 25% at 70% 70%, rgba(255,255,255,.10), transparent 70%); animation: vid-light 9s ease-in-out infinite alternate; }
html.vid-ready .vid__play { opacity: 1; }
.vid.is-paused .vid__play, .vid.is-paused .vid__play::after { animation-play-state: paused; }
@keyframes vid-pan { from { transform: scale(1.02) translate3d(0,0,0); } to { transform: scale(1.14) translate3d(-3%, -2%, 0); } }
@keyframes vid-light { from { transform: translate3d(-6%, 0, 0); } to { transform: translate3d(8%, 4%, 0); } }
.vid__ctrl { position: absolute; z-index: 5; inset-inline-end: 12px; bottom: 12px; display: flex; gap: 8px; align-items: center; }
.vid__tag { font: 600 11px/1 var(--font-body, system-ui), var(--intl-fallback); letter-spacing: .04em; background: rgba(0,0,0,.45); color: #fff; padding: 6px 8px; border-radius: 4px; }
.vid__pause { min-width: 44px; min-height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.55); background: rgba(0,0,0,.4); color: #fff; cursor: pointer; display: none; align-items: center; justify-content: center; }
html.js .vid__pause { display: inline-flex; }
@media (max-width: 767px) { .vid--hybrid .vid__play { display: none; } .vid--hybrid .vid__pause { display: none !important; } .vid--hybrid .vid__tag { display: none; } }
@media (prefers-reduced-motion: reduce) { .vid__play { display: none; } .vid__pause { display: none !important; } }

/* ---------- motor de reservas (widget) ---------- */
.bk {
  --_bg: var(--bk-bg, #fff); --_ink: var(--bk-ink, #151515); --_line: var(--bk-line, rgba(0,0,0,.16));
  --_r: var(--bk-radius, 10px); --_btn: var(--bk-btn, #151515); --_btnink: var(--bk-btn-ink, #fff);
  background: var(--_bg); color: var(--_ink); border-radius: var(--_r);
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: var(--bk-pad, 14px);
  box-shadow: var(--bk-shadow, none); border: var(--bk-border, 0);
}
.bk__f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bk__f label { font-size: .72rem; font-weight: 600; letter-spacing: var(--bk-label-track, .05em); text-transform: var(--bk-label-case, uppercase); opacity: .8; }
.bk__f input, .bk__f select {
  font-size: 16px; min-height: 46px; width: 100%; min-width: 0; padding: 0 10px;
  border: 1px solid var(--_line); border-radius: var(--bk-field-radius, calc(var(--_r) * .6)); background: var(--bk-field-bg, transparent); color: inherit;
}
.bk__prop, .bk__guests, .bk__go, .bk__terms { grid-column: 1 / -1; }
.bk__go {
  min-height: 48px; border: 0; border-radius: var(--bk-btn-radius, calc(var(--_r) * .6)); background: var(--_btn); color: var(--_btnink);
  font-weight: 700; padding: 0 22px; cursor: pointer; letter-spacing: var(--bk-btn-track, 0); text-transform: var(--bk-btn-case, none);
}
.bk__terms { font-size: .76rem; margin: 0; opacity: .85; }
.bk__terms a { color: inherit; }
@media (min-width: 900px) {
  .bk--bar { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; }
  html.is-multi .bk--bar { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)) auto; }
  .bk--bar .bk__prop, .bk--bar .bk__guests, .bk--bar .bk__go { grid-column: auto; }
}
.bk--line .bk__f input, .bk--line .bk__f select { border-width: 0 0 1px; border-radius: 0; padding-inline: 0; }
.bk__result { grid-column: 1 / -1; font-size: .85rem; padding: 10px 12px; border-radius: calc(var(--_r) * .6); background: rgba(127,127,127,.12); }
.bk__result a { font-weight: 700; }

/* ---------- calendário de disponibilidade (dias fechados e preço por noite) ---------- */
.bk { position: relative; }
.bk__in input, .bk__out input { cursor: pointer; caret-color: transparent; }
.cal {
  position: absolute; z-index: 60; top: calc(100% + 8px); inset-inline-start: 0; width: min(720px, calc(100vw - 32px));
  background: var(--cal-bg, #fff); color: var(--cal-ink, #151515); border: 1px solid var(--cal-line, rgba(0,0,0,.12));
  border-radius: var(--cal-radius, 16px); padding: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.35);
  font-family: var(--font-body, system-ui), var(--intl-fallback, sans-serif); text-align: start;
}
.cal[hidden] { display: none; }
.cal--inline { position: static; grid-column: 1 / -1; width: auto; box-shadow: none; padding: 10px 0 0; border: 0; background: transparent; }
.cal__top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cal__msg { flex: 1; margin: 0; font-size: .82rem; line-height: 1.3; text-align: center; min-height: 2.6em; display: flex; align-items: center; justify-content: center; }
.cal__nav { min-width: 44px; min-height: 44px; border-radius: 999px; border: 1px solid var(--cal-line, rgba(0,0,0,.16)); background: transparent; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.cal__months { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.cal__mt { margin: 0 0 6px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; text-align: center; opacity: .85; }
.cal__g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal__w { font-size: .66rem; text-align: center; opacity: .6; padding: 4px 0; text-transform: uppercase; }
.cal__d {
  min-height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; padding: 2px 0; font: inherit;
}
.cal__d:hover:not([disabled]) { background: var(--cal-hover, rgba(127,127,127,.16)); }
.cal__d:focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: 1px; }
.cal__n { font-size: .9rem; line-height: 1; }
.cal__p { font-size: .58rem; line-height: 1; opacity: .7; min-height: .6rem; }
.cal__d[disabled] { cursor: default; opacity: .32; }
.cal__d.is-closed .cal__n { text-decoration: line-through; }
.cal__d.is-in { background: var(--cal-range, rgba(127,127,127,.16)); border-radius: 0; }
.cal__d.is-end { background: var(--cal-sel, #151515); color: var(--cal-sel-ink, #fff); opacity: 1; }
.cal__d.is-end .cal__p { opacity: .85; }
.cal__foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cal__note { flex: 1; font-size: .7rem; opacity: .7; }
.cal__x { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--cal-line, rgba(0,0,0,.16)); background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: .78rem; }
.cal--inline .cal__x { display: none; }
@media (max-width: 767px) { .cal:not(.cal--inline) { inset-inline: 0; width: auto; } }

/* ---------- barra fixa inferior (celular) ---------- */
.mbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
  background: var(--mbar-bg, #fff); color: var(--mbar-ink, #151515);
  border-top: 1px solid var(--mbar-line, rgba(0,0,0,.12));
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(0,0,0,.10);
  transition: transform .2s ease;
  font-family: var(--font-body, system-ui), var(--intl-fallback);
}
.mbar__row { display: flex; align-items: center; gap: 10px; min-height: 52px; }
.mbar__txt { flex: 1; min-width: 0; font-size: .78rem; line-height: 1.25; }
.mbar__txt strong { display: block; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbar__btn {
  min-height: 48px; min-width: 44px; padding: 0 18px; border-radius: var(--mbar-radius, 10px); border: 0;
  background: var(--mbar-btn, #151515); color: var(--mbar-btn-ink, #fff); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.mbar__alt { min-height: 48px; min-width: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--mbar-radius, 10px); border: 1px solid var(--mbar-line, rgba(0,0,0,.18)); text-decoration: none; color: inherit; }
.mbar details > summary { list-style: none; cursor: pointer; }
.mbar details > summary::-webkit-details-marker { display: none; }
.mbar .bk { --bk-pad: 10px 0 4px; --bk-bg: transparent; --bk-ink: currentColor; }
.mbar details[open] .mbar__hint { display: none; }
@media (min-width: 768px) { .mbar { display: none; } }
@media (max-width: 767px) {
  body.has-mbar { padding-bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom)); }
  body.has-mbar .cookie-banner { bottom: calc(var(--mbar-h) + 12px + env(safe-area-inset-bottom)); }
}
html.kb-open .mbar, html.mbar-off .mbar:not(:focus-within):not(.tabs) { transform: translateY(115%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }

/* ---------- movimento (sempre opcional) ---------- */
html.motion .rv { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
html.motion .rv.in { opacity: 1; transform: none; }
html.motion .rv-d1 { transition-delay: .08s; } html.motion .rv-d2 { transition-delay: .16s; } html.motion .rv-d3 { transition-delay: .24s; }

/* cartões empilhados: só desktop e sem "reduzir movimento"; no celular vira pilha simples */
.stack { display: grid; gap: 20px; }
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .stack { gap: 14vh; padding-bottom: 8vh; }
  .stack > .stack__item { position: sticky; top: calc(var(--stack-top, 90px) + var(--i, 0) * 16px); transform-origin: 50% 0; will-change: transform; }
}

/* parallax só com CSS de linha do tempo de rolagem; desligado no celular e com reduzir movimento */
@supports (animation-timeline: view()) {
  @media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    .plx { overflow: hidden; }
    .plx > .plx__in { animation: plx-move linear both; animation-timeline: view(); animation-range: cover; }
    @keyframes plx-move { from { transform: translate3d(0, -7%, 0) scale(1.16); } to { transform: translate3d(0, 7%, 0) scale(1.16); } }
  }
}
.plx__in { position: absolute; inset: 0; }

/* carrossel com snap nativo + botões visíveis */
.car { position: relative; }
.car__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--car-w, 84%); gap: var(--car-gap, 16px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: 10px; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.car__track > * { scroll-snap-align: start; min-width: 0; }
@media (min-width: 768px) { .car__track { grid-auto-columns: var(--car-w-d, calc((100% - 2 * var(--car-gap, 16px)) / 3)); } }
@media (prefers-reduced-motion: reduce) { .car__track { scroll-behavior: auto; } }
.car__nav { display: none; gap: 8px; }
html.js .car__nav { display: flex; }
.car__btn { width: 48px; height: 48px; border-radius: var(--car-btn-radius, 50%); border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.car__btn:disabled { opacity: .35; cursor: default; }
[dir="rtl"] .car__btn .ic, [dir="rtl"] .flip-rtl { transform: scaleX(-1); }

/* menu em tela cheia (funciona sem JS via :target) e gaveta lateral */
.ovm { position: fixed; inset: 0; z-index: 90; display: none; flex-direction: column; justify-content: flex-end; gap: 12px;
  background: var(--ovm-bg, #111); color: var(--ovm-ink, #fff); padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; }
.ovm:target, .ovm.is-open { display: flex; }
.ovm__links { list-style: none; margin: 0; padding: 0; }
.ovm__links a { display: flex; align-items: center; min-height: 56px; font-size: clamp(1.3rem, 5vw, 2.2rem); text-decoration: none; color: inherit; border-bottom: 1px solid rgba(127,127,127,.25); }
.ovm__close { align-self: flex-end; min-width: 56px; min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; border: 1px solid currentColor; color: inherit; text-decoration: none; padding: 0 18px; background: transparent; cursor: pointer; }
@media (min-width: 768px) { .ovm { justify-content: center; padding: 48px 8vw; } .ovm__close { position: absolute; top: 20px; inset-inline-end: 24px; } }
.drawer { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(86vw, 360px); z-index: 90; display: none; flex-direction: column; gap: 8px;
  background: var(--drawer-bg, #fff); color: var(--drawer-ink, #111); padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); overflow-y: auto; }
.drawer:target, .drawer.is-open { display: flex; }
.drawer a.drawer__link { display: flex; align-items: center; min-height: 52px; text-decoration: none; color: inherit; font-weight: 600; border-bottom: 1px solid rgba(127,127,127,.2); }
html.lock { overflow: hidden; }

/* ---------- seletor de idioma (folha grande, amigável ao polegar) ---------- */
.lang { position: relative; }
.lang > summary { list-style: none; cursor: pointer; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: var(--lang-radius, 999px); border: 1px solid var(--lang-line, currentColor); font-size: .82rem; font-weight: 600; letter-spacing: .03em; }
.lang > summary::-webkit-details-marker { display: none; }
.lang__sheet { position: absolute; z-index: 70; top: calc(100% + 8px); inset-inline-end: 0; width: 280px; background: #fff; color: #151515; border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.25); padding: 10px; font-family: var(--font-body, system-ui), var(--intl-fallback); text-transform: none; letter-spacing: 0; }
.lang__sheet h4 { font: 700 .72rem/1 var(--font-body, system-ui), var(--intl-fallback); text-transform: uppercase; letter-spacing: .06em; color: #666; margin: 8px 8px 6px; }
.lang__sheet a, .lang__sheet span.lang__off { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 46px; padding: 0 10px; border-radius: 8px; text-decoration: none; color: inherit; font-size: .95rem; }
.lang__sheet a[aria-current="true"] { background: #f0f0ee; font-weight: 700; }
.lang__sheet a:hover { background: #f5f5f3; }
.lang__sheet span.lang__off { color: #8a8a8a; font-size: .82rem; }
.lang__sheet small { color: #777; font-size: .72rem; }
.lang__cur { display: flex; gap: 6px; padding: 0 8px 6px; }
.lang__cur a { flex: 1; justify-content: center; border: 1px solid #ddd; min-height: 44px; }
@media (max-width: 767px) {
  .lang__sheet { position: fixed; top: auto; bottom: 0; inset-inline: 0; width: auto; border-radius: 18px 18px 0 0; padding: 14px 14px calc(18px + env(safe-area-inset-bottom)); z-index: 95; box-shadow: 0 -10px 40px rgba(0,0,0,.3), 0 0 0 100vmax rgba(0,0,0,.35); }
}
[lang="ar"] body, [lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4 { font-family: "Noto Sans Arabic", "Noto Naskh Arabic", var(--intl-fallback) !important; }
[lang="ar"] * { letter-spacing: 0 !important; }
[lang="ja"] body { font-family: "Noto Sans JP", var(--intl-fallback); }
.sys { text-decoration: underline dotted rgba(127,127,127,.6); text-underline-offset: 3px; }
html:not(.pv-sys) .sys { text-decoration: none; }
.i18n-note { display: none; }
html.lang-foreign .i18n-note { display: block; }

/* ---------- modos: 1 propriedade × várias, conteúdo incompleto ---------- */
html:not(.is-multi) [data-only="multi"] { display: none !important; }
html.is-multi [data-only="single"] { display: none !important; }
html.is-incomplete [data-hide-incomplete] { display: none !important; }

/* ---------- barra de controles da prévia (não faz parte do site) ---------- */
.pv { position: relative; z-index: 60; background: #16181b; color: #eceef1; font: 500 13px/1.3 system-ui, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: 0; text-transform: none; }
.pv__row { display: flex; gap: 8px; align-items: center; padding: 6px 12px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.pv__row::-webkit-scrollbar { display: none; }
.pv a { color: #fff; text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 6px; }
.pv a:hover { background: #2a2e33; }
.pv__name { color: #aeb4bc; }
.pv select, .pv button { min-height: 36px; border-radius: 6px; border: 1px solid #3a3f46; background: #24282d; color: #fff; padding: 0 10px; cursor: pointer; font: inherit; }
.pv__seg { display: inline-flex; border: 1px solid #3a3f46; border-radius: 7px; overflow: hidden; flex: none; }
.pv__seg button { border: 0; border-radius: 0; }
.pv__seg button[aria-pressed="true"], .pv button.pv__tg[aria-pressed="true"] { background: #eceef1; color: #16181b; }
.pv__lbl { color: #8b929b; font-size: 12px; }
.pv-gap { background: #fff7e0; color: #4a3a05; border-bottom: 1px solid #efd98f; padding: 10px 16px; font: 500 13px/1.45 system-ui, "Segoe UI", Roboto, Arial, sans-serif; }
.pv-gap strong { display: block; margin-bottom: 4px; }
.pv-gap ul { margin: 0; padding-inline-start: 18px; }
.pv-note { font: 500 12px/1.4 system-ui, "Segoe UI", Roboto, Arial, sans-serif; background: #eef3ff; color: #203a74; padding: 8px 12px; border-radius: 8px; }
.proto-foot { font: 500 12px/1.4 system-ui, "Segoe UI", Roboto, Arial, sans-serif; opacity: .75; margin-top: 18px; }

/* Widget antigo de busca da Foco (de antes do tema): no celular cobria metade da tela. O tema tem a própria barra de reserva. */
#motor-reserva-widget-search { display: none !important; }

/* Botão do WhatsApp (Click to Chat) some enquanto a barra de reserva está aberta no celular; antes cobria o campo de hóspedes. */
body:has(.mbar details[open]) #ht-ctc-chat { display: none !important; }

/* Celular: a lista de idiomas fica dentro do topo e a barra de reserva ficava por cima dela; some a barra (e o WhatsApp) enquanto a lista estiver aberta. */
@media (max-width: 767px) { body:has(.lang[open]) .mbar, body:has(.lang[open]) #ht-ctc-chat { visibility: hidden !important; } }