/* ==========================================================================
   BRUMA RASA · ambiente de demonstração
   Dois mundos no mesmo sítio:
     .mundo-hotel    o website do hóspede, com a marca
     .mundo-consola  o back-office, denso e funcional
   ========================================================================== */

:root {
  --bruma:    #E9E5DE;
  --bruma-2:  #F2EFE9;
  --bruma-3:  #DED8CC;
  --taipa:    #C2AF93;
  --pinheiro: #4B5648;
  --candeia:  #A8712F;   /* preenchimentos, barras, limites */
  --candeia-t:#8A5A1F;   /* o mesmo ocre escurecido, para texto sobre papel */
  --candeia-c:#D69A50;   /* e aclarado, para texto sobre fundo escuro */
  --sombra:   #171512;

  --ink:       #14120F;
  --ink-2:     #3D3931;
  --muted:     #6B655B;
  --line:      rgba(20, 18, 15, .16);
  --line-soft: rgba(20, 18, 15, .08);
  --paper:     #E9E5DE;
  --paper-2:   #F2EFE9;

  --ok:    #4B6B4F;
  --aviso: #A8712F;
  --erro:  #8C4A3F;
  --info:  #4E6478;

  --f-display: "Palatino Linotype", "Book Antiqua", Palatino, "Iowan Old Style", Georgia, serif;
  --f-body: "Segoe UI", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  --gut: clamp(18px, 4vw, 56px);
  --barra: 46px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--barra);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
table { border-collapse: collapse; width: 100%; }

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gut); }
.wrap--m { max-width: 980px; }
.wrap--s { max-width: 680px; }

.mono { font-family: var(--f-mono); }
.mut { color: var(--muted); }
.nowrap { white-space: nowrap; }
.dir { text-align: right; }
.tabelawrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   BARRA DE DEMONSTRAÇÃO (sempre no topo, nos dois mundos)
   ========================================================================== */

.demobar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: var(--barra);
  background: color-mix(in srgb, #11100E 94%, transparent); color: #F4F1EB;
  backdrop-filter: blur(14px); border-bottom: 1px solid rgba(244,241,235,.14);
  box-shadow: 0 10px 32px rgba(20,18,15,.12);
  display: grid; grid-template-columns: 220px auto minmax(160px, 1fr) auto; align-items: center; gap: 14px;
  padding: 0 clamp(12px, 3vw, 24px);
  font-size: .78rem;
}
.demobar__sel { display: flex; border: 1px solid rgba(244,241,235,.24); }
.demobar__sel a {
  padding: 7px 14px; text-decoration: none; font-family: var(--f-mono);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(244,241,235,.66); white-space: nowrap;
}
.demobar__sel a.on,
.demobar__sel a[aria-current="page"] { background: #F4F1EB; color: var(--sombra); }
.demobar__eti {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--f-mono);
  font-size: .58rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--candeia-c); white-space: nowrap;
}
.demobar__txt { color: rgba(244,241,235,.6); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .74rem; }
.demobar__acoes { display: flex; gap: 8px; align-items: center; }
.demobar button, .demobar a.bt {
  background: transparent; border: 1px solid rgba(244,241,235,.3); color: #F4F1EB;
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 12px; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.demobar button:hover, .demobar a.bt:hover { background: rgba(244,241,235,.12); }
@media (max-width: 1040px) {
  .demobar { grid-template-columns: 220px auto 1fr; }
  .demobar__txt { display: none; }
  .demobar__acoes { justify-self: end; }
}
@media (max-width: 560px) {
  .demobar { grid-template-columns: auto 1fr; gap: 7px; padding-inline: 8px; }
  .demobar__eti { display: none; }
  .demobar__sel a { padding-inline: 9px; font-size: .61rem; }
  .demobar__acoes { justify-self: end; }
  .demobar button { padding-inline: 9px; font-size: .6rem; }
}

/* ==========================================================================
   MUNDO 1 · O WEBSITE
   ========================================================================== */

.mundo-hotel { font-size: 17px; }

.cab {
  position: sticky; top: var(--barra); z-index: 500;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.cab__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px var(--gut); max-width: 1320px; margin: 0 auto; }
.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.marca__m { width: 26px; height: 26px; border: 1px solid rgba(20,18,15,.42); position: relative; flex: none; }
.marca__m::after { content: ""; position: absolute; left: 5px; right: 5px; top: 50%; height: 1px; background: var(--ink); opacity: .55; box-shadow: 0 -4px 0 rgba(20,18,15,.3), 0 4px 0 rgba(20,18,15,.16); }
.marca__n { font-family: var(--f-body); font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; }
.menu { display: flex; gap: 4px; }
.menu a {
  text-decoration: none; padding: 8px 13px; font-size: .82rem;
  color: var(--ink-2); border-bottom: 1px solid transparent;
}
.menu a:hover { color: var(--ink); }
.menu a.on { border-bottom-color: var(--candeia); color: var(--ink); }
.cab__cta { display: flex; align-items: center; gap: 10px; }
.menu-btn { display: none; background: none; border: 1px solid var(--line); padding: 9px 12px; cursor: pointer; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 940px) {
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper-2); flex-direction: column; padding: 8px var(--gut) 18px; border-bottom: 1px solid var(--line); }
  .menu.aberto { display: flex; }
  .menu a { padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: .95rem; }
  .menu-btn { display: block; }
}

.bt {
  display: inline-block; text-decoration: none; text-align: center;
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 13px 22px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper-2);
  cursor: pointer; transition: opacity .18s;
}
.cab__cta .bt { color: #F4F1EB; }
.bt:hover { opacity: .84; }
.bt:disabled { opacity: .35; cursor: not-allowed; }
.bt--v { background: transparent; color: var(--ink); }
.bt--ac { background: var(--candeia-t); border-color: var(--candeia-t); color: #fff; }
.bt--p { padding: 9px 15px; font-size: .64rem; }
.bt--full { display: block; width: 100%; }

.hero { position: relative; min-height: min(78vh, 720px); display: flex; align-items: flex-end; overflow: hidden; }
.hero video, .hero img.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(233,229,222,.42) 0%, rgba(233,229,222,0) 32%, rgba(233,229,222,.86) 100%); }
.hero__in { position: relative; z-index: 2; width: 100%; padding: 0 var(--gut) clamp(28px, 5vh, 56px); max-width: 1320px; margin: 0 auto; }
.hero h1 { font-family: var(--f-display); font-size: clamp(2rem, 5.4vw, 4rem); line-height: 1.04; letter-spacing: -.015em; max-width: 17ch; }
.hero p { margin-top: 14px; max-width: 46ch; color: var(--ink-2); }

/* experiência audiovisual: o scroll controla a imagem e a narrativa */
.experiencia {
  position: relative;
  height: 360vh;
  min-height: 2200px;
  background: var(--bruma-3);
}
.experiencia__palco {
  position: sticky;
  top: calc(var(--barra) + 67px);
  height: calc(100dvh - var(--barra) - 67px);
  min-height: 520px;
  isolation: isolate;
  overflow: hidden;
  background: var(--bruma-3);
}
.experiencia__palco::after {
  background:
    linear-gradient(90deg, rgba(233,229,222,.93) 0%, rgba(233,229,222,.66) 31%, rgba(233,229,222,.08) 64%, transparent 100%),
    linear-gradient(180deg, rgba(233,229,222,.25), transparent 38%, rgba(233,229,222,.55));
  pointer-events: none;
}
.experiencia__media, .experiencia__cena { position: absolute; inset: 0; margin: 0; }
.experiencia__media { z-index: 0; }
.experiencia__cena { opacity: 0; visibility: visible; transition: none; will-change: opacity; }
.experiencia__cena video { object-position: center 45%; }
.experiencia__nav {
  position: absolute; z-index: 4; top: clamp(14px, 3vw, 28px); left: 50%; transform: translateX(-50%);
  display: flex; padding: 5px; border: 1px solid rgba(20,18,15,.12);
  background: rgba(242,239,233,.76); backdrop-filter: blur(12px);
  max-width: calc(100% - 32px); overflow-x: auto;
}
.experiencia__nav button {
  flex: none; border: 0; background: transparent; color: var(--muted); cursor: pointer;
  padding: 9px 15px; font-family: var(--f-mono); font-size: .64rem;
  letter-spacing: .11em; text-transform: uppercase; white-space: nowrap;
}
.experiencia__nav button:hover { color: var(--ink); }
.experiencia__nav button.is-on { background: rgba(20,18,15,.42); color: #fff; }
.experiencia__conteudo { z-index: 3; padding-bottom: clamp(44px, 7vh, 72px); }
.experiencia__num {
  display: block; margin-bottom: 15px; font-family: var(--f-mono); font-size: .64rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.experiencia__acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.experiencia__estado {
  position: absolute; z-index: 4; right: var(--gut); bottom: 22px; max-width: none !important;
  margin: 0 !important; color: rgba(20,18,15,.7) !important; font-family: var(--f-mono);
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
}
.reserva-passos { scroll-margin-top: calc(var(--barra) + 72px); }
@media (max-width: 760px) {
  .experiencia { height: 340vh; min-height: 2000px; }
  .experiencia__palco {
    top: calc(var(--barra) + 65px);
    height: calc(100dvh - var(--barra) - 65px);
    min-height: 520px;
  }
  .experiencia__palco::after {
    background: linear-gradient(0deg, rgba(233,229,222,.96) 0%, rgba(233,229,222,.78) 42%, rgba(233,229,222,.06) 78%, transparent 100%);
  }
  .experiencia__nav { left: 12px; right: 12px; transform: none; max-width: none; }
  .experiencia__nav button { padding-inline: 12px; }
  .experiencia__conteudo { padding-bottom: 76px; }
  .experiencia__estado { left: var(--gut); right: var(--gut); bottom: 20px; }
}
.sec { padding: clamp(44px, 7vh, 88px) 0; }
.sec--t { background: var(--paper-2); }
.sec--d { background: var(--sombra); color: #F4F1EB; }
.sec--d .olho, .sec--d .mut { color: rgba(244,241,235,.6); }
.olho { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 16px; }
.olho--ac { color: var(--candeia-t); }
.tit { font-family: var(--f-display); font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.14; letter-spacing: -.01em; max-width: 22ch; }
.tit--s { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.lede { font-family: var(--f-display); font-size: 1.2rem; line-height: 1.5; color: var(--ink-2); max-width: 44ch; }

.cols { display: grid; gap: clamp(24px, 4vw, 56px); }
.cols--2 { grid-template-columns: 1fr 1fr; }
.cols--3 { grid-template-columns: repeat(3, 1fr); }
.cols--l { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); }
@media (max-width: 900px) { .cols--2, .cols--3, .cols--l { grid-template-columns: minmax(0, 1fr); } }

/* motor de reservas embutido */
.motor {
  background: var(--paper-2); border: 1px solid var(--line);
  padding: clamp(16px, 2.4vw, 24px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) auto; gap: 12px; align-items: end;
}
.motor--flut { position: relative; margin-top: -46px; z-index: 5; box-shadow: 0 18px 44px rgba(20,18,15,.10); }
.campo { display: block; }
.campo > span { display: block; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line);
  background: var(--paper); font-size: .95rem; border-radius: 0;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--candeia); outline-offset: -1px; }
.campo--erro input { border-color: var(--erro); }
.campo__erro { color: var(--erro); font-size: .78rem; margin-top: 5px; display: block; }

.cartao-suite { border: 1px solid var(--line); background: var(--paper-2); display: flex; flex-direction: column; }
.cartao-suite img { height: 230px; object-fit: cover; width: 100%; }
.cartao-suite__c { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cartao-suite h3 { font-family: var(--f-display); font-size: 1.35rem; }
.cartao-suite__meta { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cartao-suite__p { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cartao-suite__p b { font-family: var(--f-display); font-size: 1.5rem; font-weight: 400; }

.eti { display: inline-block; font-family: var(--f-mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; padding: 4px 8px; border: 1px solid var(--line); color: var(--muted); }
.eti--ac { border-color: var(--candeia); color: var(--candeia-t); }
.eti--ok { border-color: var(--ok); color: var(--ok); }
.eti--er { border-color: var(--erro); color: var(--erro); }
.eti--i { border-color: var(--info); color: var(--info); }
.eti--c { background: var(--candeia-t); border-color: var(--candeia-t); color: #fff; }

/* passos do motor */
.passos { display: flex; gap: 0; border: 1px solid var(--line); margin-bottom: 30px; overflow: hidden; }
.passos li { list-style: none; flex: 1; padding: 12px 14px; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-right: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.passos li:last-child { border-right: 0; }
.passos li.on { background: var(--ink); color: var(--paper-2); }
.passos li.feito { color: var(--candeia-t); }

.resumo-lat { border: 1px solid var(--line); background: var(--paper-2); padding: 22px; position: sticky; top: calc(var(--barra) + 78px); }
.resumo-lat dl { margin: 0; display: grid; gap: 10px; }
.resumo-lat .l { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; }
.resumo-lat .l b { font-weight: 500; }
.resumo-lat hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.resumo-lat .tot { font-family: var(--f-display); font-size: 1.5rem; }

.aviso {
  border: 1px solid var(--candeia); background: rgba(168,113,47,.07);
  padding: 14px 16px; font-size: .88rem; display: flex; gap: 12px; align-items: flex-start;
}
.aviso b { display: block; font-size: .78rem; font-family: var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--candeia-t); margin-bottom: 4px; }

.rodape { background: var(--sombra); color: rgba(244,241,235,.7); padding: 52px 0 40px; font-size: .88rem; }
.rodape a { color: rgba(244,241,235,.92); }
.rodape h4 { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(244,241,235,.5); margin-bottom: 12px; }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 8px; }

/* ==========================================================================
   MUNDO 2 · A CONSOLA
   ========================================================================== */

.mundo-consola { background: #F4F3F0; font-size: 15px; }
.mundo-consola .app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: calc(100vh - var(--barra)); }

.lateral {
  background: var(--sombra); color: rgba(244,241,235,.72);
  padding: 22px 0; position: sticky; top: var(--barra); height: calc(100vh - var(--barra)); overflow-y: auto;
}
.lateral__marca { padding: 0 20px 22px; border-bottom: 1px solid rgba(244,241,235,.12); margin-bottom: 16px; }
.lateral__marca b { display: block; font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; color: #F4F1EB; }
.lateral__marca span { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,241,235,.42); }
.lateral h5 { font-family: var(--f-mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(244,241,235,.36); padding: 16px 20px 7px; margin: 0; font-weight: 500; }
.lateral a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 20px; text-decoration: none; font-size: .88rem; color: rgba(244,241,235,.72);
  border-left: 2px solid transparent;
}
.lateral a:hover { background: rgba(244,241,235,.06); color: #F4F1EB; }
.lateral a.on { background: rgba(244,241,235,.09); color: #F4F1EB; border-left-color: var(--candeia); }
.lateral a i { font-style: normal; font-family: var(--f-mono); font-size: .64rem; background: rgba(244,241,235,.14); padding: 2px 7px; }

.painel { padding: clamp(18px, 2.4vw, 32px); min-width: 0; }
.painel__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }
.painel__cab h1 { font-family: var(--f-display); font-size: clamp(1.5rem, 2.6vw, 2rem); }
.painel__cab p { color: var(--muted); font-size: .9rem; margin: 4px 0 0; max-width: 68ch; }
.painel__acoes { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 940px) {
  .mundo-consola .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; height: auto; padding: 14px 0; }
  .lateral__nav { display: flex; overflow-x: auto; gap: 2px; padding: 0 12px; }
  .lateral h5 { display: none; }
  .lateral a { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; padding: 9px 13px; }
  .lateral a.on { border-left: 0; border-bottom-color: var(--candeia); }
  .lateral a i { display: none; }
}

.cx { background: #fff; border: 1px solid rgba(20,18,15,.11); }
.cx__c { padding: 18px 20px; }
.cx__t { padding: 14px 20px; border-bottom: 1px solid rgba(20,18,15,.09); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cx__t h3 { font-family: var(--f-display); font-size: 1.1rem; }
.cx__t span { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 1px; background: rgba(20,18,15,.11); border: 1px solid rgba(20,18,15,.11); margin-bottom: 22px; }
.kpi { background: #fff; padding: 16px 18px; }
.kpi b { display: block; font-family: var(--f-display); font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 400; line-height: 1.1; }
.kpi small { display: block; font-family: var(--f-mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }
.kpi em { font-style: normal; font-size: .74rem; color: var(--muted); }
.kpi--ac b { color: var(--candeia-t); }
.kpis--today { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.gcols { display: grid; gap: 18px; }
.gcols--2 { grid-template-columns: 1fr 1fr; }
.gcols--3 { grid-template-columns: repeat(3, 1fr); }
.gcols--l { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.gcols--r { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
@media (max-width: 1080px) { .gcols--2, .gcols--3, .gcols--l, .gcols--r { grid-template-columns: minmax(0, 1fr); } }

/* tabelas de back-office */
.tb { font-size: .86rem; }
.tb th, .tb td { padding: 9px 12px; text-align: left; border-bottom: 1px solid rgba(20,18,15,.08); vertical-align: middle; }
.tb thead th { font-family: var(--f-mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; background: #FAF9F7; position: sticky; top: 0; }
.tb tbody tr:hover { background: #FAF9F7; }
.tb tbody tr.sel { background: rgba(168,113,47,.09); }
.tb td.n { font-family: var(--f-mono); font-size: .82rem; white-space: nowrap; }
.tb .clic { cursor: pointer; }
.tb--fix { max-height: 520px; overflow: auto; }

/* barras */
.barras { display: grid; gap: 9px; }
.barra { display: grid; grid-template-columns: minmax(90px, 150px) 1fr auto; gap: 12px; align-items: center; font-size: .84rem; }
.barra i { display: block; height: 8px; background: rgba(20,18,15,.08); position: relative; }
.barra i b { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--c, var(--candeia)); }
.barra span { font-family: var(--f-mono); font-size: .76rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 560px) { .barra { grid-template-columns: 84px 1fr auto; font-size: .76rem; } }

/* gráfico de colunas */
.colunas { display: flex; align-items: flex-end; gap: 5px; height: 150px; }
.colunas > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; height: 100%; }
.colunas i { display: block; width: 100%; background: rgba(20,18,15,.14); position: relative; }
.colunas i b { position: absolute; left: 0; right: 0; bottom: 0; height: var(--d, 0%); background: var(--candeia); }
.colunas small { font-family: var(--f-mono); font-size: .56rem; color: var(--muted); text-transform: uppercase; }

/* mapa de quartos */
.mapa { font-size: .74rem; }
.mapa th, .mapa td { border: 1px solid rgba(20,18,15,.09); padding: 0; }
.mapa thead th { padding: 6px 4px; font-family: var(--f-mono); font-size: .56rem; text-align: center; color: var(--muted); background: #FAF9F7; font-weight: 500; }
.mapa thead th.fds { background: #F0EDE7; }
.mapa th.q { text-align: left; padding: 6px 10px; width: 118px; font-size: .74rem; font-family: var(--f-body); color: var(--ink); background: #fff; position: sticky; left: 0; z-index: 2; }
.mapa td { height: 30px; position: relative; min-width: 34px; }
.mapa td.livre { background: #fff; }
.mapa td.fds.livre { background: #FBF9F5; }
.mapa .oc { position: absolute; inset: 3px 0; display: flex; align-items: center; padding: 0 7px; font-size: .64rem; color: #fff; white-space: nowrap; overflow: hidden; cursor: pointer; }
.mapa .oc--direto { background: var(--candeia-t); }
.mapa .oc--ota { background: #5B6E8C; }
.mapa .oc--agencia { background: var(--pinheiro); }

/* POS */
.pos { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .9fr); gap: 18px; }
@media (max-width: 1080px) { .pos { grid-template-columns: minmax(0, 1fr); } }
.mesas { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.mesa {
  border: 1px solid rgba(20,18,15,.14); background: #fff; padding: 14px; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; min-height: 86px;
}
.mesa:hover { border-color: var(--candeia); }
.mesa.on { border-color: var(--candeia); background: rgba(168,113,47,.08); box-shadow: inset 0 0 0 1px var(--candeia); }
.mesa.ocupada { background: #FBF7F1; }
.mesa b { font-size: .92rem; font-weight: 500; }
.mesa small { font-family: var(--f-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mesa .val { margin-top: auto; font-family: var(--f-mono); font-size: .8rem; color: var(--candeia-t); }

.menupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.menupos button { border: 1px solid rgba(20,18,15,.12); background: #fff; padding: 11px 12px; text-align: left; cursor: pointer; font-size: .8rem; line-height: 1.3; }
.menupos button:hover { border-color: var(--candeia); background: #FBF7F1; }
.menupos button span { display: block; font-family: var(--f-mono); font-size: .72rem; color: var(--muted); margin-top: 4px; }

.conta { background: #fff; border: 1px solid rgba(20,18,15,.11); display: flex; flex-direction: column; position: sticky; top: calc(var(--barra) + 18px); }
.conta__l { padding: 8px 16px; display: flex; justify-content: space-between; gap: 10px; font-size: .84rem; border-bottom: 1px solid rgba(20,18,15,.06); align-items: center; }
.conta__l button { background: none; border: 0; color: var(--erro); cursor: pointer; font-size: .8rem; padding: 0 4px; }
.conta__t { padding: 14px 16px; border-top: 1px solid rgba(20,18,15,.14); display: flex; justify-content: space-between; font-family: var(--f-display); font-size: 1.3rem; }

/* CRM */
.linha-tempo { list-style: none; margin: 0; padding: 0; }
.linha-tempo li { position: relative; padding: 0 0 18px 22px; border-left: 1px solid rgba(20,18,15,.12); margin-left: 4px; font-size: .86rem; }
.linha-tempo li:last-child { border-left-color: transparent; padding-bottom: 0; }
.linha-tempo li::before { content: ""; position: absolute; left: -4px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: #fff; border: 1px solid var(--ink); }
.linha-tempo li.t-reserva::before { background: var(--candeia); border-color: var(--candeia); }
.linha-tempo li.t-automacao::before { background: var(--info); border-color: var(--info); }
.linha-tempo li.t-pos::before { background: var(--pinheiro); border-color: var(--pinheiro); }
.linha-tempo em { font-style: normal; display: block; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.pontos { display: flex; align-items: center; gap: 8px; }
.pontos i { display: block; width: 54px; height: 6px; background: rgba(20,18,15,.1); position: relative; }
.pontos i b { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--candeia); }

.kanban { display: grid; grid-template-columns: repeat(5, minmax(190px, 1fr)); gap: 10px; overflow-x: auto; }
.kanban__c { background: #EFEDE9; padding: 10px; min-width: 190px; }
.kanban__c h4 { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; display: flex; justify-content: space-between; }
.neg { background: #fff; border: 1px solid rgba(20,18,15,.1); padding: 11px 12px; margin-bottom: 8px; font-size: .82rem; cursor: pointer; }
.neg:hover { border-color: var(--candeia); }
.neg b { display: block; font-weight: 500; margin-bottom: 4px; line-height: 1.3; }
.neg span { font-family: var(--f-mono); font-size: .68rem; color: var(--candeia-t); }

/* fluxos e automações */
.fluxo { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fluxo li.no { border: 1px solid rgba(20,18,15,.16); background: #FAF9F7; padding: 8px 11px; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }
.fluxo li.no.k { border-color: var(--candeia); color: var(--candeia-t); }
.fluxo li.se { color: var(--muted); }

.fluxo-ev { list-style: none; margin: 0; padding: 0; font-family: var(--f-mono); font-size: .74rem; max-height: 380px; overflow-y: auto; }
.fluxo-ev li { padding: 7px 0; border-bottom: 1px solid rgba(20,18,15,.06); display: flex; gap: 10px; align-items: baseline; }
.fluxo-ev li b { color: var(--candeia-t); font-weight: 500; white-space: nowrap; }
.fluxo-ev li span { color: var(--muted); font-size: .68rem; }
.fluxo-ev li em { font-style: normal; color: var(--muted); margin-left: auto; font-size: .66rem; white-space: nowrap; }

/* gaveta lateral */
.gaveta { position: fixed; inset: var(--barra) 0 0 auto; width: min(520px, 100%); background: #fff; border-left: 1px solid rgba(20,18,15,.14); z-index: 800; overflow-y: auto; box-shadow: -20px 0 50px rgba(20,18,15,.14); }
.gaveta__c { padding: 20px 24px; border-bottom: 1px solid rgba(20,18,15,.09); display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; position: sticky; top: 0; background: #fff; }
.gaveta__c h3 { font-family: var(--f-display); font-size: 1.35rem; }
.gaveta__b { padding: 20px 24px 60px; }
.gaveta button.x { background: none; border: 1px solid rgba(20,18,15,.16); width: 32px; height: 32px; cursor: pointer; flex: none; }
.veu { position: fixed; inset: var(--barra) 0 0 0; background: rgba(20,18,15,.34); z-index: 799; border: 0; }

/* login */
.login { min-height: calc(100vh - var(--barra)); display: grid; place-items: center; padding: 40px 20px; background: var(--sombra); }
.login__cx { background: #fff; padding: clamp(28px, 4vw, 44px); width: min(440px, 100%); }
.login__cx h1 { font-family: var(--f-display); font-size: 1.7rem; margin-bottom: 6px; }
.login__cx p { color: var(--muted); font-size: .9rem; }
.login .campo { margin-bottom: 14px; }

.dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; margin: 0; font-size: .86rem; }
.dl dt { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.dl dd { margin: 0; }

.vazio { padding: 40px 20px; text-align: center; color: var(--muted); font-size: .9rem; }

.reserva-shell { min-height: calc(100dvh - var(--barra) - 70px); }
.reserva-intro { margin-top: 16px; }
.reserva-motor { margin-top: 28px; }
.reserva-garantia { margin-top: 22px; }
.form-grid { display: grid; gap: 14px; }
.form-grid--2 { grid-template-columns: 1fr 1fr; }
.form-grid--payment { grid-template-columns: minmax(0, 1fr) 90px 90px; gap: 12px; }

@media (max-width: 760px) {
  :root { --gut: 18px; }
  body { line-height: 1.55; }
  .mundo-hotel { font-size: 16px; }

  .cab__in { padding: 11px var(--gut); gap: 12px; }
  .marca { min-width: 0; }
  .marca__n { font-size: .69rem; letter-spacing: .22em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cab__cta { gap: 7px; }
  .cab__cta .bt { padding: 10px 13px; font-size: .61rem; }
  .menu-btn { padding: 9px 10px; }

  .sec { padding: 48px 0; }
  .tit { font-size: clamp(1.75rem, 8vw, 2.25rem); max-width: 19ch; }
  .lede { font-size: 1.12rem; line-height: 1.48; }
  .cols { gap: 32px; }
  .motor { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 15px; }
  .motor .bt { width: 100%; margin-top: 2px; }
  .motor--flut { margin-top: -24px; }
  .cartao-suite__c { padding: 18px; }
  .cartao-suite__p { align-items: center; }
  .rodape { padding: 44px 0 88px; }
  .rodape .cols { gap: 28px; }

  .reserva-shell { padding-top: 34px; padding-bottom: 68px; }
  .reserva-passos { scroll-margin-top: calc(var(--barra) + 64px); }
  .reserva-passos .cols { gap: 30px; }
  .passos {
    overflow-x: auto; margin: 0 calc(var(--gut) * -1) 30px; border-left: 0; border-right: 0;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  }
  .passos li { flex: 0 0 142px; padding: 12px 14px; overflow: visible; text-overflow: clip; scroll-snap-align: start; }
  .reserva-intro { margin-top: 14px; }
  .reserva-motor { margin-top: 22px; }
  .reserva-garantia { margin-top: 18px; }
  .resumo-lat { position: static; padding: 18px; }
  .op-suite { grid-template-columns: minmax(0, 1fr) !important; }
  .op-suite > img { height: 220px !important; min-height: 0 !important; }
  .form-grid--payment { grid-template-columns: 1fr 1fr; }
  .form-grid--payment .campo:first-child { grid-column: 1 / -1; }

  .mundo-consola { font-size: 14px; }
  .lateral {
    position: sticky; top: var(--barra); z-index: 450; height: auto;
    padding: 8px 0; box-shadow: 0 8px 24px rgba(20,18,15,.12);
  }
  .lateral__marca { display: none; }
  .lateral__nav { padding-inline: 8px; }
  .lateral a { padding: 9px 11px; }
  .painel { padding: 24px 16px 70px; }
  .painel__cab { gap: 15px; margin-bottom: 22px; }
  .painel__cab h1 { font-size: 1.75rem; }
  .painel__cab p { font-size: .88rem; line-height: 1.5; }
  .painel__acoes { width: 100%; }
  .painel__acoes .bt { flex: 1 1 145px; }
  .gcols { gap: 16px; }
  .cx__t { padding: 14px 16px; }
  .cx__c { padding: 17px 16px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 18px; }
  .kpis--today { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi { padding: 15px 14px; }
  .tb th, .tb td { padding: 10px 11px; }
  .mesas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menupos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conta { position: static; }
  .gaveta__c { padding: 17px 18px; }
  .gaveta__b { padding: 18px 18px 80px; }
  .login { padding: 28px 16px 76px; }
  .login__cx { padding: 26px 20px; }
  .dl { gap: 9px 14px; }
  .aviso { padding: 14px; }
}

@media (max-width: 480px) {
  .demobar__sel a { padding-inline: 8px; font-size: .57rem; }
  .demobar button { padding-inline: 8px; font-size: .56rem; }
  .marca__n { display: none; }
  .form-grid--2, .form-grid--payment { grid-template-columns: minmax(0, 1fr); }
  .form-grid--payment .campo:first-child { grid-column: auto; }
  .kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mesas, .menupos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .barra { grid-template-columns: 78px minmax(70px, 1fr) auto; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }