/* Green House · reservas. Cores e medidas do mockup aprovado (mockup/project/*.dc.html). */
:root {
  --verde: #1A6B35;
  --verde-escuro: #14532B;
  --verde-claro: #E5F2E8;
  --verde-ok: #E6F4EA;
  --verde-ok-txt: #134D28;
  --grafite: #222A25;
  --fundo: #F4F7F4;
  --branco: #FFFFFF;
  --linha: #DDE5DF;
  --linha-forte: #C5D1C8;
  --linha-fina: #EEF2EF;
  --apagado: #58635C;
  --ambar: #F2B544;
  --ambar-forte: #E8A33D;
  --pac-bg: #FFF4DE;
  --pac-bd: #F0C77A;
  --pac-txt: #7A4A00;
  --pac-txt-forte: #5E3900;
  --feriado: #C77700;
  --ocupado-bg: #E7ECE8;
  --ocupado-txt: #6C7870;
  --passado-txt: #9CA79F;
  --vermelho: #B42318;
  --vermelho-bd: #F1C4BF;
  --vermelho-bg: #FFF5F4;
  --raio: 18px;
  --fonte: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--grafite);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.4;
  overflow-x: hidden;
}
html.travado, html.travado body { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: var(--verde); }
a:hover { color: var(--grafite); }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }

button:focus-visible, a:focus-visible, summary:focus-visible, input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible, [tabindex="-1"]:focus-visible {
  outline: 3px solid var(--ambar-forte);
  outline-offset: 2px;
}
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
input[type="text"]:focus, input[type="tel"]:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px #CFE8D5;
}
input::placeholder, textarea::placeholder { color: #7C8880; }

.so-leitor {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: 8px; top: -60px; z-index: 30;
  padding: 10px 14px; border-radius: 10px; background: var(--grafite); color: #fff; font-weight: 700; text-decoration: none;
}
.pular:focus { top: 8px; color: #fff; }

/* coluna central: celular primeiro, no computador fica no meio */
.coluna { width: 100%; max-width: 480px; margin: 0 auto; padding: 0 16px; }

.faixa-demo {
  padding: 6px 16px; text-align: center; font-size: 12px; font-weight: 700;
  background: var(--pac-bg); color: var(--pac-txt-forte); border-bottom: 1px solid var(--pac-bd);
}

/* ---------- galeria ---------- */
.galeria { width: 100%; max-width: 760px; margin: 0 auto; }
.foto-grande { position: relative; height: 300px; background: #DCE9DE; overflow: hidden; touch-action: pan-y; }
.foto-grande img { width: 100%; height: 100%; object-fit: cover; }
.btn-redondo {
  position: absolute; top: 50%; margin-top: -22px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px;
  background: rgba(255, 255, 255, .9); color: var(--grafite);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(34, 42, 37, .25);
}
.btn-redondo:hover { background: #fff; }
.foto-ant { left: 10px; }
.foto-prox { right: 10px; }
.btn-videos {
  position: absolute; left: 12px; bottom: 12px; height: 40px; padding: 0 14px 0 7px; border: 0; border-radius: 999px;
  background: #fff; color: var(--grafite); font-size: 14px; font-weight: 800;
  display: flex; align-items: center; gap: 8px; box-shadow: 0 1px 4px rgba(34, 42, 37, .25);
}
.btn-videos .play {
  width: 28px; height: 28px; border-radius: 14px; background: var(--verde); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.contador {
  position: absolute; right: 12px; bottom: 12px; padding: 5px 10px; border-radius: 999px;
  background: rgba(34, 42, 37, .78); color: #fff; font-size: 12px; font-weight: 700;
}
.minis {
  display: flex; gap: 6px; padding: 8px 16px 2px; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.minis::-webkit-scrollbar { display: none; }
.mini {
  flex: 0 0 auto; width: 56px; height: 56px; padding: 0; border-radius: 10px; border: 2px solid transparent;
  overflow: hidden; background: #DCE9DE; scroll-snap-align: start;
}
.mini img { width: 100%; height: 100%; object-fit: cover; }
.mini[aria-pressed="true"] { border-color: var(--verde); }

@media (min-width: 600px) {
  .galeria { padding: 16px 16px 0; }
  .foto-grande { height: 440px; border-radius: var(--raio); }
  .minis { padding: 10px 0 2px; justify-content: center; }
}

/* ---------- cabeçalho da casa ---------- */
.casa-topo { padding-top: 20px; display: flex; flex-direction: column; gap: 6px; }
.casa-nome { font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.casa-slogan { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--verde); }
.casa-local { font-size: 14px; color: var(--apagado); }

.quadros { padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.quadros-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.quadros-grade.dois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quadro {
  padding: 10px 8px; border-radius: 12px; background: #fff; border: 1px solid var(--linha);
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.quadro-rot { font-size: 12px; font-weight: 700; color: var(--apagado); }
.quadro-val { font-size: 14px; font-weight: 800; }
.quadro-det { font-size: 11px; line-height: 1.3; color: var(--apagado); overflow-wrap: anywhere; }
.quadro.pac { background: var(--pac-bg); border-color: var(--pac-bd); }
button.quadro { font: inherit; color: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
button.quadro:hover { border-color: var(--pac-txt); }
.quadro-abre { display: flex; align-items: center; gap: 4px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.quadro-abre .seta { flex-shrink: 0; transition: transform .2s; }
#q3[aria-expanded="true"] .seta { transform: rotate(180deg); }
.pacotes {
  padding: 14px; border-radius: 14px; background: var(--pac-bg); border: 1px solid var(--pac-bd);
  display: flex; flex-direction: column; gap: 10px;
}
.pacotes-txt { font-size: 13px; line-height: 1.45; color: var(--pac-txt); }
.pacotes-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pacote-item {
  width: 100%; min-height: 56px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--pac-bd); background: #fff;
  font: inherit; color: var(--grafite); text-align: left; cursor: pointer; touch-action: manipulation;
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nome preco" "per preco"; gap: 2px 12px; align-items: center;
}
.pacote-item:hover:not(:disabled) { border-color: var(--pac-txt); }
.pacote-item:disabled { cursor: default; opacity: .65; }
.pacote-nome { grid-area: nome; font-size: 15px; font-weight: 800; }
.pacote-per { grid-area: per; font-size: 13px; color: var(--apagado); }
.pacote-preco { grid-area: preco; font-size: 16px; font-weight: 800; color: var(--pac-txt-forte); white-space: nowrap; }
.pacote-item:disabled .pacote-preco { font-size: 13px; color: var(--ocupado-txt); }
.pacotes-vazio { font-size: 13px; color: var(--pac-txt); }
.quadro.pac .quadro-rot, .quadro.pac .quadro-det { color: var(--pac-txt); }
.quadro.pac .quadro-val { color: var(--pac-txt-forte); }
.linha-precos { font-size: 13px; line-height: 1.45; color: var(--apagado); }
.carregando-txt {
  display: inline-block; min-width: 4em; height: .9em; border-radius: 4px; background: #E3E9E4; color: transparent;
  vertical-align: middle;
}

/* ---------- aviso geral (ex.: data acabou de ser reservada) ---------- */
.aviso {
  margin-top: 16px; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; font-weight: 600;
  background: var(--pac-bg); color: var(--pac-txt-forte); border: 1px solid var(--pac-bd);
}

/* ---------- calendário ---------- */
.cal {
  margin-top: 16px; padding: 14px 12px; background: #fff; border-radius: var(--raio); border: 1px solid var(--linha);
  display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 12px;
}
.cal-topo { display: flex; align-items: center; justify-content: space-between; }
.cal-mes { font-size: 17px; font-weight: 700; }
.cal-nav {
  width: 44px; height: 44px; padding: 0; border-radius: 12px; border: 1px solid var(--linha); background: #fff; color: var(--grafite);
  display: flex; align-items: center; justify-content: center;
}
.cal-nav:disabled { color: #B7C2BA; }
.cal-sem, .cal-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-sem { text-align: center; font-size: 12px; font-weight: 700; color: var(--apagado); }
.dia {
  height: 54px; padding: 0; border-radius: 10px; border: 1px solid #D5DFD8; background: #fff; color: var(--grafite);
  font-size: 15px; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 0; touch-action: manipulation;
}
.dia .n { line-height: 1; }
.dia .p { font-size: 10.5px; line-height: 1; font-weight: 600; color: var(--apagado); letter-spacing: -.01em; white-space: nowrap; }
.dia .p:empty { display: none; }
.dia.fer .p { color: var(--feriado); }
.dia.pacote .p { color: var(--pac-txt); font-weight: 700; }
.dia.sel .p, .dia.sel.fer .p { color: #fff; }
.dia.selpac .p { color: var(--grafite); }
.dia .ponto { width: 5px; height: 5px; border-radius: 3px; background: transparent; }
.dia.fer .ponto { background: var(--feriado); }
.dia:not(:disabled):hover { border-color: var(--verde); }
.dia.passado { background: transparent; border-color: transparent; color: var(--passado-txt); font-weight: 500; }
.dia.ocupado, .dia.indisponivel {
  background: var(--ocupado-bg); border-color: var(--ocupado-bg); color: var(--ocupado-txt); font-weight: 500; text-decoration: line-through;
}
.dia.pacote { background: var(--pac-bg); border-color: var(--pac-bd); color: var(--pac-txt); font-weight: 700; }
.dia.sel { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 800; }
.dia.sel.fer .ponto { background: #fff; }
.dia.selpac { background: var(--ambar-forte); border-color: var(--ambar-forte); color: var(--grafite); font-weight: 800; }
.dia.hoje:not(.sel):not(.selpac) .n { text-decoration: underline; text-underline-offset: 3px; }
.dia-vazio { height: 54px; }
.legenda {
  display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: var(--apagado);
  padding-top: 10px; border-top: 1px solid var(--linha-fina);
}
.legenda span { display: flex; align-items: center; gap: 6px; }
.leg { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.leg.livre { background: #fff; border: 1px solid var(--linha-forte); }
.leg.ocup { background: var(--ocupado-bg); }
.leg.sel { background: var(--verde); }
.leg.pac { background: var(--pac-bg); border: 1px solid var(--pac-bd); }
.leg.fer { width: 6px; height: 6px; border-radius: 3px; background: var(--feriado); }

.cal-estado { padding: 6px 2px; display: flex; flex-direction: column; gap: 10px; }
.cal-estado p { font-size: 14px; line-height: 1.45; color: var(--apagado); }
.esqueleto { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.esqueleto span { height: 46px; border-radius: 10px; background: #EDF1EE; animation: pulsa 1.4s ease-in-out infinite; }
@keyframes pulsa { 50% { opacity: .55; } }
.botoes-linha { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- botões ---------- */
.btn {
  min-height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--linha-forte); background: #fff; color: var(--grafite);
  font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}
.btn:hover { color: var(--grafite); border-color: var(--grafite); }
.btn-bloco { display: flex; width: 100%; }
.btn-verde { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 800; }
.btn-verde:hover { background: var(--verde-escuro); border-color: var(--verde-escuro); color: #fff; }
.btn-verde:disabled { background: #7FA78C; border-color: #7FA78C; }
.btn-ambar { background: var(--ambar); border-color: var(--ambar); color: var(--grafite); font-weight: 800; }
.btn-ambar:hover { background: #F5C566; border-color: #F5C566; }
.btn-alto { min-height: 52px; font-size: 16px; }
.btn-vermelho { background: var(--vermelho); border-color: var(--vermelho); color: #fff; font-weight: 800; }
.btn-vermelho:hover { background: #8F1C13; border-color: #8F1C13; color: #fff; }
.btn-vermelho:disabled { background: #D88A83; border-color: #D88A83; }
.btn-contorno-vermelho { border-color: var(--vermelho-bd); color: var(--vermelho); }
.btn-contorno-vermelho:hover { border-color: var(--vermelho); color: var(--vermelho); }
.btn-texto { border: 0; background: transparent; min-height: 44px; }
.btn-texto:hover { text-decoration: underline; }

/* ---------- resumo escuro ---------- */
.resumo {
  margin-top: 16px; padding: 18px; background: var(--grafite); color: #fff; border-radius: var(--raio);
  display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 12px;
}
.resumo-cab { display: flex; flex-direction: column; gap: 4px; }
.resumo-rot { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #A9C9B0; }
.resumo-tit { font-size: 18px; font-weight: 800; }
.resumo-sub { font-size: 13px; color: #C2CCC5; }
.resumo-dica { font-size: 12px; color: #A9C9B0; }
.resumo-precos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 12px; border-top: 1px solid #3A443D; }
.resumo-precos > div { display: flex; flex-direction: column; gap: 2px; }
.resumo-precos .rot { font-size: 12px; color: #C2CCC5; }
.resumo-precos .val { font-size: 20px; font-weight: 800; }
.resumo-precos .val.sinal { color: #F2C46B; }
.de { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.de s { color: #A5B3A9; }
.selo { font-weight: 800; padding: 1px 6px; border-radius: 6px; background: var(--ambar); color: var(--grafite); font-size: 12px; }
.resumo-aviso { font-size: 13px; line-height: 1.45; color: #FFD48A; }
.vazio {
  margin-top: 16px; padding: 22px 18px; border-radius: var(--raio); border: 1px dashed #BBCBC0;
  font-size: 14px; font-weight: 600; color: var(--apagado); text-align: center;
}

/* ---------- cartões das seções fixas ---------- */
.cartao {
  margin-top: 20px; padding: 18px 14px; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio);
  display: flex; flex-direction: column; gap: 14px;
}
.cartao h2 { font-size: 17px; font-weight: 800; }
.casa-lista { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
.casa-lista li { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.casa-ico {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: var(--verde-claro); color: var(--verde);
  display: flex; align-items: center; justify-content: center;
}
.casa-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.casa-txt strong { font-size: 14px; font-weight: 700; line-height: 1.3; }
.casa-txt span { font-size: 12px; line-height: 1.35; color: var(--apagado); }

.chegar-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chegar-km { font-size: 12px; font-weight: 700; color: var(--verde); }
.mapa { border-radius: 14px; overflow: hidden; border: 1px solid var(--linha); background: #EEF2EC; }
.mapa-svg { width: 100%; height: auto; }
.endereco { display: flex; flex-direction: column; gap: 2px; font-style: normal; }
.endereco strong { font-size: 14px; font-weight: 700; }
.endereco span { font-size: 13px; line-height: 1.45; color: var(--apagado); }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.grade-2 .btn { min-height: 46px; border-radius: 12px; font-size: 14px; padding: 0 8px; }
.credito { font-size: 11px; color: var(--apagado); text-decoration: none; align-self: flex-start; padding: 4px 0; }
.credito:hover { text-decoration: underline; }

.contato { margin-top: 18px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 10px; }
.nota { font-size: 12px; color: var(--apagado); text-align: center; line-height: 1.45; }

/* animação do mapa (mesma do mockup) */
.gh-rota { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: ghRota 7s linear infinite; }
@keyframes ghRota { 0%, 8% { stroke-dashoffset: 1000; } 62%, 100% { stroke-dashoffset: 0; } }
.gh-pulso { transform-box: fill-box; transform-origin: center; animation: ghPulso 1.8s ease-out infinite; }
@keyframes ghPulso { 0% { transform: scale(.7); opacity: .5; } 100% { transform: scale(2.3); opacity: 0; } }

/* ---------- passos 2 e 3 ---------- */
.barra { background: #fff; border-bottom: 1px solid var(--linha); }
.barra-in { height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.barra-voltar {
  height: 44px; margin-left: -10px; padding: 0 10px; border: 0; background: transparent; color: var(--grafite);
  display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 600;
}
.barra-marca { font-size: 15px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.barra-passo { font-size: 13px; font-weight: 600; color: var(--apagado); }

.titulo-passo { padding-top: 20px; display: flex; flex-direction: column; gap: 4px; }
.titulo-passo h1 { font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.titulo-passo p { font-size: 14px; color: var(--apagado); }
.titulo-passo.centro { padding-top: 24px; align-items: center; text-align: center; gap: 10px; }
.titulo-passo.centro p { font-size: 15px; line-height: 1.45; }
.circulo-ok {
  width: 56px; height: 56px; border-radius: 28px; background: var(--verde-claro); color: var(--verde);
  display: flex; align-items: center; justify-content: center;
}

.caixa {
  margin-top: 16px; padding: 16px; background: #fff; border: 1px solid var(--linha); border-radius: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.caixa-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.caixa-cab .tit { font-size: 16px; font-weight: 800; }
.caixa-cab .sub { font-size: 13px; color: var(--apagado); }
.link-btn {
  border: 0; background: transparent; padding: 4px 0; min-height: 44px; margin-top: -10px;
  color: var(--verde); font-size: 14px; font-weight: 700; text-decoration: underline; white-space: nowrap;
}
.link-btn:hover { color: var(--grafite); }
.precos-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 12px; border-top: 1px solid var(--linha-fina); }
.precos-2 > div { display: flex; flex-direction: column; gap: 2px; }
.precos-2 .rot { font-size: 12px; color: var(--apagado); }
.precos-2 .val { font-size: 18px; font-weight: 800; }
.precos-2 .val.verde { color: var(--verde); }
.precos-2 .det { font-size: 12px; color: var(--apagado); }
.precos-2 .selo { vertical-align: 2px; margin-left: 4px; }

.form { padding-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label, .rotulo { font-size: 14px; font-weight: 700; }
.opcional { font-weight: 500; color: var(--apagado); }
.campo input[type="text"], .campo input[type="tel"], .campo textarea {
  width: 100%; height: 50px; padding: 0 14px; border: 1px solid var(--linha-forte); border-radius: 12px;
  background: #fff; color: var(--grafite); font-size: 16px;
}
.campo textarea { height: auto; padding: 12px 14px; resize: vertical; min-height: 90px; }
.campo select {
  width: 100%; height: 50px; padding: 0 30px 0 14px; border: 1px solid var(--linha-forte); border-radius: 12px;
  color: var(--grafite); font-size: 16px; -webkit-appearance: none; appearance: none; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23222A25' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
}
/* cadastro: endereço em grupo, número + complemento e cidade + UF lado a lado */
.grupo { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.grupo legend { padding: 0; margin-bottom: 14px; font-size: 15px; font-weight: 800; }
.linha-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 10px; align-items: start; }
.linha-2.cidade-uf { grid-template-columns: minmax(0, 1fr) 92px; }
.ajuda { font-size: 12px; color: var(--apagado); }
.erro-campo { font-size: 13px; font-weight: 700; color: var(--vermelho); }
[aria-invalid="true"] { border-color: var(--vermelho) !important; }

.pessoas { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pessoas-txt { display: flex; flex-direction: column; gap: 2px; }
.stepper {
  display: flex; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--linha-forte); border-radius: 14px; padding: 3px;
  flex-shrink: 0;
}
.stepper button {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: #EEF3EF; color: var(--grafite);
  display: flex; align-items: center; justify-content: center;
}
.stepper button:disabled { opacity: .45; }
.campo .stepper input[type="text"] {
  width: 48px; height: 44px; padding: 0; border: 0; border-radius: 8px; text-align: center; font-size: 18px; font-weight: 800; background: transparent;
}
.campo .stepper input[type="text"]:focus { outline: 3px solid var(--ambar-forte); outline-offset: 0; box-shadow: none; }
.campo .stepper input[aria-invalid="true"] { outline: 2px solid var(--vermelho); outline-offset: -2px; }

.regras { background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 0 14px; }
.regras summary {
  min-height: 48px; display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 700;
  cursor: pointer; list-style: none;
}
.regras summary::-webkit-details-marker { display: none; }
.regras summary svg { transition: transform .15s; }
.regras[open] summary svg { transform: rotate(180deg); }
.regras > ul { margin: 0; padding: 0 0 14px 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.45; color: #364039; }

.aceite { display: flex; align-items: flex-start; gap: 12px; }
.aceite input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--verde); flex-shrink: 0; }
.campo .aceite label { font-size: 14px; line-height: 1.45; padding: 0 0 6px; font-weight: 500; }

.isca { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form-erro {
  padding: 12px 14px; border-radius: 12px; background: var(--vermelho-bg); border: 1px solid var(--vermelho-bd);
  color: var(--vermelho); font-size: 14px; line-height: 1.45; font-weight: 600;
}
.form-erro .btn { margin-top: 10px; }
.texto-centro { font-size: 13px; line-height: 1.5; color: var(--apagado); text-align: center; }
.privacidade { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--apagado); text-align: center; }
.privacidade svg { flex-shrink: 0; }
.privacidade-topo { justify-content: flex-start; text-align: left; font-size: 13px; line-height: 1.4; }

.andamento { margin: 18px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.andamento li { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--apagado); }
.andamento .barrinha { height: 6px; border-radius: 3px; background: #D5DFD8; }
.andamento li.feito { color: var(--verde-escuro); font-weight: 700; }
.andamento li.feito .barrinha { background: var(--verde); }
.andamento li.agora { color: var(--pac-txt); font-weight: 700; }
.andamento li.agora .barrinha { background: var(--ambar-forte); }

.dados { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; font-size: 14px; }
.dados dt { color: var(--apagado); }
.dados dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.passos-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.passos-lista li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.num {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 13px; background: var(--verde-claro); color: var(--verde);
  font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.caixa-nota { padding-top: 10px; border-top: 1px solid var(--linha-fina); font-size: 13px; line-height: 1.45; color: var(--apagado); }
.caixa-tit { font-size: 14px; font-weight: 800; }
.codigo { font-size: 12px; font-weight: 700; color: var(--apagado); }

/* ---------- contrato (passo 2, seção fixa e página do dono) ---------- */
.contrato { font-size: 14px; line-height: 1.55; color: #364039; overflow-wrap: anywhere; }
.regras .contrato { padding-bottom: 16px; }
.contrato .ct-tit { font-size: 15px; line-height: 1.35; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--grafite); }
.contrato .ct-versao { margin-top: 2px; font-size: 12px; color: var(--apagado); }
.contrato .ct-sec { margin: 16px 0 0; font-size: 14px; font-weight: 800; color: var(--grafite); }
.contrato p { margin-top: 8px; }
.contrato ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.contrato strong { font-weight: 700; color: var(--grafite); }
/* trechos que o dono ainda vai decidir: discreto, só um sublinhado pontilhado */
.a-confirmar { text-decoration: underline dotted #B8862E; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- condições (seção fixa) ---------- */
.condicoes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.45; }
.condicoes li { position: relative; padding-left: 18px; }
.condicoes li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 4px; background: var(--verde); }

/* ---------- aviso de reserva aguardando o sinal (passo 1) ---------- */
.aviso-reserva {
  margin-top: 16px; padding: 10px 10px 10px 14px; border-radius: 14px; background: #FFF1D6; border: 1px solid var(--pac-bd);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.aviso-reserva p { font-size: 14px; line-height: 1.4; font-weight: 700; color: var(--pac-txt-forte); }
.aviso-reserva .btn { min-height: 44px; }

/* ---------- passo 3: pague o sinal ---------- */
.circulo-ok.ambar { background: #FFF1D6; color: #9A5B00; }
.prazo { margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: #FFF1D6; display: flex; flex-direction: column; gap: 2px; }
.prazo strong { font-size: 14px; font-weight: 800; color: var(--pac-txt-forte); }
.prazo span { font-size: 13px; color: #6B4300; }
.pix { gap: 14px; border-radius: 18px; }
.pix-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pix-tit { font-size: 14px; font-weight: 700; color: var(--apagado); }
.pix-valor { font-size: 24px; font-weight: 800; white-space: nowrap; }
.qr { align-self: center; width: 208px; max-width: 100%; aspect-ratio: 1; background: #fff; }
.qr svg { width: 100%; height: 100%; }
.pix-cc { display: flex; flex-direction: column; gap: 8px; }
.pix-cc .rotulo { font-size: 13px; }
.pix-codigo {
  padding: 12px; border-radius: 10px; background: var(--fundo); border: 1px solid var(--linha);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; color: #364039;
  word-break: break-all; -webkit-user-select: all; user-select: all;
}
.btn-verde.copiado, .btn-verde.copiado:hover { background: var(--grafite); border-color: var(--grafite); }
.ajuda.texto-centro { text-align: center; }
.ajuda:empty { display: none; }
.pix-sem { font-size: 14px; line-height: 1.45; font-weight: 600; }
.passo3-acoes { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.outra { margin: 12px 0 0; color: var(--apagado); font-weight: 600; }
.copia-oculta { position: fixed; top: 0; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- vídeos (tela cheia) ---------- */
.videos {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: #111613; color: #fff;
}
.videos[open] { display: flex; }
.videos::backdrop { background: #111613; }
.videos-in {
  width: 100%; max-width: 760px; height: 100%; margin: 0 auto; padding: 14px 16px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.videos-cab { display: flex; align-items: center; justify-content: space-between; }
.videos-cab h2 { font-size: 16px; font-weight: 800; }
.btn-fechar {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px; background: #2A322D; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.btn-fechar:hover { background: #3A443D; }
.videos-escolha { display: flex; gap: 8px; }
.videos-escolha button {
  height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #56625A; background: transparent; color: #fff;
  font-size: 14px; font-weight: 700;
}
.videos-escolha button[aria-pressed="true"] { background: #fff; color: #111613; border-color: #fff; }
.videos video { flex: 1 1 auto; min-height: 0; width: 100%; border-radius: 14px; background: #000; object-fit: contain; }
.videos-dur { font-size: 12px; color: #AEBBB2; text-align: center; }

/* ---------- página do dono ---------- */
.selo-sit { align-self: flex-start; font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; background: #E6E8FA; color: #2F3A84; }
.selo-sit.aceito { background: #FFF1D6; color: #6B4300; }
.selo-sit.pago { background: var(--verde-ok); color: var(--verde-ok-txt); }
.selo-sit.encerrado { background: #EEF1F2; color: #404D45; }
.dono-topo { padding-top: 20px; display: flex; flex-direction: column; gap: 6px; }
.dono-topo h1 { margin-top: 4px; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.dono-whats { align-self: flex-start; font-size: 15px; font-weight: 700; padding: 6px 0; }
.dono-quando { font-size: 12px; color: var(--apagado); }
.livre-ok, .livre-nao {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; font-size: 14px; font-weight: 700;
}
.livre-ok { background: var(--verde-ok); color: var(--verde-ok-txt); }
.livre-nao { background: var(--vermelho-bg); color: var(--vermelho); border: 1px solid var(--vermelho-bd); }
.livre-ok svg, .livre-nao svg { flex-shrink: 0; }
.acoes { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.motivos { display: flex; flex-direction: column; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.motivos legend { padding: 0; margin-bottom: 4px; font-size: 15px; font-weight: 800; }
.motivo {
  position: relative; min-height: 48px; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--linha); background: #fff;
  font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; cursor: pointer;
}
.motivo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.motivo .bola {
  width: 18px; height: 18px; flex-shrink: 0; border-radius: 9px; border: 2px solid #AEBBB2;
  display: flex; align-items: center; justify-content: center;
}
.motivo .bola::after { content: ''; width: 8px; height: 8px; border-radius: 4px; background: transparent; }
.motivo.marcado { border-color: var(--vermelho); background: var(--vermelho-bg); }
.motivo input:checked + .bola { border-color: var(--vermelho); }
.motivo input:checked + .bola::after { background: var(--vermelho); }
.motivo input:focus-visible + .bola { outline: 3px solid var(--ambar-forte); outline-offset: 2px; }
.painel-ok {
  margin-top: 16px; padding: 18px 16px; border-radius: 16px; background: var(--verde-ok); color: var(--verde-ok-txt);
  display: flex; flex-direction: column; gap: 8px;
}
.painel-ok .tit { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; }
.painel-ok p { font-size: 14px; line-height: 1.5; color: var(--grafite); }
.painel-cinza { background: #EEF1F2; color: var(--grafite); }
.rodape-dono { margin: 18px 0 0; padding-bottom: 32px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--apagado); text-align: center; }
.confirma { padding: 12px 14px; border-radius: 12px; background: var(--vermelho-bg); border: 1px solid var(--vermelho-bd); display: flex; flex-direction: column; gap: 10px; }
.confirma p { font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--vermelho); }
.precos-2.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.prazo-linha { padding: 10px 12px; border-radius: 12px; background: #FFF1D6; color: var(--pac-txt-forte); font-size: 13px; line-height: 1.45; font-weight: 700; }
.prazo-linha.ok { background: var(--verde-ok); color: var(--verde-ok-txt); }
.aviso-dono { padding: 12px 14px; border-radius: 12px; background: #FFF1D6; color: var(--pac-txt-forte); font-size: 14px; line-height: 1.45; font-weight: 600; }
.contrato-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.contrato-cab .btn { min-height: 44px; font-size: 14px; }

.centro-msg { padding-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.centro-msg h1 { font-size: 22px; font-weight: 800; }
.centro-msg p { font-size: 15px; line-height: 1.5; color: var(--apagado); }

@media (prefers-reduced-motion: reduce) {
  .gh-rota { animation: none; stroke-dashoffset: 0; }
  .gh-pulso, .gh-carro { display: none; }
  .esqueleto span { animation: none; }
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
.fim-passo { height: 32px; }
.videos { position: fixed; inset: 0; z-index: 50; }
.videos:not([open]) { display: none; }

/* ---------- impressão: na página do dono sai só o contrato ---------- */
@media print {
  @page { margin: 16mm; }
  html, body { background: #fff; }
  .pagina-dono .faixa-demo, .pagina-dono .barra, .pagina-dono main > :not(#pedido),
  .pagina-dono #pedido > :not(#contrato-sec), .pagina-dono .contrato-cab, .pagina-dono #contrato-nota, noscript { display: none !important; }
  .pagina-dono .coluna { max-width: none; padding: 0; }
  .pagina-dono #contrato-sec { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
  .pagina-dono .contrato { color: #000; font-size: 11pt; line-height: 1.5; }
  .pagina-dono .contrato .ct-tit, .pagina-dono .contrato .ct-sec, .pagina-dono .contrato strong { color: #000; }
  .pagina-dono .contrato .ct-tit { font-size: 13pt; }
  .pagina-dono .contrato .ct-sec { font-size: 11pt; break-after: avoid; page-break-after: avoid; }
  .pagina-dono .contrato li, .pagina-dono .contrato p { break-inside: avoid; page-break-inside: avoid; }
}

/* ---------- menu do topo (só no passo 1) ---------- */
.topo-site {
  position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--linha); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px);
}
.topo-site[hidden] { display: none; }
.topo-in { max-width: 760px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 8px; min-height: 60px; }
.topo-marca {
  display: flex; align-items: center; gap: 8px; margin-right: auto; min-height: 44px;
  color: var(--grafite); text-decoration: none; font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; min-width: 0;
}
.topo-marca:hover { color: var(--verde); }
.topo-marca img { display: block; }
.topo-links { display: none; }
.topo-reservar { min-height: 44px; padding: 0 14px; font-size: 14px; text-decoration: none; }
.topo-menu {
  min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--linha-forte); background: #fff; color: var(--grafite);
  font: inherit; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; cursor: pointer;
}
.topo-menu .ico-fechar, .topo-site.aberto .topo-menu .ico-abrir { display: none; }
.topo-site.aberto .topo-menu .ico-fechar { display: block; }
@media (max-width: 419px) {
  .topo-menu { width: 44px; padding: 0; justify-content: center; }
  .topo-menu span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topo-marca { font-size: 14px; gap: 6px; }
}
.menu {
  max-width: 760px; margin: 0 auto; padding: 4px 16px 16px; display: flex; flex-direction: column;
  border-top: 1px solid var(--linha-fina);
}
.menu[hidden] { display: none; }
.menu a {
  min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 4px;
  border-bottom: 1px solid var(--linha-fina); color: var(--grafite); text-decoration: none; font-size: 16px; font-weight: 600;
}
.menu a:hover { color: var(--verde); }
.menu .menu-whats { border-bottom: 0; margin-top: 8px; color: var(--verde); font-weight: 700; }
@media (min-width: 860px) {
  .topo-in { max-width: 1040px; }
  .topo-links { display: flex; align-items: center; gap: 2px; }
  .topo-links a {
    min-height: 44px; display: flex; align-items: center; padding: 0 10px; border-radius: 10px;
    color: var(--grafite); text-decoration: none; font-size: 14px; font-weight: 600;
  }
  .topo-links a:hover { background: var(--verde-claro); color: var(--verde); }
  .topo-menu, .menu { display: none !important; }
}