:root{
  color-scheme: light only;
  background-color: #fff; /* garante fundo claro */
  --bg:#DEE1D9;         /* Fundo neutro (Alabastro) */
  --text:#07374A;       /* Texto principal (Azul da Prússia) */
  --muted:#5b665f;      /* Texto secundário/cinza escuro adaptado */
  --brand:#07374A;      /* Cor principal da marca */
  --brand-2:#899F5E;    /* Destaques em Verde Musgo */
  --soft:#D7E4C0;       /* Fundo suave (Chá Verde) */
  --card:#ffffff;       /* Fundo dos cards */
  --shadow:0 8px 24px rgba(0,0,0,.06);
  --radius:16px;
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1200px,92vw);margin-inline:auto}

/* Header */
.site-header{
  position:static; /* <<< volta para o padrão */
  background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}

.logo img {
  max-height: 65px; /* ajuste entre 40–60px */
  width: auto;
}

.header-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0}

/* Menu padrão (desktop) */
.main-nav ul{
  display:flex;                /* sempre visível no desktop */
  gap:28px;
  list-style:none;
  margin:0;
  padding:0;
}

/* Menu mobile */
@media (max-width: 720px){
  .main-nav ul{
    display:none;              /* escondido até abrir */
    position:absolute;
    top:60px;                  /* logo abaixo do header */
    right:4vw;
    background:#fff;
    box-shadow:var(--shadow);
    padding:12px;
    border-radius:12px;
    width:min(260px,90vw);
    z-index:200;
    flex-direction:column;     /* itens em coluna no mobile */
    gap:10px;
  }
  .main-nav ul.open{
    display:flex;              /* aparece quando toggle abre */
  }
  .nav-toggle{display:block;}  /* mostra botão hambúrguer */
}


.main-nav a{color:#111;font-weight:600;opacity:.9}
.main-nav a:hover{color:var(--brand)}
.nav-toggle{display:none;background:none;border:0;font-size:26px;}

/* Hero */
.hero{position:relative;isolation:isolate}
.hero-media{height:60vh;min-height:420px;position:relative}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,0.20);
}

.hero-content{
  position:absolute;
  bottom:40px; /* Ajuste conforme a distância desejada do limite inferior */
  left:50%;
  transform:translateX(-50%);
  text-align:center; /* <<< centraliza o conteúdo */
  width:100%;
  max-width:900px;
  padding:0 20px;
  color:#fff;
}
.hero-content h1,
.hero-content p{
  text-align:center; /* garante centralização de título e subtítulo */
  text-shadow: 1px 1px 3px rgba(0,0,0,0.9); /* borda sutil */
}

.hero h1{
  font-family:"Playfair Display",serif;
  font-size: clamp(32px, 5vw, 52px);
  margin:0 0 8px 0;
}
.hero h1 span{font-weight:600;}
.hero p{font-size:clamp(25px,2vw,20px);margin:0 0 24px 0;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 22px;border-radius:999px;font-weight:700;border:0;cursor:pointer;
}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--brand-2)}
.hero-dots{position:absolute;bottom:18px;left:50%;translate:-50% 0;display:flex;gap:8px}
.dot{width:10px;height:10px;border-radius:50%;background:#ffffff55}
.dot.active{background:#fff}

/* Premium */
.premium{padding:64px 0;background:linear-gradient(90deg,#899F5E 0%, #DEE1D9 100%);padding:56px 0}
.premium h2{
  text-align:center;margin:0 0 24px 0;font-size:clamp(22px,3vw,32px);
}

.premium-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow);
}
.card .icon{font-size:28px;margin-bottom:10px}
.card h3{margin:0 0 8px 0;font-size:18px}
.card p{margin:0;color:var(--muted);font-size:14.5px}

/* Serviços (carousel) */

/* Serviços (estilo estático com 3 cards) */
.servicos{
  padding:72px 0;
  background:#fff;
  text-align:center;
}

.servicos h2{
  margin:0 0 8px 0;
  font-size:clamp(22px,3vw,32px);
  color:var(--text);
}

.servicos .section-sub{
  color:var(--muted);
  margin:0 0 36px 0;
  font-size:15px;
}

.servicos-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-bottom:32px;
}

/* Hospedagens (antes Serviços) */
.servico-card-static {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12); /* sombra mais visível */
  padding: 28px 20px;
  transition: transform .3s ease, box-shadow .3s ease;

  /* Centralização */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.servico-card-static:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.servico-card-static .servico-icon img {
  width: 90px;     /* tamanho fixo */
  height: 90px;
  object-fit: contain;
  margin-bottom: 16px;
  display: block;
}


.servico-card-static h3{
  font-size:18px;
  margin:0 0 10px 0;
  color:var(--brand);
}

.servico-card-static p{
  font-size:14.5px;
  color:var(--muted);
  margin:0;
}

.servicos-cta .btn{
  margin-top:8px;
  padding:12px 28px;
  font-size:16px;
  font-weight:600;
  border-radius:30px;
}

.servico-card-static img.servico-icon {
  display:block;
  margin:0 auto 16px auto;
  width:100px;      /* largura fixa */
  height:100px;     /* altura fixa */
  object-fit:contain; /* mantém proporção */
}

/* Ajuste das imagens dentro dos cards */
.premium .card img {
  width: 80px;   /* diminui a largura da imagem */
  height: auto;  /* mantém a proporção */
  margin-bottom: 15px; /* dá espaço entre ícone e texto */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Destaque nos cards */
.premium .card {
  background: #fff; /* mantém contraste */
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15); /* sombra mais forte */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efeito ao passar o mouse */
.premium .card:hover {
  transform: translateY(-6px);
  box-shadow: 0px 10px 22px rgba(0, 0, 0, 0.25);
}



@media (max-width:768px){
  .servico-card-static img.servico-icon {
    width:80px;
    height:80px;
  }
}


.carousel{position:relative}
.carousel-viewport{
  overflow:hidden;border-radius:18px;
}

.carousel-viewport:active { cursor: grabbing; }

/* Evita “pegar” imagens durante o arraste */
.carousel-viewport img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.carousel-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc(33.333% - 16px);
  gap:24px;
  padding:2px; margin:0; list-style:none;
  transition:transform .5s ease;
}

.carousel-btn{
  position:absolute;
  top:50%;
  translate:0 -50%;
  width:44px;
  height:44px;
  border-radius:50%;
  border:2px solid rgba(0,0,0,0.15); /* <<< borda sutil */
  background:#fff;
  box-shadow:var(--shadow);
  font-size:26px;
  line-height:0;
  cursor:pointer;
  color:#222;
  z-index:5;
  transition:all .3s ease;
}
.carousel-btn:hover{background:#f0f0f0;
 border-color:rgba(0,0,0,0.25); /* fica um pouco mais forte no hover */}
.carousel-btn.prev{left:-10px}
.carousel-btn.next{right:-10px}

/* Galeria */
.galeria{padding:72px 0;background:#fff}
.galeria h2{text-align:center;margin:0 0 8px 0;font-size:clamp(22px,3vw,32px)}
.gallery .carousel-viewport{border-radius:0}
.gallery-track{grid-auto-columns:calc(25% - 18px)}
.gallery-item{
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--shadow);
  min-height:240px;   /* <<< agora igual ao tamanho original dos cards de Serviços */
}
.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
}
/* Contato */
.contato{background:linear-gradient(90deg,#899F5E 0%, #DEE1D9 100%);padding:56px 0}
.contato-wrap{
  display:grid;grid-template-columns:1.1fr 1.2fr;gap:24px;align-items:center;
}
.contato-title h2{
  font-family:"Playfair Display",serif;font-size: clamp(28px,4vw,44px);
  color:#fff;margin:0;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.9); /* borda sutil */
}
.form{
  background:#fff;border-radius:16px;box-shadow:var(--shadow);
  padding:18px 18px 22px 18px;
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.form-row{display:flex;flex-direction:column;gap:6px}
.form-row.form-full{grid-column:1/-1}
label{font-weight:600;font-size:14px}
input,textarea{
  border:1px solid #e5e7eb;border-radius:12px;
  padding:12px 14px;font-size:15px;outline-color:#b5d9ec;
}
.checkbox{flex-direction:row;align-items:center;gap:10px}
.form .btn{grid-column:1/-1;margin-top:4px}
.form-feedback{grid-column:1/-1;margin:6px 2px 0 2px;color:#0d5e86;font-weight:600;min-height:1em}

/* Localização */
.localizacao{
  padding:72px 0;
  background:#fff;
}
.localizacao h2{
  text-align:center;
  margin:0 0 36px 0;
  font-size:clamp(22px,3vw,32px);
  color:#07374A;
}
.map-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}
.map-item{
  background:#fafafa;
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
  text-align:center;
  padding-bottom:16px;
}
.map-item h3{
  margin:12px 0 4px 0;
  color:#07374A;
  font-size:18px;
}
.map-item p{
  margin:0;
  font-size:14px;
  color:var(--muted);
}
@media(max-width:900px){
  .map-grid{grid-template-columns:1fr}
}


/* Footer */
.site-footer{background:#0e1320;color:#cfd6df;margin-top:0}
.footer-grid{
  padding:40px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.footer-col h4{margin:0 0 8px 0;color:#fff}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer-col a{color:#cfd6df}
.footer-col a:hover{color:#fff}
.footer-base{
  border-top:1px solid #263046;
  text-align:center;padding:12px 0;font-size:14px;color:#9fb0c7
}
.socials{display:grid;gap:6px}

/* WhatsApp */
.whatsapp-float{
  position:fixed;right:16px;bottom:16px;z-index:60;background:#25d366;
  width:56px;height:56px;display:grid;place-items:center;border-radius:50%;box-shadow:var(--shadow)
}
.whatsapp-float img{width:28px;filter:invert(1)}

/* Balão flutuante do WhatsApp */
.whatsapp-bubble{
  position:fixed;
  right:84px;           /* distância do botão */
  bottom:26px;
  background:#fff;
  color:#07374A;        /* Azul da Prússia da sua paleta */
  font-weight:700;
  font-size:14px;
  line-height:1;
  padding:10px 14px;
  border-radius:999px;
  box-shadow: var(--shadow);
  white-space: nowrap;

  /* Aparece "por trás" do botão (z-index menor) */
  z-index:59;           /* o botão está com z-index:60 no seu CSS */

  /* Estado inicial e animação */
  opacity:0;
  transform: translateX(24px) scale(.98);
  animation: waPop 6s ease-in-out infinite; /* pode trocar por '3' repetições: animation-iteration-count:3; */
}

/* “rabinho” do balão */
.whatsapp-bubble::after{
  content:"";
  position:absolute;
  right:-6px;
  bottom:14px;
  width:12px;
  height:12px;
  background:#fff;
  box-shadow: var(--shadow);
  transform: rotate(45deg);
  border-radius: 2px;
  z-index:-1; /* fica por baixo da bolha para parecer sair de trás */
}

/* Animação: surge de trás do botão, fica visível, e some */
@keyframes waPop{
  0%   { opacity:0; transform: translateX(24px) scale(.98); }
  12%  { opacity:1; transform: translateX(0)    scale(1);    }
  60%  { opacity:1; transform: translateX(0)    scale(1);    }
  82%  { opacity:.95; transform: translateX(4px) scale(1);   }
  100% { opacity:0; transform: translateX(28px) scale(.98);  }
}

/* Em telas muito pequenas, deixo mais compacto */
@media (max-width: 420px){
  .whatsapp-bubble{
    right:76px;
    bottom:20px;
    font-size:13px;
    padding:9px 12px;
  }
}


/* Responsivo */
@media (max-width: 980px){
  .premium-grid{grid-template-columns:repeat(2,1fr)}
  .carousel-track{grid-auto-columns:calc(50% - 12px)}
  .gallery-track{grid-auto-columns:calc(33.333% - 12px)}
  .contato-wrap{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .main-nav ul{display:none;position:absolute;inset:60px 0 auto auto;background:#fff;box-shadow:var(--shadow);padding:12px;border-radius:12px;width:min(260px,90vw);right:4vw}
  .main-nav ul.open{display:grid;gap:10px}
  .nav-toggle{display:block}
  .premium-grid{grid-template-columns:1fr}
  .carousel-track{grid-auto-columns:100%}
  .gallery-track{grid-auto-columns:80%}
  .carousel-btn.prev{left:6px}.carousel-btn.next{right:6px}
  .form{grid-template-columns:1fr}
}

/* ============================= */
/* Ajustes Mobile-First (Otimizados) */
/* ============================= */

/* Hero: texto mais responsivo */
.hero h1 {
  font-size: clamp(22px, 6vw, 38px);
}
.hero p {
  font-size: clamp(14px, 4vw, 18px);
}

/* Hospedagens e Premium: 1 card por linha no mobile, 2 em tablets */
@media (max-width: 991px) {
  .servicos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .premium-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .servicos-grid,
  .premium-grid {
    grid-template-columns: 1fr; /* 1 coluna no celular */
  }
}

/* Galeria: ocupar mais espaço no mobile */
@media (max-width: 720px) {
  .gallery-track {
    grid-auto-columns: 100%;
  }
}

/* Contato: formulário em 1 coluna já em telas médias */
@media (max-width: 900px) {
  .form {
    grid-template-columns: 1fr;
  }
}

/* Header: melhorar menu mobile */
@media (max-width: 720px) {
  .main-nav ul {
    top: 65px; /* evita sobrepor header */
    width: 100%; /* ocupar largura toda */
    right: 0;
    left: 0;
    border-radius: 0;
  }
}