/* v2 — o funil com o sistema visual do site institucional
   (www.pousadaleange.com.br).

   Carregada DEPOIS de componentes.css, só na `v2.html`. O que ela traz do site:

   - o LOGO do cachorro em traço, preto (claro) e branco (escuro), no cabeçalho
     e no rodapé — arquivos em `imagens/`, porque a CSP só aceita imagem local;
   - o CABEÇALHO como cartão claro flutuante, com os cantos de baixo redondos;
   - os BOTÕES em pílula com anel escuro de 2px e seta à direita
     (`button.jsx` do site): verde-limão preenchido na ação, contorno no resto;
   - a COMFORTAA como voz da marca: títulos, rótulos, botões e preços;
   - a COR DA UNIDADE — Serra oliva, Mar petróleo —, como nos títulos do site;
   - as setas de carrossel em círculo escuro translúcido;
   - a caixa de observação cinza tracejada (a nota de idade mínima do site);
   - os ÍCONES do site (`icones-site.js`, carregado antes do `icones.js`):
     Font Awesome e companhia nas comodidades, como nos cartões de
     acomodação do site, e Phosphor onde o site usa Phosphor (widget de
     reserva); e os SELOS de comodidade no desenho do site.

   Nenhuma regra de layout do funil muda aqui: é pele. Tokens de marca.css
   continuam valendo; o que é novo são os tokens `--v2-*`. */

:root{
  --v2-anel: var(--color--black);            /* o anel dos botões do site */
  --v2-serra: #6B6D3E;                       /* oliva do site escurecido: 5.4:1 sobre branco */
  --v2-mar: var(--color--blue--f);           /* petróleo do site: 4.6:1 */
  --v2-curva: cubic-bezier(.23,1,.32,1);     /* a curva do botão do site */
  --v2-nota-bg: #EFEFEC;
  --v2-nota-borda: #C9C9C2;
  --fonte-texto: "Comfortaa", "Urbanist", "Segoe UI", system-ui, sans-serif;
  --r-cartao: 22px;
  /* O check e a seta do site (IoMdCheckmark, FaArrowRight), para pseudo-elementos. */
  --mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M186.301 339.893L96 249.461l-32 30.507L186.301 402 448 140.506 416 110z'%3E%3C/path%3E%3C/svg%3E");
  --mask-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'%3E%3C/path%3E%3C/svg%3E");
}
/* ── a v2 é CLARA, como o site ────────────────────────────────────────
   O site institucional não tem tema escuro: a identidade dele é off-white,
   grafite, limão e petróleo. A v1 segue o tema do sistema; a v2 segue o site.
   Com o sistema no escuro, os arquivos compartilhados (marca.css, funnel.css,
   componentes.css, chat.css) trocam os tokens — então aqui eles VOLTAM aos
   valores claros de marca.css, na mesma media query, que vence por vir depois.
   O `<meta name="color-scheme">` da v2 também é só `light` (ver gerar-v2.mjs):
   é ele que mantém claros os campos nativos, a barra de rolagem e o calendário
   do sistema. */
@media (prefers-color-scheme:dark){
  :root{
    --fundo:        var(--color--white);
    --superficie:   #FFFFFF;
    --superficie-2: #F4F5EC;
    --tinta:        var(--color--black);
    --tinta-forte:  #3A3A3A;
    --tinta-fraca:  #6E6E6E;
    --linha:        #E3E5D8;
    --linha-forte:  #C7CAB6;
    --acao:         var(--color--blue--f);
    --acao-tinta:   #FFFFFF;
    --acao-forte:   #036670;
    --acao-lavada:  #E3F2F3;
    --destaque:       var(--color--green);
    --destaque-tinta: #3D4020;
    --destaque-suave: #F0F4D9;
    --destaque-linha: var(--color--green--f);
    --feito-bg:    var(--color--blue--f);
    --feito-borda: var(--color--blue--f);
    --feito-tinta: #FFFFFF;
    --feito-linha: var(--color--blue--f);
    --selo-bg:    var(--color--green);
    --selo-tinta: #3D4020;
    --selo-borda: var(--color--green);
    --link:      var(--color--blue--f);
    --ok:        var(--color--blue--f);
    --alerta:    #A83A2B;
    --alerta-bg: #FBEAE7;
    --atencao:   #7A5B12;
    --atencao-bg:#FBF3E0;
    --indisponivel: #EDEDE7;
    --indisponivel-tinta: #6B6B6B;
    --sombra:      0 1px 2px rgba(77,77,77,.06), 0 10px 28px rgba(77,77,77,.07);
    --sombra-alta: 0 18px 50px rgba(77,77,77,.18);
    --anel: 0 0 0 3px rgba(4,128,140,.28);
  }
  img{filter:none}
  .aviso-hospedes{--aviso-borda:#e4d3a8;--aviso-marca:#c79a2e;--aviso-fundo:#fdf8ec;--aviso-tinta:#6b5420}
  .err{box-shadow:0 12px 40px rgba(0,0,0,.16),0 0 0 1px var(--linha)}
  body .lc-fabs,body .lc-panel{
    --lc-fundo:var(--lc-offwhite);--lc-superficie:#FFFFFF;--lc-tinta:var(--lc-grafite);
    --lc-tinta-fraca:#6E6E6E;--lc-linha:#E3E5D8;--lc-acao:var(--lc-petroleo);--lc-acao-tinta:#FFFFFF;
    --lc-destaque:var(--lc-lima);--lc-destaque-tinta:#3D4020;--lc-alerta:#A83A2B;
    --lc-sombra:0 2px 6px rgba(77,77,77,.10),0 12px 32px rgba(77,77,77,.14)}
}
/* O botão de WhatsApp do site é o verde do próprio WhatsApp, não o oliva. */
body .lc-fabs,body .lc-panel{--lc-wa:#25D366;--lc-wa-forte:#1DA851;--lc-wa-tinta:#FFFFFF}

/* ── tipografia ───────────────────────────────────────────────────────── */
body{font-size:15px;letter-spacing:.005em}
h1,h2,h3,h4{font-weight:500;letter-spacing:0}
h2{font-size:1.45rem}
/* Campo digitado fica na Urbanist: número de CPF e de telefone em Comfortaa
   confunde 1 com l e 0 com o. */
input,select,textarea{font-family:"Urbanist","Segoe UI",system-ui,sans-serif;font-size:1rem;
  border-radius:12px}

/* ── cabeçalho: o cartão flutuante do site ────────────────────────────── */
/* Medidas tiradas do site no ar (`navegationBar.jsx`): cartão #FBFBFB com
   85% da largura (até 1320px), 81px de altura, 0 36px de respiro, cantos de
   baixo em 20px e sombra de 5px; logo com 40px; o texto do meio no desenho
   dos links do menu (Comfortaa 12px 600); a pílula com anel de 2px, 34px de
   altura e 8px 36px de respiro. O conteúdo continua o do funil. */
.topo-v2{width:85%;max-width:1320px;height:81px;margin:0 auto;padding:0 36px;border:0;
  border-radius:0 0 20px 20px;background:#FBFBFB;box-shadow:0 0 5px rgba(77,77,77,.31);
  display:flex;align-items:center;justify-content:space-between;gap:18px}
.logo-v2{display:flex;align-items:center;flex:0 0 auto;border-radius:8px}
.logo-v2 img{height:40px;width:auto;display:block}
.topo-v2 .frase{font:600 12px var(--fonte-titulo);color:var(--color--black);
  white-space:nowrap;
  /* Ao lado do logo, separado por um fio — no meio do cartão ele ficava
     solto, sem pertencer nem ao logo nem às ações. */
  margin:0 auto 0 0;padding:4px 0 4px 18px;border-left:1px solid rgba(77,77,77,.25)}
.topo-acoes{display:flex;align-items:center;gap:12px}
.pilula{display:inline-flex;align-items:center;gap:4px;height:34px;padding:8px 26px 8px 36px;
  border:2px solid transparent;border-radius:100px;background:#FBFBFB;
  box-shadow:0 0 0 2px var(--color--black);color:var(--color--black);
  font:600 12px var(--fonte-titulo);text-decoration:none;
  transition:all .6s cubic-bezier(.23,1,.32,1)}
.pilula .ic{width:22px;height:22px;margin-left:8px;transition:transform .6s cubic-bezier(.23,1,.32,1)}
.pilula:hover{background:var(--color--black);color:#FBFBFB;border-radius:40px}
.pilula:hover .ic{transform:translateX(4px)}
@media (max-width:1079px){
  /* No celular o site encolhe o cartão e o solta um pouco do topo. */
  .topo-v2{width:calc(100% - 32px);height:68px;margin-top:10px;padding:0 20px;border-radius:20px}
  .topo-v2 .frase{display:none}
  .logo-v2 img{height:36px}
  .pilula{height:34px;padding:6px 16px 6px 20px}
}

/* ── botões: a pílula com anel do site ────────────────────────────────── */
button.primary,a.primary{border-radius:100px;background:var(--color--green);
  color:var(--color--black);box-shadow:0 0 0 2px var(--v2-anel);border:0;
  font-family:var(--fonte-titulo);font-weight:700;letter-spacing:.01em;
  padding:11px 22px 11px 26px;
  transition:background .5s var(--v2-curva),color .5s var(--v2-curva),transform .15s}
/* A seta do site, pintada com a cor do texto: acompanha o hover sem regra extra. */
button.primary::after,a.primary::after{content:"";width:18px;height:18px;flex:0 0 18px;
  background:currentColor;-webkit-mask:var(--mask-seta) center/contain no-repeat;
  mask:var(--mask-seta) center/contain no-repeat;transition:transform .5s var(--v2-curva)}
button.primary:hover,a.primary:hover{background:var(--v2-anel);color:var(--superficie)}
button.primary:hover::after,a.primary:hover::after{transform:translateX(3px)}
button.primary:active,a.primary:active{transform:scale(.97)}
button.primary:disabled{background:var(--superficie-2);color:var(--tinta-fraca);
  box-shadow:0 0 0 2px var(--linha-forte)}
button.primary:disabled::after{opacity:.5}
button.ghost,a.ghost{border-radius:100px;border:0;box-shadow:0 0 0 2px var(--v2-anel);
  font-family:var(--fonte-titulo);font-weight:600;color:var(--tinta-forte);
  transition:background .5s var(--v2-curva),color .5s var(--v2-curva)}
button.ghost:hover,a.ghost:hover{background:var(--v2-anel);color:var(--superficie);border:0}
/* Botões redondos de ícone continuam redondos, com o mesmo anel. */
.navbtn{box-shadow:0 0 0 2px var(--v2-anel);border:0}
.navbtn:hover{background:var(--v2-anel);color:var(--superficie)}
/* Frase e setas numa linha só. As setas desciam sozinhas para a linha de baixo
   no celular e pareciam soltas; agora quem cede é a frase, que pode quebrar. */
.calhead{flex-wrap:nowrap;align-items:center}
.calhint{flex:1 1 0;min-width:0}
.calhint>span:last-child{overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){
  .navbtn{width:40px;height:40px}
  .calnav{gap:6px}
  .calhint{font-size:.8rem;gap:6px}
  .calhint>[data-icone] .ic{width:15px;height:15px}
}
/* Celular estreito: o ícone sai para a frase caber inteira ao lado das setas. */
@media (max-width:380px){ .calhint>[data-icone]{display:none} .calhint{font-size:.78rem} }

/* Voltar SEMPRE à esquerda, avançar à direita — em toda etapa, sozinho ou em
   par. O voltar é o `.ghost` com a seta para a esquerda; `margin-right:auto`
   o separa do avanço, que continua preso à direita pelo `flex-end`. */
.card .selactions.end>.ghost:has([data-icone="chevron.left"]){margin-right:auto}

/* Etapa 2 no celular: a barra presa embaixo só tinha o "Trocar datas", que
   virava um círculo sem texto encostado na borda da tela — lia como botão
   cortado. Aqui não há o que avançar (quem avança é o "Reservar" de cada
   cartão), então a barra não gruda e o botão volta a dizer o que faz. */
@media (max-width:1079px){
  #step2 .selactions.end{position:static;border-top:0;margin-bottom:0;padding:8px 0 0;
    justify-content:flex-start}
  #step2 .selactions.end>.ghost:has([data-icone]){font-size:.9rem;width:auto;height:48px;
    aspect-ratio:auto;flex:0 0 auto;padding:0 22px 0 16px;border-radius:100px}
}
@media (max-width:340px){ .calhint>span:last-child{white-space:normal} }

/* ── Item 15: acompanhantes na etapa do titular ──
   Seções separadas por um fio e por um título com ícone, como os blocos do
   site: a pessoa vê que são duas partes da mesma página, e não uma só lista. */
.secao-acomp{margin-top:32px;padding-top:26px;border-top:1px solid var(--linha)}
.secao-acomp h3{display:flex;align-items:center;gap:10px;margin:0 0 4px;
  font:400 1.25rem/1.2 var(--fonte-titulo);color:var(--tinta-forte)}
.secao-acomp h3 .ic{width:20px;height:20px}
/* Os blocos vêm prontos pela contagem da etapa 1: sem "remover" (o
   "acrescentar" nem existe na v2), e sem a seção quando só vai o titular. */
.secao-acomp .rmv{display:none}
.secao-acomp:has(#listaAcompanhantes .vazio){display:none}
/* Os termos no pagamento: entre os meios e o botão de cobrar. */
#areaMeios #campoTermos{margin:18px 0 0}
.estadia-alterar{box-shadow:0 0 0 1.5px var(--v2-anel)!important}
/* O botão de enviar do modal de conta e o do WhatsApp do atendimento seguem
   o mesmo desenho sem seta: a seta é de AVANÇAR no funil. */
.mconta-form button.primary::after,.botao-wa::after{display:none}

/* ── cartões ──────────────────────────────────────────────────────────── */
.card{border:0;box-shadow:0 8px 32px rgba(77,77,77,.07)}
.room{border-radius:22px}
.room .price button.primary{border-radius:100px}
.room-nome{font-weight:600}
.capa{border-radius:16px}
.room .pix-destaque{border-radius:100px;padding:6px 14px}
.room .price .parcela,.summary .total b,.estadia-data b{font-weight:700}

/* ── Condições de reembolso: ícone discreto no preço, a política num balão
   grafite (a cor do toast e dos selos) ao passar o mouse, no foco ou no toque.
   Abre para CIMA, sobre o preço, para não empurrar o botão de reservar. */
.room .reembolso{position:relative;margin-top:12px}
.reembolso-btn{display:inline-flex;align-items:center;gap:5px;border:0;background:none;padding:2px 0;
  font:600 .74rem var(--fonte-titulo);color:var(--tinta-fraca);cursor:help;
  text-decoration:underline dotted;text-underline-offset:3px}
.reembolso-btn .ic{width:15px;height:15px}
.reembolso-btn:hover,.reembolso-btn:focus-visible{color:var(--tinta-forte)}
.reembolso-dica{position:absolute;right:0;bottom:calc(100% + 10px);z-index:30;
  width:min(320px,calc(100vw - 48px));padding:14px 16px;border-radius:16px;
  background:var(--color--black);color:#FBFBFB;text-align:left;white-space:normal;
  font:400 .8rem/1.5 var(--fonte-texto);box-shadow:0 12px 36px rgba(77,77,77,.28);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(4px);
  transition:opacity .2s,transform .2s var(--v2-curva),visibility .2s}
.reembolso-dica::after{content:"";position:absolute;right:26px;top:100%;
  border:7px solid transparent;border-top-color:var(--color--black)}
.reembolso:hover .reembolso-dica,.reembolso:focus-within .reembolso-dica{opacity:1;visibility:visible;transform:none}
.reembolso-dica b{display:block;font:700 .84rem var(--fonte-titulo);margin-bottom:6px}
.reembolso-dica ul{margin:0;padding-left:16px}
.reembolso-dica li+li{margin-top:3px}
.reembolso-dica p{margin:8px 0 0;font-size:.74rem;opacity:.8}
@media (max-width:760px){
  .room .reembolso{align-self:flex-start}
  .reembolso-dica{right:auto;left:0}
  .reembolso-dica::after{right:auto;left:18px}
}
@media (prefers-reduced-motion:reduce){ .reembolso-dica{transition:none} }

/* ── unidade: a cor de cada pousada, como no site ─────────────────────── */
.unidade{border-radius:22px}
.unidade-txt b{font-weight:600;font-size:1.08rem}
.unidade[data-unidade*="serra"].on{border-color:var(--v2-serra);
  box-shadow:0 0 0 1px var(--v2-serra),var(--sombra)}
.unidade[data-unidade*="mar"].on{border-color:var(--v2-mar);
  box-shadow:0 0 0 1px var(--v2-mar),var(--sombra)}
.unidade[data-unidade*="serra"].on .unidade-marca{background:var(--v2-serra);border-color:var(--v2-serra);color:#fff}
.unidade[data-unidade*="mar"].on .unidade-marca{background:var(--v2-mar);border-color:var(--v2-mar);color:#fff}

/* ── carrossel e galeria: setas do site ───────────────────────────────── */
.galeria .seta{background:rgba(30,30,28,.55);color:#fff;box-shadow:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.galeria .seta:hover{background:rgba(30,30,28,.8)}
.pontos i.on{background:var(--color--green)}

/* ── a nota tracejada do site ─────────────────────────────────────────── */
.aviso-hospedes,.aviso-acesso{background:var(--v2-nota-bg);
  border:1px dashed var(--v2-nota-borda);border-left:1px dashed var(--v2-nota-borda);
  border-radius:12px;color:var(--tinta)}
.aviso-acesso{padding:9px 12px}

/* ── etapas, resumo, toast ────────────────────────────────────────────── */
.steps li button{font-family:var(--fonte-titulo)}
.holdbar{border-radius:100px;padding:10px 20px}
.holdbar.fixa{box-shadow:0 0 0 2px var(--v2-anel),0 4px 14px rgba(0,0,0,.06);border:0}
.summary{border-radius:22px}
/* Na escolha da acomodação o resumo não aparece — nem na volta, com uma suíte
   já escolhida. Ali ele repetia a suíte de antes e espremia os cartões das
   outras numa coluna estreita. A trilha da grade é `auto`, então a coluna
   some junto e os cartões voltam à largura toda. */
body:has(#step2:not(.hidden)) #summaryCard{display:none}
.err{border-radius:18px;font-family:var(--fonte-titulo);font-size:.88rem}
.comodidades li{font-family:var(--fonte-titulo);font-size:.76rem}

/* ── rodapé no desenho do site ────────────────────────────────────────────
   Bloco grafite (#4D4D4D) até 1280px, cantos de cima em 70px, 72px de respiro,
   logo BRANCO e texto off-white, títulos em Comfortaa leve — medidas do
   rodapé do site no ar. O conteúdo é o do funil. */
.rodape{background:transparent;border-top:0;box-shadow:none;padding:0 16px;margin-top:48px}
.rodape .unidades{max-width:1280px;margin:0 auto;background:#4D4D4D;border-radius:70px 70px 0 0;
  padding:72px;gap:28px 60px;align-items:flex-start;color:rgba(251,251,251,.82);font-size:.92rem}
.rodape strong{color:#FBFBFB;font:400 18px var(--fonte-titulo);margin-bottom:4px}
/* Logo e frase lado a lado, separados por um fio, como o logo e "Reserva
   online" no cabeçalho. No celular o bloco ocupa a linha inteira, e as
   unidades vêm embaixo; no desktop ele fica à esquerda e as unidades à
   direita, na mesma faixa. */
.rodape-marca{flex:0 0 100%;display:flex;align-items:center;gap:20px;margin-bottom:6px}
.rodape-logo{flex:0 0 auto;display:block}
.rodape-logo img{height:48px;width:auto;display:block}
.rodape .rodape-frase{color:#FBFBFB;font:400 .95rem/1.35 var(--fonte-titulo);max-width:30ch;
  padding-left:20px;border-left:1px solid rgba(251,251,251,.3)}
/* "bem-vindos" não quebra no hífen. */
.rodape-frase .sem-quebra{white-space:nowrap}
@media (min-width:900px){ .rodape-marca{flex:0 1 auto;margin:0 auto 0 0} }
@media (max-width:760px){
  .rodape .unidades{border-radius:40px 40px 0 0;padding:44px 28px 36px}
  .rodape-marca{gap:16px}
  .rodape-logo img{height:40px}
  .rodape .rodape-frase{font-size:.85rem;padding-left:16px}
}


/* ── selos de comodidade: o desenho dos cartões do site ─────────────────
   `sliderAcomodaHome.jsx`: fundo escuro, texto branco, cantos alternados
   (5px 0 5px 0), ícone Font Awesome de 12px, e inversão para branco no hover.
   Lá o selo fica sobre a foto (preto a 50%); aqui fica sobre o cartão claro,
   então o fundo é o grafite da marca, sólido — branco sobre ele dá 8.5:1. */
.comodidades{gap:6px}
.comodidades li{background:var(--color--black);color:#fff;border:0;
  border-radius:5px 0 5px 0;padding:5px 9px;gap:5px;font-size:.72rem;
  font-family:var(--fonte-titulo);font-weight:600;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.comodidades li:hover{background:#fff;color:#000;box-shadow:inset 0 0 0 1px var(--color--black)}
.comodidades .ic{width:12px;height:12px;color:inherit}

/* Celular pequeno (≤380px): a Comfortaa é larga, e "Ver acomodações" com a seta
   não cabe ao lado do "limpar" e da faixa reservada ao chat. A seta sai; o
   texto fica. */
@media (max-width:380px){
  .selbar .selactions>.primary::after{display:none}
  .selbar .selactions>.primary{padding-inline:10px}
}

/* ── unidade no padrão do HERO do site ─────────────────────────────────
   No site, cada pousada é uma foto grande com o logo BRANCO do cachorro
   centralizado (150px) e o nome embaixo, em Comfortaa leve e off-white — sem
   texto fora da foto. O cartão da v2 repete isso. Um véu escuro suave por
   trás do logo garante leitura em qualquer foto (o site não tem, e em foto de
   céu claro o branco some). A cor da pousada fica no anel de seleção. */
.unidade{border:0;background:#1E1E1C}
.unidade-foto{aspect-ratio:4/3;max-height:360px}
@media (max-width:760px){ .unidade-foto{aspect-ratio:3/4;max-height:none} }
.unidade-txt{position:absolute;inset:0;z-index:1;justify-content:center;align-items:center;
  gap:10px;padding:16px;text-align:center;pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% 50%,rgba(0,0,0,.32),rgba(0,0,0,.06) 75%),
             linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.25))}
.unidade-txt::before{content:"";width:min(150px,58%);aspect-ratio:370/150;
  background:url(imagens/logo-leange-branco.png) center/contain no-repeat;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.35))}
.unidade-txt b{color:#FBFBFB;font-weight:300;font-size:1.05rem;letter-spacing:.01em;
  text-shadow:0 1px 8px rgba(0,0,0,.5)}
.unidade .onde{display:none}
.unidade-marca,.unidade-fotos{z-index:2}
.unidade:hover .unidade-foto img{transform:scale(1.04)}
@media (max-width:400px){ .unidade-txt b{font-size:.92rem} }

/* ── botões flutuantes e painel do chat, no desenho do site ───────────────
   O flutuante do WhatsApp do site: 64px, verde #00AD57, sombra verde suave
   (0 4px 12px, 30%). O do chat segue o mesmo molde, em grafite. `body` na
   frente para vencer o chat.css, que carrega depois. */
body .lc-fab{width:64px;height:64px;border-radius:50%;transition:transform .3s cubic-bezier(.23,1,.32,1)}
body .lc-fab svg{width:30px;height:30px}
body .lc-fab-wa{background:#00AD57;color:#fff;box-shadow:0 4px 12px rgba(0,173,87,.3)}
/* Anel claro: sem ele o botão some quando passa por cima do rodapé #4D4D4D. */
body .lc-fab-chat{background:#4D4D4D;color:#FBFBFB;box-shadow:0 0 0 2px #FBFBFB,0 4px 12px rgba(77,77,77,.3)}
body .lc-fab:hover{filter:none;transform:scale(1.06)}
body .lc-fab-rot{right:78px;border-radius:100px;padding:6px 14px;font:600 12px var(--fonte-titulo)}

/* O painel: cartão arredondado como os do site, cabeçalho grafite com o
   título em Comfortaa leve e o fechar visível; campos e botão com os cantos
   em diagonal do formulário do rodapé do site ("0 20px" e "20px 0"). */
body .lc-panel{border-radius:22px;border:0;box-shadow:0 12px 40px rgba(77,77,77,.28);
  background:#FBFBFB}
body .lc-head{background:#4D4D4D;color:#FBFBFB;padding:16px 10px 16px 22px}
body .lc-head h2{font:400 1.1rem/1.2 var(--fonte-titulo);letter-spacing:.01em;color:#FBFBFB}
body .lc-head p{font:400 .76rem var(--fonte-titulo);color:#FBFBFB;opacity:.8;margin-top:4px}
body .lc-head .lc-x{color:#FBFBFB;border-radius:50%;min-width:40px;height:40px}
body .lc-head .lc-x:hover{background:rgba(251,251,251,.14)}
body .lc-head .lc-x .ic{width:24px;height:24px}
body .lc-head .lc-encerrar{border-radius:100px;padding:0 14px;box-shadow:0 0 0 1.5px rgba(251,251,251,.7);
  font:600 12px var(--fonte-titulo)}
body .lc-ident{padding:22px}
body .lc-ident h3{font:400 1.2rem/1.25 var(--fonte-titulo);color:var(--color--black);margin-bottom:8px}
body .lc-ident .lc-dica{font:400 .8rem/1.5 var(--fonte-titulo);color:#6E6E6E;margin-bottom:18px}
body .lc-campo{margin-bottom:10px}
body .lc-campo>span{font:600 .68rem var(--fonte-titulo);letter-spacing:.08em;color:#6E6E6E}
body .lc-campo input{font:400 .9rem var(--fonte-titulo);padding:12px 18px;min-height:44px;
  background:#fff;border:1px solid #E3E5D8;border-radius:0 20px}
body .lc-campo input:focus{outline:none;border-color:#4D4D4D;box-shadow:0 0 0 2px rgba(77,77,77,.15)}
body .lc-btn{font:700 .92rem var(--fonte-titulo);min-height:44px;border-radius:20px 0;
  background:#212121;color:#fff;justify-content:flex-start;padding:11px 20px;gap:14px}
body .lc-btn:hover:not(:disabled){filter:none;background:#000}
/* A seta do site antes do texto ("→ Enviar dados para contato"). */
body .lc-ident .lc-btn::before{content:"";width:18px;height:18px;flex:0 0 18px;background:currentColor;
  -webkit-mask:var(--mask-seta) center/contain no-repeat;mask:var(--mask-seta) center/contain no-repeat}
body .lc-btn-wa{background:#00AD57;color:#fff;border-radius:20px 0}

/* ── Item 17: vacinação como ALERTA, não como bloqueio ──
   Tom de informação (petróleo), não de atenção: nada impede a venda, a equipe
   só vai conferir depois. */
.crivo-alerta{display:flex;gap:12px;align-items:flex-start;background:#E3F2F3;color:#045A62;
  border-left:4px solid #04808C;border-radius:var(--r-botao);padding:16px 18px;margin:16px 0}
.crivo-alerta ul{margin:10px 0 0;padding-left:20px}
.crivo-alerta b{display:block;margin-bottom:4px;font-family:var(--fonte-titulo);font-weight:600}

/* ── Item 18: código por e-mail e WhatsApp automático ── */
.codigo-email{margin:14px 0 0;color:var(--tinta-forte)}
.wa-contagem{margin:14px 0 0;
  font-size:.9rem;color:var(--tinta-fraca)}
.wa-contagem b{font-family:var(--fonte-titulo);color:var(--tinta-forte)}
.wa-contagem .link{margin-left:6px}
button.link{background:none;border:0;padding:0;color:#04808C;font:inherit;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ── Item 10: várias acomodações ── */
.quartos-convite{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 0;
  padding:14px 18px;border:1px dashed var(--linha-forte);border-radius:16px;color:var(--tinta-forte)}
.quartos-convite>span{flex:1 1 220px}
.quartos-convite .ic{width:20px;height:20px}
.quartos-intro{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;padding:16px 18px;
  border-radius:16px;background:#E3F2F3;color:#045A62;margin-bottom:18px}
.quartos-intro>.ic{width:22px;height:22px;flex:0 0 auto;margin-top:2px}
.quartos-intro>div{flex:1 1 260px}
.quartos-intro b{font-family:var(--fonte-titulo);font-weight:600;display:block;margin-bottom:4px}
.quartos-intro p{margin:0;font-size:.9rem}
.quartos-selecao{border:1px solid var(--linha);border-radius:18px;padding:16px 18px;margin-bottom:22px;
  background:var(--superficie);scroll-margin-top:90px}
.quartos-selecao h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:500 1.1rem var(--fonte-titulo)}
.quartos-selecao h3 .ic{width:18px;height:18px}
.quartos-vazia{display:flex;gap:8px;align-items:center;margin:0;color:var(--tinta-fraca);font-size:.9rem}
.quartos-vazia .ic{width:18px;height:18px;flex:0 0 auto}
.quartos-linhas{display:flex;flex-direction:column;gap:16px}
/* Cada acomodação escolhida é o MESMO cartão da vitrine (.room): foto com
   carrossel, nome, preço parcelado com o PIX embaixo e botão largo no
   celular. No lugar da descrição, a capacidade e os passos da ocupação. */
.quarto-sel-passos{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}
.quartos-passo .rot{display:flex;align-items:center;gap:5px;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--tinta-fraca);margin-bottom:6px}
.quartos-passo .rot .ic{width:13px;height:13px}
.quartos-controle{display:flex;align-items:center;gap:10px}
.quartos-controle button{width:36px;height:36px;border-radius:50%;border:0;background:var(--superficie);
  box-shadow:0 0 0 1.5px var(--v2-anel);font:600 1.05rem var(--fonte-titulo);color:var(--tinta-forte);cursor:pointer}
.quartos-controle button:disabled{opacity:.35;cursor:default}
.quartos-controle b{min-width:16px;text-align:center;font-family:var(--fonte-titulo);font-size:1.05rem}
.quartos-erro{color:#B3261E;font-size:.82rem;margin:0}
.room .price .quarto-sel-tirar{margin-top:14px;width:100%;justify-content:center;gap:6px;display:inline-flex;align-items:center}
.room .price .quarto-sel-tirar .ic{width:16px;height:16px}
.quartos-rodape{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--linha)}
.quartos-falta{flex:1 1 240px;display:flex;align-items:center;gap:8px;margin:0;font-size:.9rem;color:#9A5B0B}
.quartos-falta.ok{color:#04808C}
.quartos-falta .ic{width:18px;height:18px;flex:0 0 auto}
.quartos-lista{display:flex;flex-direction:column;gap:16px}
/* A capacidade, logo abaixo do nome, e o "a partir de" acima do preço. */
.room .quartos-cap{display:flex;align-items:center;gap:6px;margin:6px 0 0;font-size:.82rem;color:var(--tinta-forte)}
.room .quartos-cap .ic{width:15px;height:15px}
.room .price .quartos-desde{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-fraca)}
@media (max-width:760px){
  /* No celular o rodapé da seleção empilha como o preço do cartão:
     o que falta, o total à esquerda e o botão largo. */
  .quartos-rodape{flex-direction:column;align-items:stretch}
  /* Na coluna, o `flex-basis` de 240px virava ALTURA e abria um vão vazio. */
  .quartos-falta{flex:0 0 auto}
  .quartos-rodape .quartos-total{flex-direction:column;align-items:flex-start;gap:2px}
  .quartos-rodape .quartos-total .quartos-preco{align-items:flex-start;text-align:left}
  #quartosContinuar{width:100%}
}
/* Na tela de atendimento o próprio conteúdo é o convite ao WhatsApp: os
   botões flutuantes repetiam o convite e, no celular, cobriam o botão. */
body:has(#stepAtendimento:not(.hidden)) .lc-fabs{display:none}

/* Seleção de acomodações: o preço no mesmo desenho dos cartões e do resumo
   (parcelado em destaque, "sem juros no cartão" e o PIX na pílula verde). */
.quartos-preco{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.quartos-preco .parcela{font-family:var(--fonte-titulo);font-size:1.1rem;font-weight:700;
  color:var(--tinta-forte);line-height:1.15}
.quartos-preco .avista{font-size:.72rem;color:var(--tinta-fraca)}
.quartos-preco .pix-destaque{display:inline-flex;align-items:center;gap:6px;margin:6px 0 0;
  padding:4px 10px;border-radius:100px;background:var(--acao-lavada);color:var(--ok);font-size:.78rem}
.quartos-preco .pix-destaque b{font-weight:700;color:inherit;font-family:var(--fonte-texto)}
.quartos-preco .pix-destaque .ic{width:14px;height:14px}
.quartos-total{display:flex;align-items:center;gap:12px}
.quartos-total .rot{font-size:.8rem;color:var(--tinta-fraca)}
.quartos-total .parcela{font-size:1.4rem}
/* O "Continuar" antes da hora parece desligado, mas recebe o clique e leva
   ao que falta (aria-disabled, e não disabled). */
#quartosContinuar[aria-disabled="true"]{background:var(--superficie-2);color:var(--tinta-fraca);
  box-shadow:0 0 0 2px var(--linha-forte)}
#quartosContinuar[aria-disabled="true"]::after{opacity:.5}
/* O Total da seleção lê como o preço do cartão: rótulo, parcelado, "sem juros
   no cartão" e o PIX, tudo alinhado à ESQUERDA, em qualquer largura. */
.quartos-rodape .quartos-total{flex-direction:column;align-items:flex-start;gap:2px}
.quartos-rodape .quartos-total .quartos-preco{align-items:flex-start;text-align:left}

/* Resumo: "Total" à esquerda; à direita o valor e, embaixo dele, a condição
   ("sem juros no cartão") em cinza, como no cartão da acomodação, e o PIX. */
.summary .sumpay .sum-cond,.summary .sumpay .sum-pix{display:block}
.summary .sumpay .sum-cond{margin-top:-2px;font-size:.78rem;font-weight:500;color:var(--tinta-fraca)}
.summary .sumpay .sum-pix{margin-top:4px}