.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Kalnia";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Kalnia";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-weight:600;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --gl-azul:#236D96; --gl-verde:#15755D; --gl-terracota:#702909; --gl-tinta:#1E0502; --gl-corpo:#46545C; --gl-branco:#FFFFFF; --gl-fundo-claro:#F4F7F9; --gl-pilula-fundo:#E7F2EC; --gl-borda:#E3EAEF; --gl-borda-campo:#D4DEE4; --gl-azul-claro:#BFE0EE; --gl-claro-sobre-foto:#EAF2F6; --gl-titulo:Kalnia; --gl-fonte-corpo:Montserrat; --gl-container:1280px; --gl-respiro-lateral:40px; --gl-respiro-secao:92px; --gl-respiro-faixa:70px; --gl-raio-botao:8px; --gl-raio-foto:12px; --gl-raio-cartao:14px; --gl-raio-pilula:999px; --gl-altura-campo:48px; --gl-traco-icone:1.6px; }
/* Start custom CSS *//* ---------------------------------------------- trava de tipografia
   gravar o kit materializa Roboto/Roboto Slab acima das classes globais */
.elementor-kit-5 h1, .elementor-kit-5 h2, .elementor-kit-5 h3, .elementor-kit-5 h4 {
  font-family: "Kalnia", Georgia, serif; font-weight: 400;
}
.elementor-kit-5 h5, .elementor-kit-5 h6, .elementor-kit-5 p, .elementor-kit-5 a,
.elementor-kit-5 li, .elementor-kit-5 span, .elementor-kit-5 button,
.elementor-kit-5 input, .elementor-kit-5 select, .elementor-kit-5 textarea,
.elementor-kit-5 blockquote, .elementor-kit-5 label {
  font-family: "Montserrat", system-ui, sans-serif;
}

/* ------------------------------------------------------- correcoes conhecidas */
/* imagem com link vira <a> flex e encolhe ate sumir (foi o logo do cabecalho) */
.elementor .e-image-link-base { flex: 0 0 auto; display: block; }

/* carrossel no celular: sem barra de rolagem visivel */
@media (max-width: 767px) {
  .gl-grade-3, .gl-faixa-3, .gl-grade-insta, .gl-mosaico {
    -ms-overflow-style: none; scrollbar-width: none;
  }
  .gl-grade-3::-webkit-scrollbar, .gl-faixa-3::-webkit-scrollbar,
  .gl-grade-insta::-webkit-scrollbar, .gl-mosaico::-webkit-scrollbar { display: none; }
}

/* mosaico de fotos vira slide no celular.
   O !important e necessario: o mosaico leva `display: grid` no estilo LOCAL do
   elemento, e o CSS local e carregado depois do da classe global. */
@media (max-width: 767px) {
  .elementor .gl-mosaico {
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important;
    grid-template-columns: none !important; grid-template-rows: none !important;
    scroll-snap-type: x mandatory; gap: 12px !important; padding-bottom: 4px;
  }
  .elementor .gl-mosaico > * {
    flex: 0 0 82vw !important; scroll-snap-align: center; grid-column: auto !important;
    height: 240px !important;
  }
}

/* ------------------------------------------------------------------ movimento */
.elementor .gl-btn, .elementor .gl-cartao, .elementor .gl-foto,
.elementor .gl-depoimento, .elementor .gl-faq-item {
  transition: transform .3s ease, box-shadow .3s ease, background-color .25s ease, color .25s ease;
}
.elementor .gl-cartao:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(35,109,150,.14); }
.elementor .gl-cartao:hover .gl-foto-cartao { transform: scale(1.04); }
.elementor .gl-cartao { overflow: hidden; }
.elementor .gl-foto-cartao { transition: transform .5s ease; }
.elementor .gl-btn:hover { transform: translateY(-2px); }

@keyframes gl-sobe { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    .elementor .gl-entra { animation: gl-sobe .9s ease both; animation-timeline: view();
      animation-range: entry 8% cover 32%; }
  }
}

/* ------------------------------------------------------------------- acordeao */
.elementor .gl-faq-item summary, .elementor .gl-faq-item .e-accordion-item-header {
  cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
/* a seta e um e-svg de verdade no slot do icone; o Elementor gira sozinho no [open] */
.elementor .gl-faq-item .e-accordion-item-icon { flex: 0 0 auto; }

/* ------------------------------------------- campos da barra de reserva
   o PNG mostra o campo sem moldura propria dentro da caixa clara; as classes
   base do e-form ganham da classe global, entao a correcao vem daqui */
.elementor .gl-campo-caixa input,
.elementor .gl-campo-caixa select {
  border: 0; background-color: transparent; padding: 0; height: 22px; width: 100%;
  font-family: "Montserrat", sans-serif; font-size: 15px; color: #1E0502; box-shadow: none;
  appearance: none; -webkit-appearance: none;
}
.elementor .gl-campo-caixa select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23236D96' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center; padding-right: 20px;
}
.elementor .gl-campo-caixa input:focus,
.elementor .gl-campo-caixa select:focus { outline: 2px solid #BFE0EE; outline-offset: 3px; }

/* ------------------------------- cabecalho de tema flutuando sobre a capa
   o modelo de tema entra antes do conteudo; sem isso ele empurraria a capa.
   fixed (nao absolute) para acompanhar a rolagem, como no Belem Soft. */
header.elementor-location-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; width: 100%;
  transition: background-color .18s ease, box-shadow .18s ease, padding .18s ease;
}
/* a barra de admin do WordPress e fixa: 32px no desktop, 46px entre 601 e 782px.
   Ate 600px ela vira `position: absolute` e some ao rolar — manter o desconto ali
   deixava uma faixa vazia acima do menu no celular. */
.admin-bar header.elementor-location-header { top: 32px; }
@media (max-width: 782px) { .admin-bar header.elementor-location-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar header.elementor-location-header { top: 0px; } }
body { overflow-x: hidden; }

/* ------------------------------------------------- ajustes do celular
   prefixo .elementor obrigatorio: sem ele a regra perde para a classe global */
@media (max-width: 767px) {
  /* a barra fixa do rodape cobre o fim da pagina */
  .elementor .gl-rodape { padding-bottom: 96px; }
}

/* ------------------------------------------------------------------ utilidades */
html { scroll-behavior: smooth; }
/* NAO repor um ".gl-relativo > * { position: relative }" aqui: a regra tinha
   especificidade maior que as classes globais e transformava veu, legenda e
   cartao flutuante em elementos no fluxo — foi o que quebrou Destino e as
   legendas da faixa de diferenciais. A ordem no DOM ja resolve o empilhamento. */

/* ================================================= ajustes do cliente 27/10/2026 */

/* --------------------------------- grade de 3 que nao colapsava no celular
   O `gl-grade-3` vira carrossel no celular, mas SO funciona quando os filhos
   levam `gl-item-carrossel`, que e quem da a largura do slide. Nas comodidades
   do Hotel e nas distancias da Localizacao os filhos nao tem a classe: cada um
   ficava com 60px e o texto saia cortado ("Estacionament", "Acessibilidad").
   Sem slide, a grade volta a ser UMA coluna — o mesmo desenho que a pagina
   Promocoes ja usa. Fica de fora o `gl-mosaico` (galeria da pagina Fotos),
   que e carrossel de imagem de verdade. */
@media (max-width: 767px) {
  .elementor .gl-grade-3:not(.gl-mosaico):not(:has(> .gl-item-carrossel)) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow-x: visible;
    gap: 12px;
  }
}

/* --------------------------------- Nossos Diferenciais no celular
   Pedido de 27/10/2026: tirar o slide e por em duas colunas, tanto na faixa de
   fotos quanto nos selos de baixo.

   A FAIXA DE FOTOS (3 itens) sai do carrossel e vira grade; o terceiro ocupa a
   linha inteira para nao ficar meia foto orfa. `!important` porque a variante
   mobile da classe global tem a MESMA especificidade e e carregada depois. */
@media (max-width: 767px) {
  .elementor .gl-faixa-3 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 4px !important;
  }
  .elementor .gl-faixa-3 > *:nth-child(3):last-child { grid-column: 1 / -1; }
  /* em meia tela a legenda precisa caber: menos respiro lateral e corpo menor */
  .elementor .gl-faixa-3 > * {
    height: 190px !important;
    padding-inline: 12px !important;
  }
  .elementor .gl-faixa-3 > *:nth-child(3):last-child { height: 210px !important; }
  .elementor .gl-faixa-3 .gl-legenda-centro { font-size: 14px; max-width: 94%; }

  /* OS SELOS voltam a duas colunas. Aqui a conta e de largura: "Estacionamento"
     mede 132px em Kalnia 16px, e a coluna so da isso com o respiro apertado
     (bloco 12 + vao 8 + cartao 10 => 139px uteis). Com 24px, o tamanho padrao
     do h3, a palavra pedia 185px e vazava o cartao. */
  .elementor .gl-cartao-comodidades { padding: 12px !important; }
  .elementor .gl-grade-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .elementor .gl-comodidade-cartao { padding: 10px !important; }
  .elementor .gl-comodidade-cartao h3 { font-size: 16px; line-height: 1.22; }
  .elementor .gl-comodidade-cartao p { font-size: 13px; line-height: 1.5; }
}

/* --------------------------------- menu do celular em tela cheia
   O painel do acordeao nascia como uma caixinha flutuante de 232x394 encostada
   no canto. `--gl-cab-h` e escrita pelo snippet a cada medida da faixa, porque
   a altura do cabecalho muda quando ele encolhe ao rolar. */
@media (max-width: 767px) {
  header.elementor-location-header .e-accordion-item-content-base {
    position: fixed;
    inset-inline: 0;
    inset-block-start: var(--gl-cab-h, 64px);
    inset-block-end: 0;
    width: 100vw;
    max-width: none;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 20px 28px calc(20px + env(safe-area-inset-bottom, 0px));
    /* opaco de verdade: a 0,97 o botao fixo de reservar aparecia por tras.
       O veu leva um fio da marca, como a tela de carregamento. */
    background-color: #1E0502;
    background-image: linear-gradient(155deg, rgba(35, 109, 150, 0.38) 0%, rgba(21, 117, 93, 0.20) 100%);
    overflow-y: auto;
    border-radius: 0;
  }
  header.elementor-location-header .e-accordion-item-content-base > * {
    font-size: 22px;
    line-height: 1.2;
    padding-block: 15px;
    text-align: center;
  }
  /* a pagina nao rola atras do menu aberto */
  html:has(header.elementor-location-header details[open]) body { overflow: hidden; }
}

/* --------------------------------- acomodacoes: a foto vem antes do texto
   As linhas alternam o lado no desktop; no celular as invertidas punham o texto
   antes da foto, e entre um quarto e outro sobravam duas fotos coladas, sem dar
   para saber de quem era cada uma. Vale so nas duas paginas de acomodacoes. */
@media (max-width: 767px) {
  body.elementor-page-152 .gl-linha > .gl-col-foto,
  body.elementor-page-385 .gl-linha > .gl-col-foto { order: -1; }
}

/* --------------------------------- controle do video da capa
   O circulo de play/pause ocupava 40px num canto de 390px. No celular ele
   encolhe; continua existindo porque o video toca sozinho e a pausa e
   requisito de acessibilidade. */
@media (max-width: 767px) {
  .elementor .e-background-video__controls button {
    width: 32px; height: 32px; min-width: 32px;
  }
  .elementor .e-background-video__controls button p { font-size: 9px; }
}

/* --------------------------------- hover dos links do chrome
   O estilo padrao da tag `a` (manage-default-styles) poe
   `.e-default-a:hover { color: var(--gl-verde) }`. Isso funciona no corpo da
   pagina, texto escuro sobre branco — mas no cabecalho e no rodape os links sao
   brancos sobre foto ou sobre o azul/verde da marca, e o verde no hover deixava
   o item ILEGIVEL (foi o que o cliente apontou em 27/10/2026). Aqui o texto
   continua branco e o hover e marcado por um filete verde embaixo.
   CUIDADO com a conta da especificidade: `:hover` vale como CLASSE, entao
   `.elementor .e-default-a:hover` e (0,3,0) — `header.elementor-location-header
   a:hover` e so (0,2,2) e PERDE. Com o `.e-default-a` no seletor vira (0,3,1).
   O sintoma foi bonito: o filete novo apareceu e a cor continuou verde, porque
   `text-decoration` ninguem mais declarava. */
header.elementor-location-header a.e-default-a:hover,
header.elementor-location-header a.e-default-a:focus-visible,
footer.elementor-location-footer a.e-default-a:hover,
footer.elementor-location-footer a.e-default-a:focus-visible {
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: #5FBFA3;
}
/* o botao de reservar e o seletor PT|EN tem desenho proprio: nada de filete */
header.elementor-location-header .gl-btn:hover,
header.elementor-location-header .gl-idioma-pt a:hover,
header.elementor-location-header .gl-idioma-en a:hover,
footer.elementor-location-footer .gl-btn:hover {
  text-decoration: none;
}/* End custom CSS */