/* HOTEL Ubox — portal de reserva (layout claro, verde só na marca) */

/* ===== Hero do portal com card verde ===== */
.portal-hero{position:relative;min-height:72svh;display:flex;align-items:flex-end}
.portal-hero-bg{position:absolute;inset:0;overflow:hidden}
.portal-hero-bg img{width:100%;height:100%;object-fit:cover}
.portal-hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.22))}
.card-viagem{
  position:relative;z-index:2;background:var(--verde-card);color:#fff;
  border-radius:var(--radius-g) var(--radius-g) 0 0;
  width:min(1100px,94vw);margin:14vh auto 0;padding:2.4rem 2.6rem 2.6rem;
  box-shadow:var(--sombra-forte);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);
}
.card-viagem h1,.card-viagem h2{color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:1.4rem}
.form-viagem{display:grid;grid-template-columns:1.6fr 1fr 1fr auto;gap:1rem;align-items:end}
.form-viagem .campo{margin:0;min-width:0}
.form-viagem select,.form-viagem input{min-width:0;max-width:100%}
.form-viagem label{color:#eaf7ec;font-size:.85rem}
.form-viagem input,.form-viagem select{border:none}
.link-mapa{
  display:inline-flex;align-items:center;gap:.45rem;color:#fff;font-weight:600;
  margin-top:1.1rem;font-size:.92rem;text-decoration:underline;text-underline-offset:3px;
}
.link-mapa svg{width:18px;height:18px;fill:currentColor}

/* ===== Seções do portal ===== */
.portal-secao{padding:clamp(56px,7vw,96px) 0}
.portal-head{text-align:center;max-width:760px;margin:0 auto 2.8rem}
.portal-head h2{color:var(--verde);margin-bottom:.9rem}
.portal-head p{color:var(--cinza)}
.portal-head a{color:var(--verde-escuro);font-weight:600;text-decoration:underline}

.duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:stretch}
.card-claro{
  background:#fff;border:1.5px solid var(--borda);border-radius:var(--radius-g);
  padding:2.2rem;box-shadow:var(--sombra);
}
.card-claro h3{color:var(--verde);font-size:1.35rem;margin-bottom:1rem}
.card-claro>p{color:var(--cinza);font-size:.95rem;margin-bottom:1.4rem}
.checklist li{
  display:flex;align-items:center;gap:.7rem;padding:.72rem 0;
  border-bottom:1px solid var(--borda);font-size:.95rem;font-weight:500;
}
.checklist li:last-child{border-bottom:none}
.check-ico{flex:0 0 22px;width:22px;height:22px;border-radius:50%;border:2px solid var(--verde);display:grid;place-items:center;color:var(--verde);font-size:.7rem;font-weight:700}

.card-verde{
  background:var(--verde-card);color:#fff;border-radius:var(--radius-g);
  padding:2.2rem;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:1rem;
}
.card-verde h3{color:#fff;font-size:1.35rem}
.stat-num{
  font-family:var(--fonte-titulo);font-weight:800;font-style:italic;
  font-size:clamp(2.6rem,5vw,3.6rem);background:#fff;color:var(--ink);
  padding:.15em .35em;line-height:1;border-radius:8px;transform:rotate(-1.5deg);
}
.stat-label{font-weight:600}
.card-verde hr{width:60%;border:none;border-top:1.5px solid rgba(255,255,255,.4);margin:.6rem 0}
.estrelas{display:flex;align-items:center;gap:.5rem;background:#fff;color:var(--ink);border-radius:10px;padding:.5rem .9rem;font-weight:700}
.estrelas svg{width:20px;height:20px;fill:var(--amarelo)}
.estrelas .meia{fill:url(#meiaGrad)}
.card-verde small{opacity:.9}

.card-tour{
  position:relative;border-radius:var(--radius-g);overflow:hidden;cursor:pointer;
  box-shadow:var(--sombra);min-height:300px;display:flex;align-items:flex-end;
}
.card-tour img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card-tour:hover img{transform:scale(1.05)}
.card-tour .tour-tag{
  position:absolute;top:1.2rem;left:1.2rem;background:#fff;color:var(--ink);
  font-family:var(--fonte-titulo);font-style:italic;font-weight:800;
  padding:.4rem .9rem;border-radius:8px;font-size:1.15rem;
}
.card-tour .tour-cta{
  position:relative;z-index:2;margin:0 1.2rem 1.2rem auto;color:#fff;font-weight:700;
  display:flex;align-items:center;gap:.5rem;background:rgba(0,0,0,.35);
  padding:.6rem 1.1rem;border-radius:10px;backdrop-filter:blur(4px);
}

/* Notícias */
.noticias-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.noticia{
  background:#fff;border:1.5px solid var(--borda);border-radius:var(--radius-g);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease;
}
.noticia:hover{transform:translateY(-6px);box-shadow:var(--sombra-forte)}
.noticia img{aspect-ratio:16/10;object-fit:cover}
.noticia-corpo{padding:1.5rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.noticia-tag{
  align-self:flex-start;background:var(--cinza-claro);border-radius:99px;
  font-size:.75rem;font-weight:600;padding:.3rem .8rem;color:var(--verde-escuro);
}
.noticia h3{font-size:1.08rem}
.noticia p{color:var(--cinza);font-size:.9rem;flex:1}
.noticia a{color:var(--verde-escuro);font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:.4rem}

/* ===== Barra verde de busca (unidades) ===== */
.busca-bar{background:var(--verde-card);color:#fff;padding:1.1rem 0}
.busca-inner{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.busca-inner h1{color:#fff;font-size:1.35rem;white-space:nowrap}
.busca-input{flex:1;min-width:220px;display:flex;background:#fff;border-radius:10px;overflow:hidden}
.busca-input input{border:none;flex:1;padding:.75rem 1rem;font-family:var(--fonte-corpo);font-size:.95rem}
.busca-input input:focus{outline:none}
.busca-toggle{display:flex;align-items:center;gap:1.2rem;font-weight:600;font-size:.92rem}
.busca-toggle button{color:#fff;display:flex;align-items:center;gap:.45rem;opacity:.75;padding:.4rem 0;border-bottom:2px solid transparent}
.busca-toggle button.ativo{opacity:1;border-color:#fff}
.busca-toggle svg{width:18px;height:18px;fill:currentColor}

.unidades-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.card-unidade{
  background:#fff;border:1.5px solid var(--borda);border-radius:var(--radius-g);
  overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;display:flex;flex-direction:column;
}
.card-unidade:hover{transform:translateY(-6px);box-shadow:var(--sombra-forte)}
.card-unidade img{aspect-ratio:16/10;object-fit:cover}
.cu-corpo{padding:1.5rem;flex:1;display:flex;flex-direction:column;gap:.4rem}
.cu-corpo .marca{font-family:var(--fonte-titulo);font-style:italic;font-weight:700;color:var(--verde);font-size:.9rem}
.cu-corpo h3{font-size:1.15rem}
.cu-corpo address{font-style:normal;color:var(--cinza);font-size:.9rem}
.cu-corpo .ver-mapa{color:var(--verde-escuro);font-weight:600;font-size:.88rem;text-decoration:underline;align-self:flex-start}
.cu-info{border-top:1px solid var(--borda);padding:.9rem 1.5rem;display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
.cu-info span{font-size:.85rem;color:var(--cinza)}
.cu-info .preco{font-weight:700;color:var(--ink);font-size:1rem}
.cu-info .preco em{font-style:normal;font-size:.78rem;color:var(--cinza);font-weight:500}
#vista-mapa{display:none}
#vista-mapa.ativo{display:block}
#mapa-unidades{height:min(560px,72vh);border-radius:var(--radius-g);border:1px solid var(--borda);z-index:1}

/* ===== Stepper do fluxo ===== */
.stepper-bar{background:var(--verde-card);color:#fff;padding:1rem 0}
.stepper-inner{display:flex;align-items:center;gap:1.6rem}
.stepper-inner h1{color:#fff;font-size:1.3rem;white-space:nowrap}
.stepper{display:flex;align-items:center;flex:1;min-width:0}
.step{
  width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.55);
  display:grid;place-items:center;flex:0 0 auto;transition:.3s;
}
.step svg{width:16px;height:16px;fill:#fff;opacity:.75}
.step.ativo{background:#fff;border-color:#fff}
.step.ativo svg{fill:var(--verde-escuro);opacity:1}
.step.feito{background:rgba(255,255,255,.25);border-color:#fff}
.step-linha{height:2px;background:rgba(255,255,255,.45);flex:1;min-width:12px}

/* ===== Layout do fluxo ===== */
.fluxo{display:grid;grid-template-columns:360px 1fr;gap:1.8rem;align-items:start;padding:2.4rem 0 4rem}
.resumo-card{
  background:#fff;border:1.5px solid var(--borda);border-radius:var(--radius-g);
  overflow:hidden;box-shadow:var(--sombra);position:sticky;top:90px;
}
.resumo-fotos{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--cinza-claro)}
.resumo-fotos img{width:100%;height:100%;object-fit:cover}
.resumo-fotos .foto-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.9);display:grid;place-items:center;font-size:1rem;transition:.25s;
}
.resumo-fotos .foto-nav:hover{background:var(--verde);color:#fff}
.foto-ant{left:.7rem}.foto-prox{right:.7rem}
.foto-dots{position:absolute;bottom:.7rem;left:50%;transform:translateX(-50%);display:flex;gap:.4rem}
.foto-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6)}
.foto-dots i.ativo{background:#fff}
.resumo-corpo{padding:1.5rem}
.resumo-corpo .marca{font-family:var(--fonte-titulo);font-style:italic;font-weight:700;color:var(--verde);font-size:.9rem}
.resumo-corpo h2{font-size:1.25rem;margin-bottom:.3rem}
.resumo-corpo address{font-style:normal;color:var(--cinza);font-size:.9rem;margin-bottom:.4rem}
.resumo-corpo .ver-mapa{color:var(--verde-escuro);font-weight:600;font-size:.86rem;text-decoration:underline}
.resumo-datas{
  display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--borda);
  border-radius:12px;margin:1.1rem 0;overflow:hidden;
}
.resumo-datas>div{padding:.8rem 1rem}
.resumo-datas>div:first-child{border-right:1.5px solid var(--borda)}
.resumo-datas b{display:block;font-size:.82rem;color:var(--cinza);font-weight:600}
.resumo-datas span{font-weight:700;font-size:.95rem}
.resumo-datas small{display:block;color:var(--cinza-medio);font-size:.78rem}
.resumo-linha{border:1.5px solid var(--borda);border-radius:12px;padding:.8rem 1rem;margin-bottom:1.1rem;font-size:.9rem}
.resumo-linha b{font-size:.82rem;color:var(--cinza);display:block;font-weight:600}
.resumo-total{text-align:center;padding:.6rem 0 .2rem}
.resumo-total .valor{font-family:var(--fonte-titulo);font-style:italic;font-weight:800;font-size:2rem;color:var(--verde-escuro)}
.resumo-total p{color:var(--cinza);font-size:.85rem}
.resumo-notas{border-top:1px solid var(--borda);margin-top:1.2rem;padding-top:1.1rem}
.resumo-notas b{font-size:.9rem;display:block;margin-bottom:.5rem}
.resumo-notas li{display:flex;gap:.55rem;align-items:flex-start;font-size:.84rem;color:var(--cinza);margin-bottom:.45rem}
.resumo-notas .check-ico{width:18px;height:18px;flex-basis:18px;font-size:.6rem;margin-top:.1rem}

.painel-etapa{
  background:#fff;border:1.5px solid var(--borda);border-radius:var(--radius-g);
  padding:clamp(1.6rem,3.5vw,2.8rem);box-shadow:var(--sombra);
}
.painel-etapa>h2{color:var(--verde);text-align:center;margin-bottom:1.8rem}
.etapa-acoes{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem;flex-wrap:wrap}
.link-voltar{display:inline-flex;align-items:center;gap:.5rem;color:var(--cinza);font-weight:600;font-size:.92rem}
.link-voltar:hover{color:var(--verde-escuro)}

/* Botões-toggle (motivo, quartos) */
.toggle-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.toggle-grid.q4{grid-template-columns:repeat(2,1fr)}
.btn-toggle{
  background:var(--verde-pastel);color:#fff;font-family:var(--fonte-titulo);
  font-weight:700;font-size:.98rem;padding:.95rem 1rem;border-radius:10px;transition:.25s;
}
.btn-toggle:hover{background:var(--verde-claro)}
.btn-toggle.ativo{background:var(--verde-escuro)}
.grupo-label{font-weight:600;font-size:.92rem;margin:1.4rem 0 .7rem}
.link-parceiro{color:var(--verde-escuro);font-size:.88rem;text-decoration:underline;display:inline-block;margin:.4rem 0 0}

/* Etapa quartos */
.quartos-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:2rem;align-items:start}
.quarto-detalhe{border-left:1.5px solid var(--borda);padding-left:2rem}
.quarto-detalhe h3{margin-bottom:.2rem}
.quarto-detalhe .preco-noite{color:var(--verde-escuro);font-weight:700;font-size:1.15rem;margin-bottom:1rem}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem}
.tag{background:var(--cinza-claro);border-radius:99px;font-size:.8rem;padding:.35rem .8rem;color:var(--ink);font-weight:500}
.disp-info{text-align:center;font-size:.88rem;color:var(--cinza);margin-top:.8rem}

/* Login / etapas 2 colunas */
.duas-colunas{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem}
.duas-colunas>div:first-child{border-right:1.5px solid var(--borda);padding-right:2.4rem}
.duas-colunas h3{color:var(--verde);font-size:1.25rem;margin-bottom:.7rem}
.duas-colunas .desc{color:var(--cinza);font-size:.92rem;margin-bottom:1.4rem}
.col-centro{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}

/* Hóspede / fatura */
.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem}
.form-2col .campo.full{grid-column:1/-1}
.bloco-hospede{border:1.5px solid var(--borda);border-radius:14px;padding:1.5rem;margin-bottom:1.2rem}
.bloco-hospede header{display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem;font-weight:700}
.bloco-hospede header svg{width:22px;height:22px;fill:var(--verde)}
.tel-grupo{display:flex;gap:.5rem}
.tel-grupo .ddi{flex:0 0 88px}
.aceites{margin-top:1.4rem;display:flex;flex-direction:column;gap:.8rem}
.aceites label{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;color:var(--cinza);cursor:pointer}
.aceites input{width:19px;height:19px;accent-color:var(--verde);flex:0 0 19px;margin-top:.15rem}
.aceites a{color:var(--verde-escuro);font-weight:600;text-decoration:underline}
.divisor{border:none;border-top:1.5px solid var(--borda);margin:1.6rem 0}

/* Pagamento */
.pagto-lista{display:flex;flex-direction:column;border:1.5px solid var(--borda);border-radius:14px;overflow:hidden}
.pagto-opcao{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.3rem;border-bottom:1.5px solid var(--borda);cursor:pointer;transition:background .2s}
.pagto-opcao:last-child{border-bottom:none}
.pagto-opcao:hover{background:var(--cinza-claro)}
.pagto-opcao input{width:20px;height:20px;accent-color:var(--verde)}
.pagto-opcao .pagto-ico{width:42px;height:30px;border:1.5px solid var(--borda);border-radius:6px;display:grid;place-items:center;font-size:.7rem;font-weight:700;color:var(--verde-escuro)}
.pagto-opcao b{flex:1;font-weight:600;font-size:.98rem}
.pagto-bandeiras{display:flex;gap:.35rem}
.pagto-bandeiras span{font-size:.66rem;font-weight:700;border:1px solid var(--borda);border-radius:4px;padding:.15rem .4rem;color:var(--cinza)}
.pagto-detalhe{background:var(--cinza-claro);border-radius:12px;padding:1.3rem;margin-top:1.2rem;font-size:.9rem;color:var(--cinza)}

/* Confirmação */
.confirmacao{text-align:center;padding:1rem 0}
.check-grande{
  width:86px;height:86px;border-radius:50%;background:var(--verde);margin:0 auto 1.4rem;
  display:grid;place-items:center;animation:checkPop .6s cubic-bezier(.68,-.55,.27,1.55) both;
}
.check-grande svg{width:40px;height:40px;fill:#fff}
@keyframes checkPop{from{transform:scale(0)}to{transform:scale(1)}}
.codigo-reserva{
  font-family:var(--fonte-titulo);font-style:italic;font-weight:800;font-size:1.7rem;
  background:var(--cinza-claro);border:2px dashed var(--verde);border-radius:12px;
  display:inline-block;padding:.6rem 1.6rem;margin:1rem 0;color:var(--verde-escuro);letter-spacing:.04em;
}
.qr-fake{margin:1.2rem auto;width:150px;border:1.5px solid var(--borda);border-radius:12px;padding:10px;background:#fff}
.confirmacao .acoes{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}

/* Login page */
.pagina-login{max-width:520px;margin:0 auto;padding:3.5rem 0 5rem}
.pagina-login .painel-etapa{margin-bottom:1.6rem}
.pagina-login h1{color:var(--verde);text-align:center;margin-bottom:2rem}
.troca-conta{text-align:center;font-weight:600}
.troca-conta a{color:var(--verde-escuro);text-decoration:underline}

/* Modal mapa (portal home) */
.modal-mapa{position:fixed;inset:0;z-index:1150;background:rgba(15,20,16,.55);display:none;align-items:center;justify-content:center;padding:3vh 3vw}
.modal-mapa.aberto{display:flex}
.modal-mapa-caixa{background:#fff;border-radius:var(--radius-g);width:min(1000px,96vw);overflow:hidden;box-shadow:var(--sombra-forte)}
.modal-mapa-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.4rem;border-bottom:1.5px solid var(--borda)}
.modal-mapa-head h3{color:var(--verde)}
#mapa-modal{height:min(520px,64vh);z-index:1}

/* Responsivo portal */
@media(max-width:1020px){
  .fluxo{grid-template-columns:1fr}
  .resumo-card{position:static;order:2}
  .noticias-grid,.unidades-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .form-viagem{grid-template-columns:1fr 1fr}
  .form-viagem .campo:first-child,.form-viagem .btn{grid-column:1/-1}
  .form-viagem label{min-height:2.4em;display:flex;align-items:flex-end}
  .duo-grid,.duas-colunas,.quartos-grid,.form-2col{grid-template-columns:1fr}
  .duas-colunas>div:first-child{border-right:none;padding-right:0;border-bottom:1.5px solid var(--borda);padding-bottom:1.8rem}
  .quarto-detalhe{border-left:none;padding-left:0;border-top:1.5px solid var(--borda);padding-top:1.6rem}
  .noticias-grid,.unidades-grid{grid-template-columns:1fr}
  .card-viagem{padding:1.8rem 1.4rem;margin-top:20vh}
  .stepper-inner h1{display:none}
}