/* ===========================================================================
   Eco Sun Charters — app.css
   Paleta e formas do site original, reescrito para Bootstrap 5 e sem jQuery.
   =========================================================================== */

/* ---------------------------- fonte Ubuntu ------------------------------- */
/* Auto-alojada: sem pedidos ao Google Fonts (melhor para o RGPD). */

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/fonts/ubuntu-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/fonts/ubuntu-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../vendor/fonts/ubuntu-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../vendor/fonts/ubuntu-latin-700-normal.woff2') format('woff2');
}

:root {
  --teal:      #227376;
  --teal-fundo:#02292c;
  --ouro:      #e1b12c;
  --escuro:    #222;
  --texto:     #333;
  --cinza:     #555;
  --cinza-cl:  #777;
  --header-h:  101px;
  --raio:      5px;
}

/* ------------------------------- base ----------------------------------- */

html {
  scroll-behavior: smooth;
}

html, body {
  font-family: 'Ubuntu', system-ui, sans-serif;
  color: var(--texto);
  font-weight: 400;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, b, strong { font-weight: 500; }

a { text-decoration: none; }
a:hover, a:focus, button:hover, button:focus { text-decoration: none; box-shadow: none; }

img { max-width: 100%; height: auto; }

main { padding-top: var(--header-h); }

.mini { font-size: 12px; line-height: 1.5; }
.nota { font-size: 9px; vertical-align: super; }

/* ------------------------------- ícones ---------------------------------- */

.ico {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -.125em;
  flex-shrink: 0;
}

/* --------------------------- acessibilidade ------------------------------ */

.salto-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--ouro);
  color: var(--escuro);
  padding: 12px 20px;
  font-weight: 500;
  border-radius: 0 0 var(--raio) 0;
}
.salto-conteudo:focus { left: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ouro);
  outline-offset: 2px;
}

/* Elementos animados só ficam invisíveis depois de o JavaScript os preparar.
   Assim, o conteúdo permanece sempre acessível se o JavaScript não carregar. */
[data-revelar].revelar-pronto {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(.985);
  filter: blur(4px);
  transition:
    opacity .7s cubic-bezier(.2, .65, .25, 1),
    transform .8s cubic-bezier(.2, .65, .25, 1),
    filter .65s ease;
  transition-delay: var(--atraso-revelar, 0ms);
  will-change: opacity, transform, filter;
}
[data-revelar].revelar-pronto.revelado {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  will-change: auto;
}

/* -------------------------------- navbar --------------------------------- */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1030;
}
header .navbar-expand-lg::before {
  transition: background .45s ease, border-color .45s ease, box-shadow .45s ease;
}
header.com-scroll .navbar-expand-lg::before {
  background: rgba(2, 41, 44, .92);
  border-bottom-color: rgba(255, 255, 255, .1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}

.navbar-expand-lg { position: relative; padding-top: 0; padding-bottom: 0; }

.navbar-expand-lg::before {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(15, 15, 30, .25);
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  z-index: -1;
}

.navbar-brand { padding: 8px 0; }
.navbar-brand img { width: 170px; height: auto; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.navbar-brand:hover img { transform: scale(1.045); }

.navbar-toggler { border: none; color: #fff; font-size: 1.7rem; padding: 4px 8px; line-height: 1; }
.navbar-toggler:focus { box-shadow: none; }

.navbar-expand-lg .navbar-nav .nav-link {
  color: #f3f3f3;
  margin: 0 16px;
  padding: 12px 0;
  background: none;
  border: none;
  position: relative;
  transition: color .4s;
}
.navbar-expand-lg .navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  height: 2px;
  width: 0;
  background: var(--ouro);
  border: none;
  transition: width .4s;
}
.navbar-expand-lg .navbar-nav .nav-link:hover,
.navbar-expand-lg .navbar-nav .nav-link.activo { color: var(--ouro); }
.navbar-expand-lg .navbar-nav .nav-link:hover::after,
.navbar-expand-lg .navbar-nav .nav-link.activo::after { width: 100%; }

/* o dropdown-toggle do Bootstrap traz a seta em ::after — repor */
.navbar-nav .dropdown-toggle::after {
  content: '';
  display: inline-block;
  position: static;
  width: 0;
  height: 0;
  margin-left: .4em;
  vertical-align: .1em;
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-left: .3em solid transparent;
  border-bottom: 0;
  background: none;
  transition: none;
}
.navbar-nav .dropdown-toggle:hover::after { width: 0; }

.dropdown-menu {
  margin-top: 0;
  min-width: auto;
  border: none;
  border-radius: var(--raio);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(15, 15, 30, .75);
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  padding: .4rem 0;
}
.dropdown-menu .dropdown-item {
  color: #fff;
  padding: .4rem 1.2rem;
  transition: color .3s;
  white-space: normal;
}

@media (min-width: 992px) {
  .navbar-nav .dropdown-menu { min-width: 20rem; }
  .navbar-nav .dropdown-menu .dropdown-item { white-space: nowrap; }
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item.activo {
  background: transparent;
  color: var(--ouro);
}

.navbar-nav .nav-link.botao-reservar {
  display: inline-block;
  background: var(--ouro);
  color: var(--escuro);
  border-radius: var(--raio);
  padding: 10px 20px;
  font-weight: 500;
  box-shadow: 0 5px 14px rgba(225, 177, 44, .16);
  transition: transform .3s ease, filter .3s ease, box-shadow .3s ease;
}
.navbar-nav .nav-link.botao-reservar:hover {
  color: var(--escuro);
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(225, 177, 44, .28);
}
.navbar-nav .nav-link.botao-reservar::after { display: none; }

.idiomas { display: flex; align-items: center; }
.idiomas .nav-link.idioma { margin: 0 4px; padding: 12px 2px; }
.idiomas .nav-link.idioma img { width: 20px; height: 20px; object-fit: contain; opacity: .55; transition: opacity .3s; }
.idiomas .nav-link.idioma:hover img,
.idiomas .nav-link.idioma.activo img { opacity: 1; }
.idiomas .nav-link.idioma::after { display: none; }

/* --------------------------------- hero ---------------------------------- */

#hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  margin-top: calc(var(--header-h) * -1);
  background: #0b2c2e;
}
#hero video,
#hero .hero-fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
#hero video::-webkit-media-controls { display: none !important; }
#hero video { animation: respirar-hero 18s ease-in-out infinite alternate; }
#hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle at 72% 24%, rgba(225, 177, 44, .17), transparent 34%);
  animation: luz-hero 12s ease-in-out infinite alternate;
}
@keyframes respirar-hero {
  from { transform: translate(-50%, -50%) scale(1.01); }
  to { transform: translate(-50%, -50%) scale(1.07); }
}
@keyframes luz-hero {
  from { opacity: .35; transform: scale(.95); }
  to { opacity: .8; transform: scale(1.08); }
}

.descer {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: none;
  padding: 0;
  z-index: 2;
}
.rato {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 54px;
  border: 2px solid #fff;
  border-radius: 20px;
}
.roda {
  position: absolute;
  top: 14px;
  left: 13px;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  animation: descer 2.5s infinite;
}
@keyframes descer {
  0%   { top: 14px; opacity: 0; }
  15%  { top: 14px; opacity: 1; }
  30%  { top: 14px; opacity: 1; }
  45%  { top: 34px; opacity: 1; }
  100% { top: 34px; opacity: 0; }
}

.som-video {
  position: absolute;
  bottom: 30px;
  left: 30px;
  z-index: 2;
  width: 70px;
  height: 70px;
  border: none;
  border-radius: 100px;
  background: rgba(255, 255, 255, .31);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.som-video:hover {
  background: rgba(255, 255, 255, .5);
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}

/* ------------------------------- charters -------------------------------- */

#charters { padding: 80px 0; }
#charters h2 { font-size: 1.1rem; color: var(--cinza); font-weight: 400; margin-bottom: 0; }
#charters .titulo { font-size: 2rem; color: var(--escuro); margin-bottom: 30px; }

.cartao-ligacao {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.cartao-ligacao:focus-visible { outline: none; }
.cartao-ligacao:focus-visible .cartao {
  outline: 3px solid var(--ouro);
  outline-offset: 3px;
}

.cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .25);
  background: #fff;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease;
}
.cartao:hover {
  transform: translateY(-9px);
  box-shadow: 0 18px 38px rgba(3, 30, 31, .2);
}
.cartao .descricao { padding: 15px 20px; display: flex; flex-direction: column; flex: 1 1 auto; }
.cartao .descricao h3 { font-size: 1.275rem; color: var(--escuro); margin-bottom: 0; transition: color .3s ease; }
.cartao:hover .descricao h3 { color: var(--teal); }
.cartao .traco {
  display: block;
  width: 48px;
  height: 4px;
  margin: 10px 0;
  background: var(--ouro);
  transition: width .4s cubic-bezier(.2, .8, .2, 1);
}
.cartao:hover .traco { width: 72px; }
.cartao .descricao .meta { color: var(--cinza); font-size: .95rem; margin-bottom: .5rem; }
.cartao .descricao .meta i { color: var(--ouro); margin-right: 4px; }
.cartao .descricao p.resumo { color: var(--cinza-cl); font-size: .9rem; flex: 1 1 auto; }
.cartao .descricao .ligacao { color: var(--cinza); font-weight: 500; }
.cartao .descricao .ligacao i { margin-left: 8px; transition: margin-left .3s; }
.cartao:hover .descricao .ligacao { color: var(--ouro); }
.cartao:hover .descricao .ligacao i { margin-left: 14px; }

/* slider de imagens dentro do cartão — substitui o flexslider */
.slider {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #dfe6e9;
}
.slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 1.05s ease, transform 5.5s ease-out;
}
.slider img.activa { opacity: 1; transform: scale(1); }
.cartao:hover .slider img.activa { transform: scale(1.055); }

/* ------------------------------ sobre / mar ------------------------------ */

#sobre {
  padding: 80px 0;
  background-image: url('../img/ui/mar.webp');
  background-color: var(--teal);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right center;
  position: relative;
}
#sobre h2 { font-size: 1.1rem; color: #e4e4e4; font-weight: 400; margin-bottom: 0; }
#sobre .titulo { font-size: 2rem; color: #f4f4f4; margin-bottom: 30px; }
#sobre p { margin-bottom: 20px; color: #fff; }

.botao-ouro {
  display: inline-block;
  background: var(--ouro);
  color: var(--escuro);
  border: none;
  border-radius: var(--raio);
  padding: 10px 20px;
  font-weight: 500;
  box-shadow: 0 5px 14px rgba(3, 30, 31, .12);
  transition: transform .3s ease, filter .3s ease, box-shadow .3s ease;
}
.botao-ouro:hover {
  color: var(--escuro);
  filter: brightness(1.08);
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(3, 30, 31, .18);
}

/* -------------------------------- galeria -------------------------------- */

#galeria { padding: 80px 0 40px; }
#galeria h2 { font-size: 1.1rem; color: var(--cinza-cl); font-weight: 400; margin-bottom: 0; }
#galeria .titulo { font-size: 2rem; color: var(--escuro); margin-bottom: 30px; }

.tira {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 0 20px;
  scrollbar-width: thin;
}
.tira > * {
  flex: 0 0 auto;
  width: 300px;
  scroll-snap-align: start;
}
.tira > a {
  overflow: hidden;
  border-radius: 8px;
  cursor: zoom-in;
}
.tira img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .45s ease;
}
.tira a:hover img { transform: scale(1.07); filter: saturate(1.08); }
.tira-nav { display: flex; gap: 10px; justify-content: flex-end; margin-bottom: 10px; }
.tira-nav button {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 50%;
  color: var(--cinza);
  transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.tira-nav button:hover {
  background: var(--ouro);
  border-color: var(--ouro);
  color: var(--escuro);
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(3, 30, 31, .16);
}

/* ----------------------------- onda + CTA final -------------------------- */

.com-onda { position: relative; }
.com-onda::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #fff url('../img/ui/onda.webp') no-repeat center bottom;
  background-size: 100%;
  box-shadow: inset 0 -3rem 1rem -2rem var(--teal);
  z-index: -1;
}

#mar-lateral { padding: 80px 0 300px; text-align: center; }
#mar-lateral .titulo { font-size: 2rem; color: var(--escuro); margin-bottom: 30px; }
#mar-lateral p { margin-bottom: 30px; }

/* -------------------------------- rodapé --------------------------------- */

footer {
  background: var(--teal);
  color: #fff;
  padding: 40px 0 20px;
  position: relative;
  z-index: 1;
}
footer h2.h5 { margin-bottom: 12px; }
footer a { display: inline-block; margin-bottom: 5px; color: #fff; }
footer a:hover { color: var(--ouro); }
footer i { margin-right: 6px; color: var(--ouro); position: relative; top: 1px; }
footer .copyright { text-align: center; margin-bottom: 0; font-size: 13px; }
footer .copyright .ponto { color: #e12626; }

/* ------------------------- aviso de cookies ------------------------------ */

.aviso-cookies {
  position: fixed;
  right: 20px;
  bottom: 20px;
  left: 20px;
  z-index: 1070;
  width: min(760px, calc(100% - 40px));
  margin: 0 auto;
  padding: 20px 24px;
  border-top: 4px solid var(--ouro);
  border-radius: 8px;
  background: #fff;
  color: var(--texto);
  box-shadow: 0 14px 38px rgba(1, 20, 22, .28);
}
.aviso-cookies__conteudo { display: flex; align-items: center; gap: 24px; }
.aviso-cookies h2 { margin: 0 0 6px; color: var(--teal-fundo); font-size: 1.15rem; }
.aviso-cookies p { margin: 0; font-size: .92rem; line-height: 1.5; }
.aviso-cookies p a { color: var(--teal); font-weight: 500; text-decoration: underline; }
.aviso-cookies p a:hover { color: var(--teal-fundo); }
.aviso-cookies__acoes { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.aviso-cookies__aceitar,
.aviso-cookies__recusar {
  border-radius: var(--raio);
  padding: 10px 16px;
  font-weight: 500;
  transition: filter .25s ease, transform .25s ease;
}
.aviso-cookies__aceitar {
  border: 0;
  background: var(--ouro);
  color: var(--escuro);
}
.aviso-cookies__recusar {
  border: 1px solid #c7d1d1;
  background: #fff;
  color: var(--teal-fundo);
}
.aviso-cookies__aceitar:hover,
.aviso-cookies__recusar:hover { filter: brightness(1.04); transform: translateY(-2px); }

.botao-whatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: #f8f8f8 url('../img/ui/whatsapp.webp') no-repeat center / 80%;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .7);
  animation: pulsar 2.25s infinite cubic-bezier(.66, 0, 0, 1);
  z-index: 1020;
}
.botao-whatsapp:hover { animation: none; }
@keyframes pulsar { to { box-shadow: 0 0 0 45px rgba(37, 211, 102, 0); } }

/* ----------------------------- hero interior ----------------------------- */

#hero-interior {
  position: relative;
  text-align: center;
  padding: calc(var(--header-h) + 6rem) 0 6rem;
  margin-top: calc(var(--header-h) * -1);
  background: var(--teal-fundo);
}
#hero-interior .fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  animation: aproximar-imagem 13s ease-out both;
}
@keyframes aproximar-imagem {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}
#hero-interior::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  opacity: .35;
  z-index: 1;
}
#hero-interior .container { position: relative; z-index: 2; }
#hero-interior h1 { font-size: 2rem; color: #fff; margin-bottom: 5px; }
#hero-interior .traco { display: inline-block; width: 48px; height: 4px; background: var(--ouro); }
#hero-interior p { font-size: 1.1rem; color: #fff; margin: 5px auto 0; max-width: 46rem; }

/* ------------------------------ experiência ------------------------------ */

#experiencia { padding: 80px 0 300px; position: relative; }
#experiencia h1 { font-size: 2rem; color: var(--escuro); margin-bottom: 10px; }
#experiencia .duracao { font-size: 1.1rem; color: var(--cinza-cl); font-weight: 400; margin-bottom: 24px; }
#experiencia .duracao i { color: var(--ouro); position: relative; top: 2px; }

#experiencia p { margin-bottom: 18px; }
#experiencia .incluido {
  background: #f7f9f9;
  border-left: 4px solid var(--ouro);
  border-radius: 0 var(--raio) var(--raio) 0;
  padding: 16px 20px;
  margin: 28px 0;
}
#experiencia .incluido h2 { font-size: 1rem; color: var(--escuro); margin-bottom: 6px; }
#experiencia .incluido p { margin-bottom: 0; color: var(--cinza); }
#experiencia .galeria-exp a {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  cursor: zoom-in;
}
#experiencia .galeria-exp img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 24px;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), filter .4s ease;
}
#experiencia .galeria-exp a:hover img { transform: scale(1.07); filter: saturate(1.1); }
.caixa-reservas { position: sticky; top: calc(var(--header-h) + 20px); }
.caixa-reservas h2 {
  text-align: center;
  font-size: 1.2rem;
  color: var(--escuro);
  background: var(--ouro);
  border-radius: var(--raio) var(--raio) 0 0;
  padding: 15px 0;
  margin-bottom: 0;
}
.iframe-reservas {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 620px;
  height: 100%;
  border: none;
  background: #fff;
}
.modal-body .iframe-reservas { min-height: 800px; max-height: 100vh; }
.modal-header { border-bottom: none; }

/* ----------------------------- lightbox galeria -------------------------- */

body.modal-galeria-aberta { overflow: hidden; }
.modal-galeria[hidden] { display: none; }
.modal-galeria {
  position: fixed;
  inset: 0;
  z-index: 1065;
  display: grid;
  place-items: center;
  padding: 30px;
  background: rgba(1, 20, 22, .88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .24s ease;
}
.modal-galeria.aberta { opacity: 1; }
.modal-galeria__dialogo {
  position: relative;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 62px;
  align-items: center;
  width: min(100%, 1240px);
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: #071b1d;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .4);
  transform: translateY(16px) scale(.975);
  transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.modal-galeria.aberta .modal-galeria__dialogo { transform: translateY(0) scale(1); }
.modal-galeria__figura {
  position: relative;
  grid-column: 2;
  margin: 0;
  overflow: hidden;
  border-radius: 7px;
  background: #020b0c;
}
.modal-galeria__imagem {
  display: block;
  width: 100%;
  height: min(76vh, 820px);
  object-fit: contain;
  transition: opacity .2s ease, transform .25s ease;
}
.modal-galeria__imagem.a-mudar { opacity: 0; transform: scale(1.015); }
.modal-galeria__contador {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 5px 10px;
  border-radius: 99px;
  background: rgba(0, 0, 0, .58);
  color: #fff;
  font-size: .85rem;
}
.modal-galeria__fechar,
.modal-galeria__navegar {
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
}
.modal-galeria__fechar:hover,
.modal-galeria__navegar:hover:not(:disabled) {
  border-color: var(--ouro);
  background: var(--ouro);
  color: var(--escuro);
  transform: scale(1.08);
}
.modal-galeria__fechar {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 1;
  width: 42px;
  height: 42px;
}
.modal-galeria__fechar .ico { width: 1.1rem; height: 1.1rem; }
.modal-galeria__navegar {
  width: 46px;
  height: 46px;
  justify-self: center;
}
.modal-galeria__navegar:disabled { cursor: not-allowed; opacity: .35; }
.modal-galeria__anterior { grid-column: 1; }
.modal-galeria__seguinte { grid-column: 3; }

/* -------------------------------- localização ---------------------------- */

#localizacao { padding: 80px 0; position: relative; }
#localizacao h1, #localizacao h2.titulo { font-size: 2rem; color: var(--escuro); margin-bottom: 20px; }
#localizacao p { margin-bottom: 30px; }
#localizacao .lista-icones { list-style: none; padding: 0; }
#localizacao .lista-icones i { color: var(--ouro); font-size: 1.4em; margin-right: 8px; position: relative; top: 3px; }
#localizacao .lista-icones p { color: var(--cinza); margin-bottom: 10px; }
#localizacao.final { padding: 80px 0 300px; }
.arredondada { border-radius: 8px; }

#imagem-meio {
  background: url('../img/ui/marina-aerea.webp') center / cover no-repeat;
  padding: 320px 0;
  position: relative;
}
#imagem-meio::before,
#imagem-meio::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 10%;
}
#imagem-meio::before { bottom: 0; background: linear-gradient(0deg, #fff 0%, rgba(0, 0, 0, 0) 100%); }
#imagem-meio::after  { top: 0;    background: linear-gradient(180deg, #fff 0%, rgba(0, 0, 0, 0) 100%); }

/* -------------------------------- contactos ------------------------------ */

#contactos { padding: 80px 0 300px; position: relative; }
#contactos h1 { font-size: 2rem; color: var(--escuro); margin-bottom: 20px; }
#contactos p { margin-bottom: 20px; }
#contactos a { color: var(--ouro); }
#contactos label { font-weight: 500; margin-bottom: .35rem; }
#contactos label .obrig { color: var(--ouro); }
#contactos .form-control {
  background: #fff;
  color: var(--cinza-cl);
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: var(--raio);
}
#contactos .form-control:focus { box-shadow: none; border-color: var(--ouro); }
#contactos textarea.form-control { height: 150px; resize: vertical; }
#contactos .form-control.erro { border-color: #c0392b; }
#contactos .msg-erro { color: #c0392b; font-size: .85rem; display: block; margin-top: 4px; }
.alerta {
  border-radius: var(--raio);
  padding: 14px 18px;
  margin-bottom: 24px;
  border: 1px solid transparent;
}
.alerta-ok  { background: #eefbf8; border-color: #b7e4d8; color: #1c6b58; }
.alerta-mau { background: #fdeceb; border-color: #f3c4c0; color: #96291d; }
.campo-armadilha { position: absolute; left: -9999px; opacity: 0; height: 0; }

/* --------------------------- páginas de texto ---------------------------- */

#pagina-texto { padding: 80px 0; }
#pagina-texto h2 { font-size: 1.5rem; color: var(--escuro); margin-bottom: 10px; }
#pagina-texto p { margin-bottom: 15px; }

/* ---------------------------------- 404 ---------------------------------- */

#erro-404 { padding: 120px 0 300px; text-align: center; }
#erro-404 h1 { font-size: 2rem; color: var(--escuro); margin-bottom: 16px; }

/* -------------------------------- responsivo ----------------------------- */

@media (max-width: 991.98px) {
  :root { --header-h: 76px; }

  .navbar-brand img { width: 120px; }
  .navbar-collapse {
    background: rgba(15, 15, 30, .92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    margin: 0 -12px;
    padding: 10px 20px 20px;
    text-align: center;
  }
  .navbar-expand-lg .navbar-nav .nav-link { margin: 0; padding: 10px 0; }
  .navbar-expand-lg .navbar-nav .nav-link::after { left: 50%; transform: translateX(-50%); }
  .navbar-nav .nav-link.botao-reservar { margin: 10px auto; width: max-content; }
  .dropdown-menu { background: rgba(255, 255, 255, .06); text-align: center; }
  .idiomas { justify-content: center; }

  #hero { height: 60svh; }
  .som-video { width: 54px; height: 54px; font-size: 1.2rem; bottom: 20px; left: 20px; }
  .rato { height: 34px; }

  #charters { padding: 60px 0; }
  #charters .titulo,
  #sobre .titulo,
  #galeria .titulo,
  #mar-lateral .titulo,
  #localizacao h1,
  #experiencia h1,
  #contactos h1 { font-size: 1.6rem; }

  #sobre { background-position: left center; }
  #sobre::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--teal);
    opacity: .25;
  }
  #sobre .container { position: relative; z-index: 1; }

  .tira > *, .tira img { width: 220px; }
  .tira img { height: 220px; }

  #mar-lateral,
  #experiencia,
  #localizacao.final,
  #contactos,
  #erro-404 { padding-bottom: 90px; }
  .com-onda::before { background-size: 180%; }

  #imagem-meio { padding: 180px 0; }
  .caixa-reservas { position: static; margin-top: 40px; }
  footer { text-align: center; }

  .aviso-cookies__conteudo { align-items: flex-start; }

  .modal-galeria { padding: 18px; }
  .modal-galeria__dialogo {
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    padding: 10px;
  }
  .modal-galeria__imagem { height: min(72svh, 680px); }
  .modal-galeria__navegar { width: 38px; height: 38px; }
  .modal-galeria__fechar { top: -10px; right: -10px; width: 38px; height: 38px; }
}

@media (max-width: 575.98px) {
  .aviso-cookies {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    padding: 18px;
  }
  .aviso-cookies__conteudo { flex-direction: column; gap: 14px; }
  .aviso-cookies__acoes { width: 100%; flex-direction: column-reverse; }
  .aviso-cookies__aceitar,
  .aviso-cookies__recusar { width: 100%; }

  .modal-galeria { padding: 12px; }
  .modal-galeria__dialogo { display: block; padding: 6px; }
  .modal-galeria__navegar {
    position: absolute;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
  }
  .modal-galeria__anterior { left: 12px; }
  .modal-galeria__seguinte { right: 12px; }
  .modal-galeria__navegar:hover:not(:disabled) { transform: translateY(-50%) scale(1.08); }
  .modal-galeria__imagem { height: min(70svh, 560px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  #hero video { display: none; }
  .slider img { transition: none; }
}