/* RESET BÁSICO */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 0;
      color: #333;
      line-height: 1.6;
      background-color: #f7f7f7;
      scroll-behavior: smooth; /* Para navegação suave entre âncoras */
}

h1,
h2,
h3 {
      font-weight: 700;
      margin-top: 0;
}
:root {
      --primary: #a78a5b;
      --secundary: #386a36;
}

.navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 5%;
      background-color: #fff; /* Verde Escuro (Natureza) */
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      position: absolute;
      left: 20px;
      right: 20px;
      top: 20px;
      z-index: 1000;
      border-radius: 10px;
}

.logo {
      font-size: 1.5em;
      font-weight: bold;
      padding: 10px 0 0 0;
}

.navbar nav a {
      color: #000;
      text-decoration: none;
      margin-left: 25px;
      padding: 5px 0;
      transition: color 0.3s;
      transition: background 0.3s;
      margin: 0px;
      padding: 10px;
      border-radius: 5px;
      font-family: 'playfair display', serif;
      font-size: 1.3em;
}

.navbar nav a:hover {
      background: #a78a5b;
      color: #fff;
}

.btn-reserva {
      background-color: #a78a5b;
      padding: 8px 15px;
      border-radius: 5px;
      font-weight: bold;
      text-transform: uppercase;
      background-color: #386a36;
      color: #fff;
      transition: background-color 0.3s;
      text-decoration: none;
}

.btn-reserva:hover {
      background-color: #a78a5b;
}

/* ?? 2. SEÇÃO PRINCIPAL (HERO BANNER) */
.hero-video {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: relative;
      overflow: hidden;
}

.video-background {
      /* Força o elemento a ser maior que o container, garantindo que cubra tudo */
      width: 200%;
      height: 200%;
      position: absolute;
      top: -50%; /* Centraliza o vídeo (metade do excesso de 200%) */
      left: -50%; /* Centraliza o vídeo */
      transform: none;

      z-index: 1;
      pointer-events: none; /* Impede cliques no vídeo */
}
.hero-content {
      z-index: 2;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      padding: 60px 20px;
      border-radius: 10px;
}
.hero-content .title-decor {
      font-family: 'Playfair Display', serif;
      font-size: 2.8em;
      margin: 0px;
}
.hero-content p {
      font-size: 1.3em;
      margin: 0px;
}

.btn-principal {
      background-color: var(--primary);
      color: white;
      padding: 15px 30px;
      text-decoration: none;
      font-weight: bold;
      border-radius: 5px;
      display: inline-block;
      transition: background-color 0.3s;
      text-transform: uppercase;
      z-index: 2;
}

.btn-principal:hover {
      background-color: #fff;
      color: var(--secundary);
}

/* ?? 3. SEÇÃO DE DESTAQUES (Duplo Foco) */
.duplo-foco {
      display: flex;
      justify-content: space-around;
      padding: 40px 5%;
      gap: 30px;
      margin-top: -80px; /* Sobrepor o Hero para maior impacto */
      position: relative;
      z-index: 5;
}

.card {
      flex: 1;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
      text-align: center;
}

.card h2 {
      font-size: 1.5em;
      color: #004d40;
}

.card-lazer {
      background-color: #e0f2f1; /* Verde Claro */
}

.card-offshore {
      background-color: #fff8e1; /* Amarelo Palha/Estratégico */
}

.btn-card {
      display: block;
      margin-top: 20px;
      padding: 12px;
      background-color: #004d40;
      color: white;
      text-decoration: none;
      border-radius: 5px;
      font-weight: bold;
      transition: background-color 0.3s;
}

.btn-card:hover {
      background-color: #00796b;
}

/* ??? 4. SEÇÕES GERAIS (Hotelaria, Lazer, Restaurante, Contato) */
.section {
      padding: 20px 5%;
      text-align: center;
}

/* Estilo específico para a seção de Lazer/Atrações */
.atracoes .title-decor {
      font-family: 'Playfair Display', serif;
      font-size: 2.4em;
}
.atracoes-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      margin-top: 30px;
}

.servico {
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      font-weight: 600;
      color: #004d40;
      flex: 1 1 calc(33% - 40px); /* 3 itens por linha em desktop */
      min-width: 250px;
      font-size: 1.3em;
}

/* ?? Estilo para a Seção Empresas/Offshore */
.empresas .title-decor {
      font-family: 'Playfair Display', serif;
      font-size: 2.4em;
}
.section-offshore-detail {
      background-color: #f0f0f0;
      position: relative;
}
.section-offshore-detail .elementor-shape {
      direction: ltr;
      left: 0;
      right: 0px;
      line-height: 0;
      overflow: hidden;
      position: absolute;
      width: 100%;
      height: 40px;
      top: -39px;
}
.section-offshore-detail .elementor-shape svg {
      width: 100% !important;
      height: 40px;
}
.section-offshore-detail .elementor-shape svg path {
      fill: #f0f0f0;
}

.section-offshore-detail ul {
      list-style: none;
      padding: 0;
      max-width: 700px;
      margin: 0 auto 30px;
      text-align: left;
}

.section-offshore-detail ul li {
      background-color: white;
      margin-bottom: 10px;
      padding: 20px 15px;
      border-left: 5px solid var(--primary);
      font-size: 1.2em;
}

/* ?? 8. SEÇÃO CONTATO */
#contato {
      background-color: var(--primary);
      color: white;
      padding: 30px 5%;
      text-align: center;
}
#contato span {
      background: white;
      padding: 15px 10px;
      display: inline-block;
      margin: 0 auto;
      border-radius: 10px;
}
#contato span img {
      width: 250px;
}

#contato h2 {
      color: #fff;
      font-family: 'Playfair Display', serif;
      font-size: 1.9em;
}

/* ?? 9. RODAPÉ */
footer {
      background-color: #222;
      color: #bbb;
      text-align: center;
      padding: 20px 0;
      font-size: 0.9em;
}

.social-links a {
      color: #ffb300;
      margin: 0 10px;
      text-decoration: none;
}

/* MEDIA QUERIES para responsividade */
@media (max-width: 768px) {
      .navbar {
            flex-direction: column;
            padding: 15px;
      }

      .navbar nav {
            margin-top: 10px;
      }

      .navbar nav a {
            margin: 0 10px;
      }

      .duplo-foco {
            flex-direction: column;
            padding: 20px 5%;
            margin-top: 0;
      }

      .hero h1 {
            font-size: 2em;
      }

      .servico {
            flex: 1 1 100%; /* 1 item por linha em mobile */
      }
}

/* HOTELARIA */

/* ESTILOS PARA A SEÇÃO HOTELARIA COM CARROSSEL DE FOTOS E INFORMAÇÕES AO LADO */

/* Container de duas colunas */
.suites-slider-com-info {
      display: grid;
      grid-template-columns: 1.5fr 1fr; /* Carrossel maior que as informações */
      gap: 40px;
      margin: 40px auto;
      max-width: 1100px;
      text-align: left;
      background-color: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

#hotelaria .title-decor {
      font-family: 'Playfair Display', serif;
      font-size: 2.4em;
      margin: 0;
}

/* Estilo do Carrossel (Swiper) */
.mySwiperHotelaria {
      width: 100%;
      height: 400px; /* Altura fixa para o carrossel de fotos */
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.hotelaria-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
}

/* Estilos dos botões e paginação do Swiper */
.mySwiperHotelaria .swiper-button-next,
.mySwiperHotelaria .swiper-button-prev {
      color: white !important;
      background-color: rgba(0, 0, 0, 0.4);
      width: 35px;
      height: 35px;
      border-radius: 50%;
}
.mySwiperHotelaria .swiper-button-next:hover,
.mySwiperHotelaria .swiper-button-prev:hover {
      background-color: rgba(0, 0, 0, 0.8);
}
.mySwiperHotelaria .swiper-pagination-bullet-active {
      background: var(
            --primary
      ) !important; /* Bolinha ativa com a cor primária */
}

/* Estilo da coluna de informações (Texto) */
.suites-info-lateral {
      padding: 0 10px;
}

.suites-info-lateral h3 {
      color: var(--primary);
      font-family: 'Playfair Display', serif;

      font-size: 1.8em;
      margin-bottom: 15px;
}

.suites-info-lateral p {
      font-size: 1.1em;
      margin-bottom: 20px;
      color: #555;
}

/* Estilo da lista de comodidades */
.lista-comodidades {
      /* O bloco UL foi movido para fora do grid principal, então ele precisa de seu próprio layout */
      list-style: none;
      padding: 0;
      margin-top: 40px; /* Adiciona espaço acima da lista */
      margin-bottom: 30px;

      /* NOVO: Layout de Grid para espalhar os itens */
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* 2 colunas para desktop */
      gap: 15px; /* Espaço entre os itens */
      max-width: 1000px; /* Limita a largura para não esticar demais */
      margin-left: auto;
      margin-right: auto;
      text-align: left; /* Alinha o texto da lista à esquerda */
}

.lista-comodidades li {
      background-color: var(--light-yellow);
      padding: 15px 20px; /* Aumentado o padding para "espalhar" o conteúdo */
      margin-bottom: 0; /* Removido o margin-bottom porque o gap faz a separação */
      border-radius: 8px; /* Borda um pouco mais arredondada */
      border-left: 4px solid var(--secundary);
      font-size: 1em;
      color: #333;
      font-weight: 500;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Sombra sutil */
}

/* Responsividade para telas menores (Celular) */
@media (max-width: 768px) {
      .lista-comodidades {
            grid-template-columns: 1fr; /* Volta para 1 coluna em celular */
            gap: 10px;
      }
}

/* Responsividade (garante que vira uma coluna em telas menores) */
@media (max-width: 992px) {
      .suites-slider-com-info {
            grid-template-columns: 1fr;
            padding: 20px;
      }
      .mySwiperHotelaria {
            height: 300px;
      }
}

/* Estilos para a Nova Galeria de Fotos */

.acomodacoes .title-decor {
      font-family: 'Playfair Display', serif;
      font-size: 2.4em;
      margin: 0;
}
.acomodacoes .subtitle {
      font-size: 1.3em;
      padding: 0px;
      margin: 0px;
}
.photo-gallery-destaque {
      padding: 40px 5%;
      background-color: white;
}

.gallery-grid {
      display: grid;
      /* Define o layout da grade: 3 colunas para desktop */
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      margin-top: 40px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
}

.gallery-item {
      overflow: hidden;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      cursor: zoom-in; /* Indica que a foto pode ser ampliada */
}

.gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* Garante que a imagem preencha a div sem distorcer */
      transition: transform 0.3s;
}

.gallery-item img:hover {
      transform: scale(1.05); /* Efeito de zoom sutil ao passar o mouse */
}

/* Layout específico para mobile (1 coluna) */
@media (max-width: 768px) {
      .gallery-grid {
            grid-template-columns: 1fr; /* Apenas uma coluna em telas pequenas */
      }
}

/* Estilos para Títulos Invertidos (Para fundo escuro) */
.title-decor-inverted {
      font-size: 2.2em;
      color: white; /* Título Branco */
      margin-bottom: 20px;
      position: relative;
      display: inline-block;
      font-family: 'playfair display', serif;
}

.title-decor-inverted::after {
      content: '';
      display: block;
      width: 60px;
      height: 4px;
      background-color: var(--primary); /* Linha Marrom/Ouro */
      margin: 8px auto 0;
      border-radius: 2px;
}

.subtitle-inverted {
      font-size: 1.3em;
      color: #eee; /* Texto mais claro */
      max-width: 800px;
      margin: 10px auto 40px;
}

/* SEÇÃO RESTAURANTE VISUAL */
.section-restaurante-visual {
      background-color: var(--secundary); /* Fundo Verde Escuro */
      color: white;
      padding: 0 0 60px 0;
}

.gastronomia-photo-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin: 40px auto;
      max-width: 1200px;
}

.gastronomia-item {
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
      background-color: white;
      position: relative;
}

.gastronomia-item img {
      width: 100%;
      height: 250px; /* Altura fixa para as fotos */
      object-fit: cover;
      transition: transform 0.3s;
}

.gastronomia-item img:hover {
      transform: scale(1.05);
}

.caption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 10px;
      font-size: 0.9em;
      font-weight: bold;
      text-align: center;
      margin: 0;
}

.restaurante-texto-destaque {
      margin: 40px auto 20px;
      max-width: 800px;
      text-align: center;
      padding: 20px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 8px;
}

.restaurante-texto-destaque p {
      margin: 10px 0;
      font-size: 1.3em;
}

/* Responsividade da grade de gastronomia */
@media (max-width: 992px) {
      .gastronomia-photo-grid {
            grid-template-columns: repeat(2, 1fr); /* 2 colunas em tablets */
      }
}
@media (max-width: 576px) {
      .gastronomia-photo-grid {
            grid-template-columns: 1fr; /* 1 coluna em celulares */
      }
}

#img_destaque {
      width: 100%;
      height: 400px;
      background-image: url('../img/aerea.jpg');
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      margin-top: 20px;
}

/* ESTILOS PARA O CARROSSEL DE ATRAÇÕES */
.section-lazer {
      position: relative;
      padding: 0 0 120px 0;
}
.section-lazer .elementor-shape {
      direction: ltr;
      left: 0;
      right: 0px;
      line-height: 0;
      overflow: hidden;
      position: absolute;
      width: 100%;
      height: 40px;
      bottom: -1px;
}
.section-lazer .elementor-shape svg {
      width: 100% !important;
      height: 40px;
}
.section-lazer .elementor-shape svg path {
      fill: var(--secundary);
}
.section-lazer-slider {
      background-color: var(--light-green); /* Fundo claro para contraste */
}

/* Tamanho e borda do Container do Carrossel */
.mySwiper {
      width: 90%;
      max-width: 1200px;
      height: 350px;
      margin: 40px auto;
      border-radius: 10px;
      overflow: hidden;
}

/* Estilo de cada Slide/Card */
.swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      background-size: cover;
      background-position: center;
      color: white;
}

/* SOBREPOSIÇÃO ESCURA PARA LEITURA DO TEXTO */
.swiper-slide::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.25);
      transition: background 0.3s;
}

.swiper-slide:hover::before {
      background: rgba(0, 0, 0, 0.4); /* Escurece um pouco mais no hover */
}

.slide-overlay {
      position: absolute;
      z-index: 10;
      display: grid;
      align-items: center;
      justify-items: center;
      inset: 0px;
      padding: 0 15px;
}

.slide-overlay h2 {
      font-size: 2.5em;
      line-height: 1.2em;
      font-family: 'Playfair Display', serif;
      margin-bottom: 20px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.btn-saiba-mais {
      display: inline-block;
      padding: 10px 25px;
      background-color: var(--primary); /* Marrom/Ouro */
      color: white;
      text-decoration: none;
      font-weight: bold;
      border-radius: 5px;
      border: 2px solid white;
      transition: background-color 0.3s;
}

.btn-saiba-mais:hover {
      background-color: var(--secundary); /* Verde */
}

/* ESTILOS DOS BOTÕES DE NAVEGAÇÃO (SETAS) */
.swiper-button-next,
.swiper-button-prev {
      color: white !important;
      background-color: rgba(0, 0, 0, 0.5); /* Fundo semi-transparente escuro */
      width: 40px;
      height: 40px;
      border-radius: 50%;
      transition: background-color 0.3s;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
      background-color: rgba(0, 0, 0, 0.8);
}

/* Corrigindo o tamanho do ícone da seta */
.swiper-button-next::after,
.swiper-button-prev::after {
      font-size: 18px !important;
}

/* Dica: Use o background-image para carregar as fotos */
.slide-fazendinha {
      background-image: url('../img/gastronomia.jpg');
}
.slide-charrete {
      background-image: url('../img/gastronomia.jpg');
}
.slide-pedalinho {
      background-image: url('../img/gastronomia.jpg');
}

/* ?? 8.1. MAPA DE LOCALIZAÇÃO */
.mapa-localizacao {
      padding: 0; /* Remove o padding padrão para o mapa ocupar 100% da largura */
      background-color: #e9e9e9; /* Cor de fundo leve, acima do rodapé escuro */
      text-align: center;
}

.map-container {
      width: 100%;
      /* Altura será controlada pelo iframe, mas podemos adicionar um max-width se necessário */
      overflow: hidden;
}

.map-container iframe {
      width: 100%;
      /* Altura fixa, pode ser ajustada */
      height: 300px;
      display: block;
}

.btn-mapa {
      margin: 20px auto 30px;
      background-color: var(--secundary); /* Usa o verde escuro como destaque */
      color: white;
}

.btn-mapa:hover {
      background-color: var(--primary); /* Hover marrom/ouro */
}

@media screen and (max-width: 1050px) {
      nav,
      .navbar .btn-reserva {
            display: none;
      }
}

@media screen and (max-width: 768px) {
      #img_destaque {
            background-attachment: initial;
      }
}