:root {
  --brand-yellow: #ffca20;
  --brand-black: #000000;
  --brand-charcoal: #222222;
  --brand-deep: #252525;
  --text-main: #555555;
  --text-light: #ffffff;
  --text-muted: #9d9d9d;
  --border-light: #e2e2e2;
  --bg-light: #f8f8f8;
  --bg-page: #f6f6f6;
  --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.16);
  --radius-card: 14px;
  --container-max: 1440px;
  --font-title: "Maven Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--text-main);
  background: var(--bg-page);
}

a {
  color: inherit;
  text-decoration: none;
}

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

.dura-container,
.theme-container,
.container-1440 {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.site-page {
  background: #fff;
  min-height: 100vh;
}

.section-space {
  padding: 56px 0;
}

.theme-breadcrumb-wrap {
  background: #ffffff;
}

/* Reduz o espaço entre o breadcrumb e o conteúdo no desktop.
   Usa ~ porque o element do breadcrumb emite um <script> JSON-LD
   entre o .theme-breadcrumb-wrap e o <main>. */
@media (min-width: 768px) {
  .theme-breadcrumb-wrap ~ .section-space,
  .theme-breadcrumb-wrap ~ main > .section-space {
    padding-top: 20px;
  }

  .theme-breadcrumb-wrap ~ .destination-level-page .destination-dark-block,
  .theme-breadcrumb-wrap ~ main > .destination-dark-block {
    padding-top: 20px;
  }
}

.theme-breadcrumb {
  --bs-breadcrumb-divider: "|";
  margin: 0;
  padding: 14px 0;
  background: transparent;
  justify-content: flex-start;
}

.theme-breadcrumb .breadcrumb-item,
.theme-breadcrumb .breadcrumb-item a {
  color: #666666;
  font-size: 13px;
  font-family: var(--font-body);
  font-weight: 400;
}

.theme-breadcrumb .breadcrumb-item a:hover {
  color: #000000;
}

.theme-breadcrumb .breadcrumb-item.active {
  color: #000000;
  font-weight: 500;
}

.theme-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: #9f9f9f;
}

.section-heading {
  margin-bottom: 30px;
}

.section-heading h2 {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 1.2;
  color: var(--brand-black);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 1px;
}

.section-heading p {
  display: inline-block;
  margin: 12px 0 0;
  color: #555555;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 300;
  line-height: 1.25;
  border-bottom: 2px solid #ffca20;
  padding-bottom: 20px;
}

.home-section-heading {
  text-align: center;
}

.home-section-heading p {
  margin-left: auto;
  margin-right: auto;
  max-width: 760px;
}

.main-heading {
  font-family: var(--font-title);
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
}

.main-subtitle {
  font-family: var(--font-body);
  color: #555555;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.25;
  border-bottom: 2px solid #ffca20;
  padding-bottom: 20px;
}

.site-header {
  /* wrapper sem posicionamento — header-top e header-main-shell são fixos independentes */
  position: relative;
  z-index: 1100;
}

.header-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1101;
  background: #161616;
  color: var(--text-light);
  border-bottom: 1px solid #222;
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.header-top-inner {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.header-top-list,
.header-contact-list {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-top-list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-title);
  font-size: 12px;
  line-height: 1;
  color: #fff;
}

.header-top-list li span {
  white-space: nowrap;
}

.header-top-list li i {
  font-size: 12px;
}

.header-contact-list a {
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  gap: 6px;
  padding: 3px 8px 3px 6px;
  white-space: nowrap;
}

.header-contact-list a i {
  font-size: 15px;
  line-height: 1;
}

.header-contact-list a:hover {
  background: #fff;
  color: #000;
}

.header-whatsapp-number {
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.header-main-shell {
  position: fixed;
  top: var(--header-top-h, 36px); /* definido via JS com altura real do header-top */
  left: 0;
  right: 0;
  z-index: 1100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: top 0.28s ease, background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.header-main {
  min-height: 96px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  position: relative;
}

.header-brand {
  flex: 0 0 176px;
  display: flex;
  align-items: center;
  min-height: 96px;
}

.header-brand img {
  width: 150px;
}

.header-nav {
  flex: 1 1 auto;
}

.header-nav .navbar {
  padding: 0;
  position: static;
}

.header-nav .navbar-toggler-icon {
  filter: invert(1);
}

.header-nav .navbar-nav {
  margin-left: auto;
  align-items: flex-end;
  gap: 8px;
  padding-bottom: 10px;
}

.header-nav .nav-link {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-light);
  height: auto;
  line-height: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  padding: 10px 30px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.header-nav .nav-link:hover,
.header-nav .nav-item.show > .nav-link,
.header-nav .nav-link.active {
  color: var(--brand-yellow);
}

.header-nav .menu-accordion-item.desktop-open > .nav-link {
  color: var(--brand-yellow);
}

.header-search-nav-item .nav-link {
  min-width: 46px;
  justify-content: center;
}

.header-search-toggle {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #fff;
  padding: 4px 6px;
  line-height: 1;
}

.header-search-toggle .bi {
  font-size: 18px;
}


.header-search-overlay {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.96);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: none;
  align-items: center;
  z-index: 25;
  padding: 14px 20px 18px;
  overflow: visible;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

.header-search-form {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
}

.header-search-content {
  width: min(100%, 940px);
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.header-search-input {
  min-height: 46px;
  border: 1px solid #5c5e62;
  border-radius: 8px;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: 15px;
  background: #fff;
}

.header-search-submit.btn-theme {
  min-height: 46px;
  padding: 0 16px;
  background: var(--brand-yellow);
  border-color: var(--brand-yellow);
  color: #000;
}

.header-search-submit.btn-theme:hover,
.header-search-submit.btn-theme:focus {
  background: #000;
  border-color: #000;
  color: var(--brand-yellow);
}

.header-search-close {
  min-height: 46px;
  min-width: 46px;
  border: 1px solid #5c5e62;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.header-search-hint {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.74);
}

.header-search-suggestions {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
}

.header-search-suggestions-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.header-search-suggestion,
.header-search-all-results {
  display: flex;
  gap: 10px;
  text-decoration: none;
  border-radius: 10px;
  padding: 10px 12px;
  transition: background 0.18s ease, transform 0.18s ease;
}

.header-search-suggestion:hover,
.header-search-suggestion.is-active,
.header-search-all-results:hover {
  background: rgba(201, 156, 65, 0.12);
  transform: translateX(3px);
}

.header-search-suggestion-type {
  flex: 0 0 auto;
  min-width: 86px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-yellow);
}

.header-search-suggestion-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text-dark);
}

.header-search-suggestion-body strong {
  color: var(--text-dark);
}

.header-search-suggestion-body small,
.header-search-suggestion-body em {
  color: var(--text-muted);
  font-style: normal;
}

.header-search-empty {
  color: var(--text-dark);
  padding: 8px 10px;
}

.header-search-all-results {
  margin-top: 4px;
  justify-content: center;
  font-weight: 700;
  color: var(--brand-green);
}

.header-main.search-active .header-search-overlay {
  display: flex;
}


.header-main .header-nav .menu-destinos {
  position: static;
}

.header-main .header-nav .menu-destinos .dropdown-menu {
  position: absolute;
  top: 100%;
  border: 0;
  border-top: 1px solid var(--brand-yellow);
  border-radius: 0;
  background: #000;
  padding: 0;
  margin-top: 0;
  width: auto;
  min-width: 0;
  left: 0;
  right: 0;
}

.header-main .header-nav .menu-accordion-item.desktop-open > .dropdown-menu {
  display: block;
}

.header-main .header-nav .menu-institucional {
  position: static;
}

.menu-accordion-toggle {
  display: none;
}

.header-main .header-nav .menu-institucional .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 0;
  border-top: 1px solid var(--brand-yellow);
  border-radius: 0;
  background: #000;
  padding: 22px 24px;
  margin-top: 0;
}

.institutional-dropdown-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 22px;
}

.institutional-dropdown-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-family: var(--font-title);
  font-size: 16px;
  line-height: 1.35;
  color: #fff;
  transition: color 0.2s ease;
}

.institutional-dropdown-list a span {
  display: inline-block;
}

.institutional-dropdown-list a i {
  font-size: 13px;
  flex: 0 0 auto;
}

.institutional-dropdown-list a:hover,
.institutional-dropdown-list a.active {
  color: var(--brand-yellow);
}

.mega-grid {
  display: grid;
  grid-template-columns: 190px 1fr;
  min-height: 340px;
}

.mobile-dest-accordion {
  display: none;
}

.mega-col-left {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  padding: 24px;
}

.mega-col-right {
  padding: 24px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 20px;
}

.mega-regions,
.mega-states,
.mega-destinations {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mega-regions li {
  font-family: var(--font-title);
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 4px;
  cursor: pointer;
}

.mega-regions li.active,
.mega-regions li:hover,
.mega-states li.active,
.mega-states li:hover {
  color: var(--brand-yellow);
}

.mega-states {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.mega-states li {
  color: #fff;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 3px 4px;
}

.fake-flag {
  width: 36px;
  height: 23px;
  border-radius: 2px;
  display: inline-block;
  background: linear-gradient(120deg, #007a3d 0%, #fedf00 50%, #002776 100%);
}

.real-flag {
  object-fit: cover;
}

.mega-destination-title {
  margin: 0 0 10px;
  color: var(--brand-yellow);
  text-transform: uppercase;
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 400;
}

.mega-destination-title a {
  color: inherit;
}

.mega-destinations {
  --mega-destination-cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--mega-destination-cols), minmax(0, 1fr));
  gap: 6px 14px;
  align-content: start;
}

.mega-destinations li {
  margin: 0;
}

.mega-destinations a {
  font-family: var(--font-title);
  color: #fff;
  font-size: 13px;
  font-weight: 400;
}

.mega-destinations a:hover {
  color: var(--brand-yellow);
}

/* Novo mega menu (teste): estados (nível 3) em colunas com destinos (nível 4),
   já expandidos e sem bandeiras. */
.mega-states-columns {
  --mega-state-cols: 8;
}

/* Cada linha é um grid próprio: colunas alinhadas + divisória contínua */
.mega-state-row {
  display: grid;
  grid-template-columns: repeat(var(--mega-state-cols), minmax(0, 1fr));
  gap: 22px 18px;
  align-content: start;
}

.mega-state-row + .mega-state-row {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.mega-state-col {
  min-width: 0;
}

.mega-state-title {
  margin: 0 0 10px;
  color: var(--brand-yellow);
  text-transform: uppercase;
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}

.mega-state-title a {
  color: inherit;
}

.mega-state-title a:hover {
  text-decoration: underline;
}

.mega-state-destinations {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.mega-state-destinations a {
  font-family: var(--font-title);
  color: #fff;
  font-size: 13px;
  font-weight: 400;
}

.mega-state-destinations a:hover {
  color: var(--brand-yellow);
}

/* No scroll: header-top sai pelo topo, header-main-shell sobe para top:0 */
.site-header.header-scrolled .header-top {
  transform: translateY(-100%);
  opacity: 0;
}

.site-header.header-scrolled .header-main-shell {
  top: 0;
  background: #000;
  border-bottom: 1px solid #1f1f1f;
  box-shadow: var(--shadow-soft);
}


/* Header-main-shell sólido em páginas sem banner */
body:not(.header-over-banner) .site-header .header-main-shell {
  background: #000;
  border-bottom-color: #1f1f1f;
}

.hero {
  position: relative;
  min-height: 560px;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: flex-end;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.68) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
  padding: 0 0 52px;
}

.hero-content h1 {
  margin: 0;
  font-family: var(--font-title);
  text-transform: uppercase;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 1px;
}

.hero-content h2 {
  margin: 12px 0 0;
  font-family: var(--font-title);
  font-size: clamp(14px, 1.8vw, 20px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.25;
}

/* A caixa segue a proporção do formato banner_desktop, que agora é 1920x560 — a
   mesma altura que este min-height sempre teve. Enquanto o formato dizia 680 os
   dois divergiam e o `cover` reconciliava cortando 60px em cima e 60px embaixo de
   TODO banner; em Depoimentos, onde a pessoa tem ~12px de folga acima da cabeça,
   os 60px de cima decapitavam a foto.

   Com formato e caixa na mesma proporção não sobra nada para cortar: em 1920 a
   imagem entra exata. O min-height segue como piso — abaixo de 1920px a proporção
   pediria menos de 560 e o corte volta a ser lateral, como sempre foi.

   As alturas responsivas abaixo repetem as de .hero porque esta regra tem duas
   classes e venceria as de lá por especificidade — sem elas o hero ficava travado
   na altura de desktop em qualquer tela. */
.hero.simple-hero {
  /* OBRIGATÓRIO junto com aspect-ratio + max-height. Com a largura em `auto`, o
     navegador satisfaz a proporção pelo lado que puder: quando o max-height
     trava a altura em 620px, ele ENCOLHE A LARGURA para 620×(1920/560) = 2126px
     e sobra faixa branca à direita em telas maiores. Com a largura definida, a
     proporção só pode agir na altura, que é o que se quer. */
  width: 100%;
  min-height: 560px;
  aspect-ratio: 1920 / 560;
  max-height: 620px;
  /* Só age quando o max-height entra (acima de ~2126px de largura): aí a caixa
     fica mais baixa que a imagem e o corte vai todo para baixo, onde já estão o
     gradiente escuro e o título. Nas demais larguras não há transbordo vertical,
     então isto é inócuo. */
  background-position: center top;
}

@media (max-width: 991px) {
  .hero.simple-hero {
    min-height: 460px;
  }
}

@media (max-width: 768px) {
  .hero.simple-hero {
    min-height: 380px;
  }

  /* Só quem serve a variação banner_mobile (768x500) segue a proporção dela — aí a
     caixa mostra o recorte inteiro, aprovado no Banco de Imagens. Quem não tem essa
     variação continua exibindo a imagem de desktop e fica na altura fixa acima; dar
     a proporção do mobile a um banner 1920x680 cortaria 45% da largura.
     O breakpoint é 768px, igual ao da troca de imagem no page_hero. */
  .hero.simple-hero.hero-responsive {
    min-height: max(300px, calc(100vw * 500 / 768));
  }
}

/* Desktop/tablet: galeria e colapsáveis (>=768px) */
@media (min-width: 768px) {
  .dest-gallery-desktop { display: flex; }
  .dest-gallery-mobile  { display: none; }

  .dest-collapsible { display: block !important; }

  /* Títulos das seções (Melhor época, Pontos turísticos, Mapa) como
     cabeçalhos estáticos e estilizados — não colapsam no desktop/tablet */
  .dest-collapse-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    background: none;
    border: 0;
    border-bottom: 2px solid var(--brand-yellow);
    padding: 10px 0;
    margin-bottom: 4px;
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--brand-black);
    text-align: left;
    pointer-events: none;
    cursor: default;
  }

  .dest-collapse-toggle .dest-chevron {
    display: none;
  }

  .dest-collapse-body {
    padding-top: 14px;
  }

  /* Remove a linha separadora extra entre as seções secundárias
     (cada uma já tem o próprio título com sublinhado) */
  .destination-detail-secondary .info-box + .info-box {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
  }

  .destination-detail-filters.info-box {
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: #fff;
    padding: 16px;
    border-top: 1px solid var(--border-light);
    padding-top: 16px;
  }
}

/* padding-top do .site-page é definido via JS (initHeaderScroll) */
@media (min-width: 992px) {
  .header-whatsapp-link i {
    font-size: 16.5px;
  }

  body.header-over-banner .site-page {
    padding-top: 0 !important;
  }
}

.rev-slider-shell {
  position: relative;
  z-index: 1;
}

.rev-slider-shell .rev_slider[data-fallback="1"] > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative !important;
  height: auto !important;
  overflow: hidden !important;
}

.rev-slider-shell .rev_slider.rev-fallback-active,
.rev-slider-shell .rev_slider_wrapper.rev-fallback-active {
  height: clamp(200px, calc(100vw * 500 / 1920), 500px) !important;
}

.rev-slider-shell .rev_slider[data-fallback="1"] > ul > li {
  display: none !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
  top: auto !important;
  left: auto !important;
}

.rev-slider-shell .rev_slider[data-fallback="1"] > ul > li.is-fallback-active {
  display: block !important;
}

.rev-slider-shell .rev_slider[data-fallback="1"] .rev-slidebg {
  width: 100%;
  height: auto;
}



.rev-slider-shell .rev_slider_wrapper {
  position: relative;
  background: #000;
  overflow: hidden;
}

/* Reserva o espaço do banner (proporção 1920x500) para evitar bloco
   vazio e layout shift até o Revolution Slider iniciar */
#rev_slider_home_wrapper {
  min-height: clamp(200px, calc(100vw * 500 / 1920), 500px);
  background-color: #000;
}

.rev-slider-shell .rev_slider .tparrows {
  width: 56px !important;
  height: 56px !important;
  z-index: 35 !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: rgba(12, 12, 12, 0.68) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.26) !important;
  transition: background 0.25s ease, transform 0.25s ease !important;
  opacity: 1 !important;
}

.rev-slider-shell .rev_slider .tparrows:hover {
  background: rgba(0, 0, 0, 0.9) !important;
  transform: translateY(-1px);
}

.rev-slider-shell .rev_slider .tparrows:before {
  font-family: var(--font-title) !important;
  font-size: 24px !important;
  line-height: 56px !important;
  color: #fff !important;
}

.rev-slider-shell .rev_slider .tp-leftarrow.tparrows:before {
  content: "\2039" !important;
}

.rev-slider-shell .rev_slider .tp-rightarrow.tparrows:before {
  content: "\203A" !important;
}

.rev-slider-shell .rev_slider .tparrows:hover:before {
  color: #fff !important;
}

.rev-slider-shell .rev-manual-arrows {
  position: absolute;
  inset: 0;
  z-index: 36;
  pointer-events: none;
}

.rev-slider-shell .rev-manual-arrows.is-hidden {
  display: none;
}

.rev-slider-shell .rev-manual-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 0;
  border: 0;
  background: rgba(12, 12, 12, 0.68);
  color: #fff;
  font-family: var(--font-title);
  font-size: 24px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.26);
  pointer-events: auto;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.rev-slider-shell .rev-manual-arrow:hover {
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  transform: translateY(calc(-50% - 1px));
}

.rev-slider-shell .rev-manual-arrow-prev {
  left: 20px;
}

.rev-slider-shell .rev-manual-arrow-next {
  right: 20px;
}

.rev-slider-shell .rev_slider .tp-bullets .tp-bullet {
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
}

.rev-slider-shell .rev_slider .tp-bullets .tp-bullet.selected,
.rev-slider-shell .rev_slider .tp-bullets .tp-bullet:hover {
  background: var(--brand-yellow) !important;
  border-color: #000 !important;
}

.content-text {
  color: #444;
  line-height: 1.7;
}

/* Normaliza fontes do conteúdo legado (font-family inline / <font face>) */
.content-text,
.content-text p,
.content-text span,
.content-text font,
.content-text li,
.content-text a,
.content-text strong,
.content-text em,
.content-text div {
  font-family: var(--font-body) !important;
}

.content-text h2,
.content-text h3,
.content-text h4 {
  font-family: var(--font-title);
  color: #111;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

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

.content-text ul,
.content-text ol {
  padding-left: 20px;
}

.destination-summary {
  display: block;
}

.destination-summary-collapsed {
  display: inline;
}

/* Dois recortes do mesmo resumo, um por largura. O corte é feito no servidor e
   não pode variar por viewport numa renderização só, então os dois vêm no HTML e
   o CSS mostra o que cabe. No celular fica o resumo curto que o time aprovou; no
   desktop ele dobra, porque lá 200 caracteres ocupavam pouco mais de uma linha e
   o "Ler mais" aparecia quase colado no começo do texto.

   `display:none` esconde de leitor de tela também, então nada é lido duas vezes.

   O nome é genérico porque a lista de promoções faz o mesmo: dois recortes no
   HTML, um por largura. */
.preview-responsive {
  display: inline;
}

.preview-responsive.is-desktop {
  display: none;
}

@media (min-width: 768px) {
  .preview-responsive.is-mobile {
    display: none;
  }

  .preview-responsive.is-desktop {
    display: inline;
  }
}

.destination-summary-full[hidden] {
  display: none !important;
}

.destination-summary-toggle {
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand-black);
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--brand-yellow);
  line-height: 1.2;
}

.destination-summary-toggle:hover,
.destination-summary-toggle:focus {
  color: #000;
  border-bottom-color: #000;
}

.destination-summary-toggle-inline {
  display: inline;
  margin-left: 6px;
  vertical-align: baseline;
}

.destination-summary-toggle-block {
  display: inline-block;
  margin-top: 10px;
}

/* Texto de introdução do pacote. No mobile ele é longo o bastante para empurrar
   tudo o que interessa para fora da tela, então a caixa é recortada por ALTURA —
   não por número de caracteres — para o trecho visível manter os parágrafos e as
   ênfases do texto. No desktop nada disso se aplica e o botão nem aparece. */
.package-text-toggle {
  display: none;
}

@media (max-width: 767px) {
  .package-text-collapse[data-collapsed="true"] [data-text-collapse-body] {
    max-height: 220px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 68%, transparent 100%);
    mask-image: linear-gradient(#000 68%, transparent 100%);
  }

  .package-text-toggle {
    display: inline-block;
  }

  .package-text-toggle[hidden] {
    display: none;
  }
}

.institutional-page-difficulty .content-text {
  color: #2d2d2d;
}

.institutional-page-difficulty .content-text > :first-child {
  margin-top: 0;
}

.institutional-page-difficulty .difficulty-guide {
  display: grid;
  gap: 28px;
}

.institutional-page-difficulty .difficulty-guide-intro {
  display: grid;
  gap: 12px;
  padding: 22px 24px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(244, 178, 45, 0.16), rgba(244, 178, 45, 0.04)),
    #fffaf0;
  border: 1px solid rgba(17, 17, 17, 0.08);
}

.institutional-page-difficulty .difficulty-guide-intro p {
  margin: 0;
}

.institutional-page-difficulty .difficulty-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.institutional-page-difficulty .difficulty-card {
  display: grid;
  gap: 14px;
  min-height: 100%;
  padding: 22px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 22px;
  box-shadow: 0 18px 38px rgba(17, 17, 17, 0.06);
}

.institutional-page-difficulty .difficulty-card.is-level-5 {
  grid-column: 1 / -1;
}

.institutional-page-difficulty .difficulty-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.institutional-page-difficulty .difficulty-card-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.06);
  color: #111;
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.institutional-page-difficulty .difficulty-card h3 {
  margin: 0;
  color: #111;
}

.institutional-page-difficulty .difficulty-meter {
  display: flex;
  gap: 8px;
}

.institutional-page-difficulty .difficulty-meter span {
  flex: 1 1 0;
  height: 10px;
  border-radius: 999px;
  background: #e7e2d8;
}

.institutional-page-difficulty .difficulty-meter span.is-active {
  background: linear-gradient(90deg, #f4b22d, #d89316);
}

.institutional-page-difficulty .difficulty-card p,
.institutional-page-difficulty .difficulty-card ul {
  margin: 0;
}

.institutional-page-difficulty .difficulty-card ul {
  padding-left: 18px;
}

.institutional-page-difficulty .difficulty-card li + li {
  margin-top: 6px;
}

.institutional-page-difficulty .difficulty-table-wrap {
  overflow-x: auto;
  border-radius: 22px;
  border: 1px solid rgba(17, 17, 17, 0.08);
}

.institutional-page-difficulty .difficulty-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: #fff;
}

.institutional-page-difficulty .difficulty-table th,
.institutional-page-difficulty .difficulty-table td {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
  text-align: left;
  vertical-align: top;
}

.institutional-page-difficulty .difficulty-table thead th {
  background: #111;
  color: #fff;
  font-family: var(--font-title);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.institutional-page-difficulty .difficulty-table tbody tr:nth-child(even) {
  background: #fbf8f1;
}

.institutional-page-difficulty .difficulty-table tbody th {
  color: #111;
  white-space: nowrap;
}

.search-block {
  margin-top: -46px;
  position: relative;
  z-index: 12;
}

.home-first-section {
  padding-top: 56px;
}

.search-panel {
  background: var(--brand-yellow);
  border: 1px solid var(--brand-black);
  border-radius: var(--radius-card);
  padding: 20px;
}

.search-panel-mobile-head {
  display: none;
}

.search-panel-toggle {
  width: 100%;
  border: 1px solid var(--brand-black);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.35);
  color: #000;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.search-panel-toggle-icon {
  font-size: 18px;
  line-height: 1;
}

.search-panel-toggle-minus {
  display: none;
}

.search-panel-body {
  overflow: visible;
}

.search-panel label {
  font-family: var(--font-title);
  color: var(--brand-black);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
}

.search-panel .form-control,
.search-panel .form-select {
  border: 1px solid var(--brand-black);
  min-height: 44px;
  border-radius: 8px;
}

/* Filtros de pacotes — mesmo visual do search-panel da home */
.filter-panel.destination-detail-filters,
.filter-panel.departure-filters,
.filter-panel.experience-filters {
  background: var(--brand-yellow);
  border: 1px solid var(--brand-black);
  border-radius: var(--radius-card);
  padding: 20px;
}

.filter-panel.destination-detail-filters label,
.filter-panel.departure-filters label,
.filter-panel.experience-filters label {
  font-family: var(--font-title);
  color: var(--brand-black);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
}

.filter-panel.destination-detail-filters .form-control,
.filter-panel.destination-detail-filters .form-select,
.filter-panel.departure-filters .form-control,
.filter-panel.departure-filters .form-select,
.filter-panel.experience-filters .form-control,
.filter-panel.experience-filters .form-select {
  border: 1px solid var(--brand-black);
  min-height: 44px;
  border-radius: 8px;
}

.filter-panel.departure-filters .departure-guaranteed-check .form-check-input {
  border-color: var(--brand-black);
}

/* Os dois campos de data dividem a linha com cinco selects e mais o botão. Entre
   992 e 1199px sobravam 68px para cada um — "10/04/2027" não cabe em 68px e
   saía cortado. O piso garante a data inteira; quem cede largura são os selects,
   que abreviam sem perder sentido ("Todos", "Padrão"). */
.filter-panel.departure-filters input[data-flatpickr] {
  min-width: 8.5em;
}

/* Destination custom dropdown */
.dest-dropdown {
  position: relative;
}

.dest-dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--brand-black);
  border-radius: 8px;
  background: #fff;
  font-size: 1rem;
  color: #212529;
  cursor: pointer;
  text-align: left;
  gap: 8px;
}

.dest-dropdown--disabled .dest-dropdown__trigger {
  background: #e9ecef;
  color: #6c757d;
  cursor: not-allowed;
  border-color: #ced4da;
}

.dest-dropdown__arrow {
  flex-shrink: 0;
  font-size: 12px;
  transition: transform 0.2s ease;
}

.dest-dropdown--open .dest-dropdown__arrow {
  transform: rotate(180deg);
}

.dest-dropdown__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--brand-black);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 9999;
  overflow: hidden;
}

.dest-dropdown__list {
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
}

.dest-dropdown__group-header {
  padding: 8px 14px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
  pointer-events: none;
  user-select: none;
}

.dest-dropdown__item {
  display: block;
  width: 100%;
  padding: 7px 14px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 14px;
  color: #212529;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dest-dropdown__item--child {
  padding-left: 26px;
  color: #444;
}

.dest-dropdown__item--grandchild {
  padding-left: 38px;
  font-size: 13px;
  color: #666;
}

.dest-dropdown__item:hover,
.dest-dropdown__item--selected {
  background: var(--bg-light);
  color: var(--brand-black);
}

.dest-dropdown__item--selected {
  font-weight: 600;
}

.dest-dropdown__divider {
  height: 1px;
  background: var(--border-light);
  margin: 4px 0;
}

.dest-autocomplete {
  position: relative;
}

.dest-autocomplete__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--brand-black);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 9999;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px 0;
  list-style: none;
  margin: 0;
}

.dest-autocomplete__item {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 8px 14px;
  font-size: 14px;
  color: #212529;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dest-autocomplete__item:hover {
  background: var(--bg-light);
  color: var(--brand-black);
}

.dest-autocomplete__breadcrumb {
  font-size: 12px;
  color: #888;
  flex-shrink: 0;
}

.btn-theme,
.btn-theme-dark {
  font-family: var(--font-title);
  min-height: 44px;
  border: 1px solid var(--brand-black);
  border-radius: 8px;
  background: var(--brand-black);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-theme:hover,
.btn-theme:focus,
.btn-theme-dark:hover,
.btn-theme-dark:focus {
  background: #fff;
  color: #000;
  border-color: #000;
}

.btn-theme-outline,
.btn-outline-dark {
  font-family: var(--font-title);
  min-height: 44px;
  border: 1px solid var(--brand-black);
  border-radius: 8px;
  background: #fff;
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-theme-outline:hover,
.btn-theme-outline:focus,
.btn-outline-dark:hover,
.btn-outline-dark:focus {
  background: var(--brand-yellow);
  color: #000;
  border-color: #000;
}

.btn-theme-yellow {
  font-family: var(--font-title);
  min-height: 44px;
  border: 1px solid var(--brand-black);
  border-radius: 8px;
  background: var(--brand-yellow);
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-theme-yellow:hover,
.btn-theme-yellow:focus {
  background: #000;
  color: var(--brand-yellow);
  border-color: #000;
}

.card-theme {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #fff;
  height: 100%;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

.card-theme .card-image {
  height: 240px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Card de equipe — foto com degradê e tag sobreposta (igual experiências da home) */
.team-card-media {
  position: relative;
  flex-shrink: 0;
}

.team-card-media .card-image {
  display: block;
  width: 100%;
}

.team-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.28) 45%,
    transparent 70%
  );
  pointer-events: none;
}

.team-card-tag {
  position: absolute;
  z-index: 1;
  bottom: 10px;
  right: 12px;
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  max-width: calc(100% - 24px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-theme .card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-theme h3 {
  font-family: var(--font-title);
  font-size: 20px;
  color: var(--brand-black);
  margin: 0 0 10px;
  font-weight: 500;
}

.card-theme .meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.card-theme .card-body > p.mb-3 {
  margin-top: auto;
}

.card-theme .card-body > .btn,
.card-theme .card-body > .d-grid {
  margin-top: 0;
}

.home-featured-packages > [class*="col-"] {
  display: flex;
}

.home-featured-packages .card-theme {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.home-featured-packages .card-image {
  width: 100%;
  height: 240px;
  min-height: 240px;
  max-height: 240px;
  object-fit: cover;
  object-position: center;
}

.home-featured-packages .card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.home-featured-packages .card-body .btn.btn-theme.w-100 {
  background: var(--brand-yellow);
  color: #000;
  border-color: #000;
}

.home-featured-packages .card-body .btn.btn-theme.w-100:hover,
.home-featured-packages .card-body .btn.btn-theme.w-100:focus {
  background: #000;
  color: var(--brand-yellow);
  border-color: #000;
}

.badge-theme {
  background: var(--bg-light);
  color: #474d4b;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
}

.highlight-panel {
  border-radius: var(--radius-card);
  overflow: hidden;
}

.highlight-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  padding: 0;
  height: 400px;
}

.highlight-item {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
}

.highlight-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.28) 45%,
    transparent 70%
  );
  border-radius: 10px;
  pointer-events: none;
}

.highlight-item:first-child {
  grid-row: span 2;
}

/* Desktop: mosaico de 5 (1 grande + 4 pequenas) — oculta o 6º item */
.highlight-item:nth-child(6) {
  display: none;
}

.highlight-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.highlight-label {
  position: absolute;
  z-index: 1;
  bottom: 8px;
  right: 10px;
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 16px);
  text-transform: uppercase;
}

.highlight-cta {
  padding: 32px 28px;
  background: linear-gradient(160deg, #252525 0%, #000 100%);
  border-radius: var(--radius-card);
  color: #fff;
  height: 100%;
}

.highlight-cta h3 {
  font-family: var(--font-title);
  margin-top: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: clamp(18px, 2vw, 24px);
}

.highlight-cta .btn-theme {
  background: var(--brand-yellow);
  border-color: var(--brand-yellow);
  color: var(--brand-black);
}

.highlight-cta .btn-theme:hover,
.highlight-cta .btn-theme:focus {
  background: #ffe040;
  border-color: #ffe040;
  color: #000;
}

.search-results-shell {
  background: linear-gradient(135deg, #2e2e2e, #1c1c1c);
  border-radius: 28px;
  padding: clamp(24px, 4vw, 40px);
  color: #fff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}

.search-results-shell .section-heading h1 {
  color: inherit;
  font-family: var(--font-title);
  font-size: clamp(24px, 3vw, 38px);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 1px;
}

.search-results-shell .section-heading p {
  color: rgba(255, 255, 255, 0.72);
  border-bottom-color: var(--brand-yellow);
}

.search-results-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
}

.search-results-input {
  min-height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  padding: 0 18px;
  font-size: 16px;
  font-family: var(--font-body);
}

.search-results-intents {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.search-results-intents span,
.search-result-badges span,
.search-sample-chips a {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
}

.search-results-intents span {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.search-results-form .btn-theme-yellow:hover,
.search-results-form .btn-theme-yellow:focus {
  background: #c4960a;
  border-color: #c4960a;
  color: #000;
}

.search-results-summary {
  margin-bottom: 22px;
}

.search-results-summary h2,
.search-empty-state h2 {
  font-family: var(--font-title);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.search-top-results,
.search-result-section {
  margin-bottom: 38px;
}

.search-result-card {
  height: 100%;
  border-radius: 24px;
  padding: 24px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(7, 26, 36, 0.08);
}

.search-result-card-featured {
  border: 1px solid rgba(201, 156, 65, 0.24);
}

.search-result-card h3 {
  font-size: 22px;
  margin-bottom: 10px;
}

.search-result-card h3 a {
  color: var(--brand-green);
  text-decoration: none;
}

.search-result-subtitle {
  color: var(--text-muted);
  font-weight: 600;
}

.search-result-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.search-result-badges span,
.search-sample-chips a {
  background: rgba(201, 156, 65, 0.12);
  color: var(--brand-green);
  text-decoration: none;
}

.search-result-reason,
.search-result-inline-reason {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 12px;
}

.search-empty-state {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 0 12px;
}

.search-sample-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

.promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.promo-grid .promo-item {
  border-radius: var(--radius-card);
  overflow: hidden;
  display: block;
  /* A medida vem do grupo de banner, injetada inline em `--promo-aspect`. */
  aspect-ratio: var(--promo-aspect, 1200 / 400);
}

/* O <picture> precisa preencher a caixa: sem isto ele vira uma linha de texto e
   a imagem some do fluxo do `object-fit`. */
.promo-grid .promo-item picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Se houver só 1 dica, ocupa a largura toda em vez de metade */
.promo-grid .promo-item:only-child {
  grid-column: 1 / -1;
}

.promo-grid .promo-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* O shell é só o trilho: quem tem moldura é CADA depoimento (.testimonial-item).
   Enquanto o card estava aqui, os dois do slide viviam dentro de uma caixa só e
   liam como um bloco, não como dois depoimentos. Os dois continuam andando
   juntos — o slide é o par. */
.testimonial-shell {
  padding: 0;
}

.testimonial-shell .carousel {
  position: relative;
  padding: 0 54px;
}

/* Slide único (um depoimento, ou dois emparelhados no desktop): sem setas, o vão
   de 54px de cada lado só estreitava o card. Marcado no servidor quando há um
   depoimento só e pelo JS quando o emparelhamento deixa um slide. */
.testimonial-shell.is-unico .carousel {
  padding: 0;
}

.testimonial-shell .carousel-control-prev,
.testimonial-shell .carousel-control-next {
  width: 44px;
  opacity: 1;
}

.testimonial-shell .carousel-control-prev {
  left: 0;
}

.testimonial-shell .carousel-control-next {
  right: 0;
}

.testimonial-shell .carousel-control-prev-icon,
.testimonial-shell .carousel-control-next-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--brand-yellow);
  background-size: 16px 16px;
  box-shadow: 0 12px 24px rgba(17, 17, 17, 0.16);
}

.testimonial-shell .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3e%3cpath d='M10.5 2.5L5 8l5.5 5.5' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}

.testimonial-shell .carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3e%3cpath d='M5.5 2.5L11 8l-5.5 5.5' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}

/* Dois depoimentos por slide, sempre. No celular a coluna vira uma só, mas o par
   continua no MESMO slide — muda o empilhamento, não o agrupamento. */
/* Um depoimento por slide; a partir de 992px o JS emparelha e a grade abre em
   duas colunas — ver initTestimonialCarousels(). O limite é o MESMO nos dois
   lugares: se divergir, o par cai num slide que só tem uma coluna. */
.testimonial-par {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  /* `stretch` e não `start`: os dois cards do slide terminam na mesma linha
     mesmo com depoimentos de tamanhos diferentes. */
  align-items: stretch;
}

@media (min-width: 992px) {
  .testimonial-par {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Depoimento único na página inteira ocupa as DUAS colunas: sem isto ele ficava
     na metade esquerda e a direita sobrava vazia.
     Preso ao `.is-unico` de propósito — o último slide de um total ímpar também
     tem um card só, mas ali esticá-lo faria o card mudar de largura no meio do
     giro. */
  .testimonial-shell.is-unico .testimonial-par > .testimonial-item:only-child {
    grid-column: 1 / -1;
  }
}

.testimonial-item {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  height: 100%;
  padding: 22px;
  /* SEM borda. A linha cinza de 1px existia porque o card não tinha sombra e
     precisava de algo que o delimitasse; com a sombra de volta ela virou um
     contorno a mais em volta de um card que já se destaca — e o `.pkg-card` da
     home, que é a referência, nunca teve borda: fundo branco, canto e sombra. */
  border-radius: var(--radius-card);
  background: #fff;
  /* A MESMA sombra dos cards de pacote da home (`.pkg-card`), não a
     `--shadow-soft` do tema: aquela desce 28px com opacidade 0.16 e, dentro do
     `.carousel-inner` — que é `overflow: hidden` —, era cortada no rodapé e
     vazava para o vão entre os dois cards, virando uma faixa cinza de corte
     reto. Foi por isso que a sombra tinha saído daqui.
     O que dá espaço para ela agora é o respiro em `.carousel-inner` abaixo. */
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09);
}

/* O trilho ganha o respiro que a sombra precisa para não ser cortada, e devolve
   a mesma medida em margem negativa nas laterais — assim o card continua com a
   largura inteira do container, mas a caixa que recorta passa a ser maior que
   ele. Embaixo a margem não é devolvida: ali o espaço vira o respiro do próprio
   carrossel. */
.testimonial-shell .carousel-inner {
  /* `width: auto` é obrigatório aqui: o Bootstrap declara `width: 100%` no
     `.carousel-inner` e, com `box-sizing: border-box`, a margem negativa só
     DESLOCAVA a caixa — a largura continuava a mesma e o respiro era descontado
     por dentro. O card saía 14px para a esquerda do centro (medido: 14px de um
     lado, 42px do outro). Com `auto`, a caixa cresce os 28px das margens e o
     conteúdo volta a coincidir com o container. */
  width: auto;
  padding: 6px 14px 22px;
  margin-left: -14px;
  margin-right: -14px;
}

/* Bullets do carrossel de depoimentos — só no celular, onde as setas saíram.
   A janela mostra TRÊS pontos e o trilho desliza por baixo: um ponto por
   depoimento daria mais de cem numa página de destino, e cem pontinhos numa tela
   de 390px viram uma régua cinza. */
.testimonial-dots {
  display: none;
}

.testimonial-dots[hidden] {
  display: none !important;
}

.testimonial-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-light, #ddd);
  transition: background 0.25s ease, transform 0.25s ease;
}

.testimonial-dot.is-active {
  background: var(--brand-yellow);
  transform: scale(1.35);
}

@media (max-width: 767px) {
  .testimonial-dots {
    /* Janela de 40px = 3 pontos de 8px e 2 vãos de 8px. Os 2px de respiro em
       volta são para o ponto ativo, que cresce 35%: sem eles o `overflow:
       hidden` cortaria uma lasca dele nas bordas da janela. */
    display: block;
    width: 44px;
    padding: 2px;
    margin: 4px auto 0;
    overflow: hidden;
  }

  .testimonial-dots-trilho {
    display: flex;
    gap: 8px;
    transition: transform 0.3s ease;
  }
}

/* Retrato 1:1 de 200px com canto arredondado — era um círculo de 96px, depois um
   quadrado de 250. A medida é a MESMA em qualquer largura: antes ela variava
   (250 no desktop, esticada a 100% da coluna abaixo de 1200px, 200 no celular), e
   o mesmo rosto aparecia de três tamanhos conforme a tela.

   Largura E altura fixas, não `aspect-ratio`: assim a caixa já existe no tamanho
   certo antes de a foto chegar, e nada pula quando ela carrega. */
.testimonial-avatar {
  width: 200px;
  height: 200px;
  max-width: 100%;
  border-radius: 14px;
  object-fit: cover;
  background: #e0e0e0;
}

/* Sem foto: as iniciais ocupam o mesmo quadrado, senão a linha desalinha. */
.testimonial-avatar-iniciais {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #444;
  font-family: var(--font-title);
  font-size: 56px;
  font-weight: 700;
}

.testimonial-item blockquote {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.testimonial-contexto {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-muted);
}

/* Abaixo de 1200px o par não cabe com a foto ao lado do texto: ela sobe para
   cima da citação e o par continua em duas colunas. A foto NÃO muda de tamanho
   aqui — chegou a esticar para 100% da coluna, e num card estreito isso a fazia
   ocupar meia tela. */
@media (max-width: 1199.98px) {
  .testimonial-item {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* A margem de baixo não é enfeite: na página do roteiro este box é seguido por
   "Você também vai curtir", que abre com uma linha de separação no topo. Sem ela
   o vão era ZERO — medido — e o traço cinza encostava na base do cartão, como se
   fosse borda dele. 28px é o mesmo respiro que a seção reserva do outro lado da
   linha. */
.testimonial-submit-section {
  margin-top: 22px;
  margin-bottom: 28px;
}

/* O fundo era um degradê de `rgba(244, 178, 45, ...)` — um amarelo ALHEIO à
   paleta: o da marca é #ffca20, e este #f4b22d puxava para o mostarda. Era a
   única cor do tema escrita em número solto, então ninguém percebia a diferença
   comparando código, só olhando a tela.

   No lugar, a dupla clássica cinza + amarelo: o fundo vira o cinza claro do tema
   (`--bg-light`) e o amarelo da MARCA volta como uma barra à esquerda. Assim ele
   marca o bloco em vez de tingi-lo — o texto ganha contraste e a chamada continua
   se destacando do branco da página. */
.testimonial-submit-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 26px;
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--brand-yellow);
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, var(--bg-light), #fff);
}

.testimonial-submit-panel h3 {
  margin: 0 0 8px;
  font-family: var(--font-title);
  text-transform: uppercase;
  color: #111;
}

.testimonial-submit-panel p {
  margin: 0;
  color: #333;
}

.testimonial-submit-note {
  display: inline-block;
  margin-top: 8px;
  color: #666;
  font-size: 13px;
}

.testimonial-submit-form .form-label {
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #111;
}

.testimonial-submit-modal .modal-dialog {
  margin-top: clamp(92px, 12vh, 132px);
}

/* Modais acima do header fixo (z-index ~1102): modal 1400 > backdrop 1390.
   Vale para todos os modais (ex.: pré-reserva), não só o de depoimentos. */
.modal {
  z-index: 1400;
}

.modal-backdrop.show {
  z-index: 1390;
}

/* ── Modais do site ─────────────────────────────────────────────────────────
   São quatro — pré-reserva, fale conosco, enviar depoimento e ler depoimento —
   e todos vinham com o visual padrão do Bootstrap: caixa branca, cabeçalho
   separado por um fio cinza e foco AZUL nos campos, que é a única cor fora da
   paleta que aparecia no site.

   O tratamento é comum aos quatro de propósito: são a mesma peça em contextos
   diferentes, e cada um com um desenho próprio é o que faz um site parecer
   remendado. A marca entra onde ela já mora no resto das páginas — preto no
   cabeçalho, amarelo marcando o limite e o foco. */
.modal-content {
  border: 0;
  border-radius: var(--radius-card);
  /* O cabeçalho escuro precisa chegar até o canto arredondado; sem isto ele
     vaza em quadrado por baixo do raio. */
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.modal-header {
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  background: var(--brand-charcoal);
  /* A régua amarela é a mesma assinatura dos títulos de seção. */
  border-bottom: 3px solid var(--brand-yellow);
  color: #fff;
}

.modal-header .modal-title {
  margin: 0;
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
}

/* O "Pacote: X" do modal de leitura é `.text-muted`, cinza-escuro: sobre o
   cabeçalho preto ele sumia. O `!important` responde ao do próprio Bootstrap. */
.modal-header .text-muted {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* O X do Bootstrap é um SVG preto embutido; no fundo escuro some. O filtro é o
   mesmo recurso que a classe `btn-close-white` usa, aplicado sem exigir que
   cada template ganhe a classe. */
.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.7;
}

.modal-header .btn-close:hover,
.modal-header .btn-close:focus {
  opacity: 1;
}

.modal-body {
  padding: 24px;
}

/* Separador das ações. NÃO é `.modal-footer`: nos três formulários os botões
   ficam dentro do `<form>`, que está no corpo — tirá-los de lá para um rodapé de
   verdade exigiria amarrá-los pelo atributo `form=`, troca que não vale o risco.
   Então a última coluna da grade ganha o traço.

   Tentei antes uma faixa cinza de ponta a ponta, com margem negativa para
   cancelar o padding do corpo e a calha da row. Saiu TORTA — 4px de folga à
   esquerda e 28px à direita, medido —, porque a conta depende da calha do
   Bootstrap e do corpo rolável, que variam por modal. Um fio alinhado com os
   campos separa igual e não tem como desalinhar. */
.modal-acoes {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border-light);
}

/* Rótulos no mesmo desenho que o formulário de depoimento já usava — caixa
   alta, curto e escuro, para o olho separar rótulo de conteúdo sem precisar de
   negrito no campo. */
.modal .form-label {
  margin-bottom: 6px;
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #111;
}

.modal .form-control,
.modal .form-select {
  min-height: 44px;
  padding: 10px 14px;
  border-color: var(--border-light);
  border-radius: 8px;
  font-size: 15px;
}

/* O foco era o azul do Bootstrap. Aqui ele vira amarelo da marca: é o único
   lugar do site em que a cor de sistema aparecia. */
.modal .form-control:focus,
.modal .form-select:focus,
.modal .form-check-input:focus {
  border-color: var(--brand-yellow);
  box-shadow: 0 0 0 0.2rem rgba(255, 202, 32, 0.3);
}

.modal .form-control::placeholder {
  color: #a6a6a6;
}

/* Caixa marcada em preto, não no azul padrão. */
.modal .form-check-input:checked {
  background-color: var(--brand-black);
  border-color: var(--brand-black);
}

.testimonial-submit-modal {
  z-index: 1400;
}

/* A borda e o raio que existiam aqui saíram: eram os mesmos que `.modal-content`
   agora dá a todos, e a borda de 1px brigava com o `border: 0` de lá — por ser
   mais específica, venceria e deixaria SÓ este modal com o fio cinza. */
.testimonial-submit-modal .modal-body {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

.newsletter-block {
  background: var(--brand-yellow);
  border-top: 1px solid var(--brand-black);
  border-bottom: 1px solid var(--brand-black);
  padding: 34px 0;
}

.newsletter-success-message {
  text-align: center;
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-black);
  padding: 8px 0;
}

.newsletter-general-error {
  margin-top: 12px;
  padding: 10px 16px;
  background: rgba(0,0,0,0.08);
  border-left: 3px solid var(--brand-black);
  border-radius: 4px;
  font-size: 14px;
  color: var(--brand-black);
}

.newsletter-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 180px;
  gap: 16px;
  align-items: end;
}

.newsletter-grid h3 {
  margin: 0;
  font-family: var(--font-title);
  color: var(--brand-black);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.newsletter-grid p {
  margin: 8px 0 0;
  color: #333;
}

.newsletter-grid label {
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: #333;
}

.newsletter-grid .form-control {
  border: 1px solid var(--brand-black);
  min-height: 42px;
}

.site-footer {
  background: #222;
  color: #fff;
  padding-top: 42px;
  font-weight: 300;
}

.footer-top {
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-title {
  font-family: var(--font-title);
  color: var(--brand-yellow);
  text-transform: uppercase;
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 400;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.footer-links a:hover {
  color: var(--brand-yellow);
}

.site-footer p,
.site-footer li,
.site-footer a {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 300;
}

.site-footer .footer-top p {
  margin: 0 0 6px;
  line-height: 1.4;
}

.site-footer .footer-top p:last-child {
  margin-bottom: 0;
}

.footer-social {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
}

.footer-social a {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  box-shadow: none;
  color: var(--brand-yellow);
  font-size: 26px;
  transition: opacity 0.2s;
}

.footer-social a:hover {
  opacity: 0.75;
  color: var(--brand-yellow);
}

.footer-brand-logo {
  width: 143px;
  margin-left: auto;
}

.footer-sustainability-logo {
  width: 62px;
}

/* Selos com fundo branco (Mais Eco, Cadastur) sobre o footer escuro */
.footer-seal-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 8px;
  padding: 5px 8px;
  transition: opacity 0.2s;
}

.footer-seal-link:hover {
  opacity: 0.85;
}

.footer-seal-logo {
  display: block;
}

/* Selo que já é claro dispensa a caixa branca — ela existe para arte escura não
   sumir no rodapé #222. */
.footer-seal-link--sem-caixa {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* 150px porque o logo passou a ser HORIZONTAL (1000×286, ~3,5:1): os 64px de
   antes serviam à versão empilhada, quadrada, em que a largura era o símbolo.
   Com a marca deitada, 64px deixariam "Plante essa semente" ilegível — a 150 a
   arte fica com 43px de altura. */
.footer-seal-maiseco {
  width: 150px;
  height: auto;
}

.footer-seal-cadastur {
  width: 120px;
}

@media (max-width: 1000px) {
  .footer-brand-logo {
    margin-left: 0;
  }
}

@media (max-width: 767px) {
  .site-footer .text-lg-end > .d-flex {
    justify-content: flex-start !important;
  }
}

.footer-bottom {
  padding: 16px 0 22px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ── 404 Not Found ─────────────────────────────────────── */
.not-found-layout {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 32px 0 64px;
}

.not-found-code {
  font-family: var(--font-title);
  font-size: clamp(80px, 15vw, 140px);
  font-weight: 900;
  line-height: 1;
  color: var(--brand-black);
  letter-spacing: -4px;
  margin-bottom: 8px;
}

.not-found-title {
  font-family: var(--font-title);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  margin-bottom: 16px;
}

.not-found-text {
  font-size: 16px;
  color: #555;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 8px;
}

.not-found-contact {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
}

.not-found-phones {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--bg-light);
  border-radius: 8px;
  border-left: 4px solid var(--brand-black);
}

.not-found-phone-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-black);
  text-decoration: none;
}

.not-found-phone-link i {
  font-size: 18px;
}

.not-found-phone-link:hover {
  color: #444;
}

.not-found-form-title {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .not-found-contact {
    grid-template-columns: 1fr;
  }
  .not-found-phones {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 24px;
  }
}
/* ── /404 Not Found ─────────────────────────────────────── */

.institutional-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
}

.side-menu {
  background: rgba(52, 52, 52, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 12px;
  height: fit-content;
}

.side-menu h4 {
  margin: 0 0 12px;
  padding: 4px 6px 0;
  font-family: var(--font-title);
  text-transform: uppercase;
  color: #fff;
}

.content-panel h2,
.content-panel h3,
.destination-submenu h3,
.promo-list-item h3 {
  font-family: var(--font-title);
  font-weight: 500;
}

.side-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.side-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: #fff;
  transition: background 0.18s ease, color 0.18s ease;
}

.side-menu a.active,
.side-menu a:hover {
  background: var(--brand-yellow);
  color: #000;
}

.institutional-mobile-toggle-label {
  display: inline-block;
  max-width: calc(100% - 52px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.content-panel {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  padding: 26px;
}


.destination-root-page .destination-featured-packages > [class*="col-"],
.destination-level-page .destination-featured-packages > [class*="col-"],
.destination-level-page .destination-local-cards > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.destination-root-page .destination-featured-packages .card-theme,
.destination-level-page .destination-featured-packages .card-theme,
.destination-level-page .destination-local-cards .card-theme {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.destination-root-page .destination-featured-packages .card-image,
.destination-level-page .destination-featured-packages .card-image,
.destination-level-page .destination-local-cards .card-image {
  width: 100%;
  height: 240px;
  min-height: 240px;
  max-height: 240px;
  object-fit: cover;
  object-position: center;
}

.destination-root-page .destination-featured-packages .card-body,
.destination-level-page .destination-featured-packages .card-body,
.destination-level-page .destination-local-cards .card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.destination-root-page .destination-featured-packages .card-body > .btn,
.destination-level-page .destination-featured-packages .card-body > .btn,
.destination-level-page .destination-local-cards .card-body > .btn {
  margin-top: auto;
}

.destination-level-page {
  background: #fff;
  padding: 0 0 56px;
}

.destination-dark-block {
  background: #000;
  padding: 44px 0 56px;
}

.destination-dark-block .destination-intro-section .content-text,
.destination-dark-block .destination-intro-section .content-text > * {
  color: #e8e8e8;
  background: transparent !important;
}

.destination-dark-block .destination-summary-toggle {
  color: #e0e0e0;
  border-bottom-color: var(--brand-yellow);
}

.destination-dark-block .destination-summary-toggle:hover,
.destination-dark-block .destination-summary-toggle:focus {
  color: var(--brand-yellow);
  border-bottom-color: var(--brand-yellow);
}

.section-heading.section-heading-light h2,
.section-heading.section-heading-light p {
  color: #fff;
}

.section-heading.section-heading-light p {
  border-bottom-color: var(--brand-yellow);
}

.destination-tabs-section {
  padding: 28px 0 32px;
  background: #fff;
}

.destination-tabs-nav {
  border-bottom: 0;
  gap: 12px;
  padding: 4px 0 14px;
}

.destination-tabs-nav .nav-link {
  border: 1px solid #2f2f2f;
  border-radius: 10px;
  background: #1f1f1f;
  color: #fff;
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 13px 24px;
  margin: 0;
}

.destination-tabs-nav .nav-link:hover {
  background: #121212;
  color: var(--brand-yellow);
  border-color: var(--brand-yellow);
}

.destination-tabs-nav .nav-link.active {
  background: #000;
  color: var(--brand-yellow);
  border-color: var(--brand-yellow);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
}

.destination-tab-panel {
  padding: 24px 0;
  margin-top: 8px;
}

.destination-tab-title {
  margin: 0 0 14px;
  font-family: var(--font-title);
  text-transform: uppercase;
  font-size: 22px;
}

.destination-tab-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.destination-tab-links a {
  display: block;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 9px 10px;
  text-transform: uppercase;
  font-size: 12px;
}

.destination-tab-links a:hover {
  border-color: var(--brand-yellow);
  color: #000;
}

.destination-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.destination-related-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 12px 14px;
}

.destination-related-list a span {
  font-weight: 600;
}

.destination-related-list a strong {
  color: #444;
  font-size: 13px;
}

.destination-related-list a:hover {
  border-color: var(--brand-yellow);
}

.destination-legacy-section {
  padding: 28px 0 38px;
}

.destination-legacy-nav-wrap {
  margin-bottom: 0;
}

.destination-legacy-nav {
  border-bottom: 0;
  gap: 12px;
  padding: 4px 0 14px;
}

.destination-legacy-nav .nav-link {
  border: 1px solid #2f2f2f;
  border-radius: 10px;
  background: #1f1f1f;
  color: #fff;
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 13px 24px;
  margin: 0;
}

.destination-legacy-nav .nav-link:hover {
  background: #121212;
  color: var(--brand-yellow);
  border-color: var(--brand-yellow);
}

.destination-legacy-nav .nav-link.active {
  background: #000;
  color: var(--brand-yellow);
  border-color: var(--brand-yellow);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
}

.destination-packages-panel {
  border-top: 0;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.destination-locals-nav {
  flex-wrap: wrap;
  overflow: visible;
  row-gap: 10px;
}

.destination-locals-nav::-webkit-scrollbar {
  display: none;
}

.destination-locals-nav .nav-link {
  white-space: nowrap;
}

.destination-tab-panel-legacy {
  padding: 0;
}

.destination-local-hero {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.05fr);
  gap: 22px;
  margin-bottom: 24px;
}

.destination-local-hero-media {
  border-radius: 12px;
  overflow: hidden;
  background: #e9e9e9;
  min-height: 260px;
}

.destination-local-hero-media img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  object-position: center;
}

.destination-local-hero-content h3 {
  margin: 0 0 8px;
  font-family: var(--font-title);
  text-transform: uppercase;
  font-size: 24px;
  color: #111;
}

.destination-local-hero-content h4 {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: #4b4b4b;
}

.destination-local-hero-content p {
  margin: 0 0 16px;
  color: #555;
  line-height: 1.6;
}

.destination-local-packages {
  margin-top: 8px;
}

.exp-menu-carousel .carousel-inner {
  border-radius: var(--radius-card);
  overflow: hidden;
}

.experience-menu-carousel {
  width: 100%;
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(52, 52, 52, 0.96);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.experience-menu-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  border: 0;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 18px;
  transition: background 0.18s ease, color 0.18s ease;
}

.experience-menu-nav:hover,
.experience-menu-nav:focus {
  background: var(--brand-yellow);
  color: #000;
}

.experience-menu-viewport {
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1 1 auto;
}

.experience-menu-viewport::-webkit-scrollbar {
  display: none;
}

.experience-menu-track {
  min-width: max-content;
  display: flex;
}

.exp-menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  padding: 0 20px;
  min-height: 56px;
  font-family: var(--font-title);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  text-decoration: none;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  transition: background 0.18s ease, color 0.18s ease;
}

.exp-menu-item:last-child {
  border-right: 0;
}

.exp-menu-item:hover,
.exp-menu-item:focus,
.exp-menu-item.active {
  background: var(--brand-yellow);
  color: #000;
}

.experience-mobile-nav {
  background: rgba(52, 52, 52, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-card);
  padding: 10px;
}

.experience-mobile-nav .mobile-filter-toggle {
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.experience-mobile-nav .mobile-filter-toggle-icon {
  color: var(--brand-yellow);
}

.experience-mobile-toggle-label {
  display: inline-block;
  max-width: calc(100% - 52px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.experience-mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.experience-mobile-link {
  display: block;
  border: 1px solid #343434;
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.experience-mobile-link:hover,
.experience-mobile-link:focus {
  border-color: var(--brand-yellow);
  color: var(--brand-yellow);
}

.experience-mobile-link.active {
  background: var(--brand-yellow);
  border-color: var(--brand-yellow);
  color: #000;
  font-weight: 600;
}

.exp-menu-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background: #111;
  padding: 12px;
}

.exp-menu-strip a {
  display: block;
  border: 1px solid #333;
  border-radius: 10px;
  color: #fff;
  text-align: center;
  padding: 12px 8px;
  font-size: 13px;
  text-transform: uppercase;
}

.exp-menu-strip a.active,
.exp-menu-strip a:hover {
  border-color: var(--brand-yellow);
  color: var(--brand-yellow);
}

/* ── Experiências: menu lateral retrátil (desktop) ───────────── */
.exp-layout {
  display: block;
}

/* Mobile: sidebar oculta (usa o accordion). Desktop reativa via flex. */
.exp-sidebar {
  display: none;
}

.exp-content {
  min-width: 0;
}

/* Grid de cards: controlado pelo estado da sidebar */
.exp-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .exp-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }

  .exp-content {
    flex: 1 1 0;
  }

  .exp-sidebar {
    flex: 0 0 240px;
    width: 240px;
    background: rgba(52, 52, 52, 0.96);
    border-radius: var(--radius-card);
    padding: 12px 8px;
    position: sticky;
    top: 120px;
    max-height: calc(100vh - 150px);
    display: flex;
    flex-direction: column;
    transition: flex-basis 0.25s ease, width 0.25s ease;
  }

  .exp-layout.is-collapsed .exp-sidebar {
    flex-basis: 68px;
    width: 68px;
  }

  /* Aberta: 2 colunas | Retraída: 3 colunas */
  .exp-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .exp-layout.is-collapsed .exp-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.exp-sidebar-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 4px 8px auto;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.exp-sidebar-toggle:hover,
.exp-sidebar-toggle:focus {
  background: rgba(255, 255, 255, 0.1);
  color: var(--brand-yellow);
}

.exp-layout.is-collapsed .exp-sidebar-toggle {
  margin: 0 auto 8px;
}

.exp-sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.exp-sidebar-nav::-webkit-scrollbar {
  width: 6px;
}

.exp-sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 6px;
}

.exp-sidebar-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.exp-sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid transparent;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-title);
  font-size: 14px;
  line-height: 1.25;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.exp-sidebar-link:hover,
.exp-sidebar-link:focus {
  background: rgba(255, 255, 255, 0.08);
  color: var(--brand-yellow);
}

.exp-sidebar-link.active {
  background: rgba(255, 255, 255, 0.06);
  border-left-color: var(--brand-yellow);
  color: var(--brand-yellow);
}

.exp-sidebar-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.exp-sidebar-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  /* silhuetas escuras → branco legível no fundo preto */
  filter: brightness(0) invert(1);
  transition: filter 0.18s ease;
}

.exp-sidebar-icon .exp-sidebar-icon-fb {
  font-size: 18px;
  color: inherit;
}

.exp-sidebar-label {
  flex: 1 1 auto;
  min-width: 0;
}

/* Estado retraído: só ícones, centralizados, sem títulos */
.exp-layout.is-collapsed .exp-sidebar-label {
  display: none;
}

.exp-layout.is-collapsed .exp-sidebar-link {
  justify-content: center;
  gap: 0;
  padding: 10px 0;
  border-left: 0;
  position: relative;
}

.exp-layout.is-collapsed .exp-sidebar-link.active {
  background: rgba(255, 202, 32, 0.16);
}

.exp-layout.is-collapsed .exp-sidebar-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand-yellow);
}

.filter-panel {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  padding: 16px;
}

.alert.alert-info {
  background: #fff;
  color: #555;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}

.mobile-filter-head {
  display: none;
}

.mobile-filter-toggle {
  width: 100%;
  border: 1px solid var(--brand-black);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.35);
  color: #000;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mobile-filter-toggle-icon {
  font-size: 18px;
  line-height: 1;
}

.mobile-filter-toggle-minus {
  display: none;
}

.mobile-filter-body {
  overflow: visible;
}

/* ── Lista de promoções ────────────────────────────────────────────────────
   Sem a moldura branca de antes (borda + fundo + 16px de padding): a página
   inteira já é branca, então o box era uma linha em volta de nada. O que separa
   um item do outro agora é o respiro entre eles — por isso o gap dobrou. */
.promo-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.promo-list-item {
  display: grid;
  /* A foto era 220×130 — pequena para o que é o argumento da oferta. 360px na
     proporção do formato `card` (800×480, 5:3) dá 360×216: 64% mais larga e com
     o mesmo enquadramento que o admin recorta. */
  grid-template-columns: 360px 1fr;
  gap: 24px;
  /* `center` centrava o texto na altura da foto e deixava folga em cima e
     embaixo; com `start` o bloco começa no topo e ocupa a coluna. */
  align-items: start;
}

.promo-list-foto {
  display: block;
  line-height: 0;
}

.promo-list-item img {
  width: 100%;
  /* Proporção, não altura fixa: a imagem legada não passou pelo recorte 5:3 e
     com `height` fixo apareceria esticada. */
  aspect-ratio: 5 / 3;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
}

.promo-list-corpo {
  min-width: 0;
}

/* O prazo sai da mesma data que tira a oferta do ar, então é informação dura —
   discreta, mas acima do texto, onde é lida antes do "Saiba mais". */
.promo-list-validade {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-black, #111);
  background: var(--brand-yellow);
  border-radius: 999px;
  padding: 4px 12px;
}

.promo-list-texto {
  max-width: none;
}

/* ── Detalhe da promoção ───────────────────────────────────────────────────
   A foto ficava full-width acima do texto, com `w-100`. As imagens da promoção
   vêm do acervo legado e são pequenas — 600×500 nas duas campanhas ativas —
   então eram ampliadas para os ~1.350px do painel (2,25×) e ocupavam mais de mil
   pixels de altura, borradas, antes de qualquer conteúdo. Ao lado do texto elas
   cabem no tamanho real e a página encurta.

   A coluna tem teto de 420px e a imagem usa `width: auto`, então ela NUNCA é
   ampliada: foto maior encolhe até caber, foto menor fica no tamanho que tem. */
.promo-detail {
  display: grid;
  /* 505px = os 420 de antes +20%. A foto é o primeiro argumento de uma oferta;
     a coluna do texto continua levando o resto. */
  grid-template-columns: minmax(0, 505px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.promo-detail--sem-foto {
  grid-template-columns: minmax(0, 1fr);
}

.promo-detail-media {
  max-width: 100%;
  min-width: 0;
}

/* Galeria igual à de destinos e pacotes — foto grande e faixa de miniaturas —,
   mas com as thumbs EMBAIXO: a coluna aqui é estreita, e uma coluna de thumbs ao
   lado deixaria a foto pequena demais. */
.promo-gallery-main {
  margin: 0;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

.promo-gallery-main img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Cinco por linha, fixo. Com `auto-fill` a quantidade mudava conforme a largura
   e a última linha ficava com um número diferente das outras; com 5 e o teto de
   10 fotos, a faixa fecha em duas linhas exatas. */
.promo-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.promo-gallery-thumbs button {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.promo-gallery-thumbs button.active {
  border-color: var(--brand-yellow);
}

/* As miniaturas são 320×180 (16:9) enquanto a foto grande aparece em 4:3 — a
   thumb mostra um enquadramento um pouco mais largo. É consequência de o formato
   `galeria` não ter altura fixa; some se o acervo for padronizado em 3:2. */
.promo-gallery-thumbs img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  display: block;
}

/* O texto vinha do CMS legado sem limite de largura e corria o painel inteiro:
   ~200 caracteres por linha, o que faz um corpo de 15px parecer miúdo. O olho
   perde a linha seguinte muito antes disso. */
.promo-detail-corpo .content-text {
  /* Sem teto de medida: aqui a coluna já é estreita (o grid reserva a maior
     parte para ela, mas a galeria ao lado limita), então 68ch sobrava e deixava
     um vazio à direita. */
  max-width: none;
  font-size: 15.5px;
}

@media (max-width: 767px) {
  .promo-detail {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .promo-detail-media {
    max-width: 100%;
  }

  /* No celular a galeria da oferta é a MESMA de destinos: slider de arrastar com
     bullets (`.dest-gallery-mobile`, que só aparece abaixo de 768px). Some daqui,
     então, o par foto-grande-com-setas + miniaturas:

     - as miniaturas ficavam pequenas demais para escolher pela imagem numa coluna
       só, e empurravam o texto da oferta para baixo;
     - as setas ficam SOBRE a foto, no caminho do arraste — no toque, o gesto é o
       que navega.

     É `display: none`, não remoção do HTML: a foto grande é o que o desktop usa, e
     a mesma marcação serve às duas larguras. */
  .promo-gallery-main {
    display: none;
  }

  .promo-gallery-thumbs {
    display: none;
  }
}

.destination-submenu {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  background: #fff;
  padding: 14px;
}

.destination-submenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.destination-submenu a {
  display: block;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 9px 10px;
  text-transform: uppercase;
  font-size: 12px;
}

.destination-submenu a:hover,
.destination-submenu a.active {
  border-color: var(--brand-yellow);
  color: #000;
}

.info-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-box {
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 16px;
  background: #fff;
}

.destination-detail-page .info-box {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.destination-detail-page .info-box + .info-box {
  border-top: 1px solid var(--border-light);
  margin-top: 18px;
  padding-top: 18px;
}

/* ── Melhor Época Calendário (frontend) ──────────────────── */
.mec-title {
  margin-bottom: 4px;
  color: var(--brand-black);
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mec-intro {
  color: #666;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 12px;
}

/* Sem moldura: os meses ficam soltos sobre o fundo do bloco que os contém. */
.mec-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2px;
  margin-bottom: 10px;
}

/* Destinos (detalhe): a coluna do calendário é estreita (col-lg-6), então
   quebra em 2 linhas de 6 meses, mantendo a largura do box */
.destination-detail-secondary .mec-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Sem fundo próprio: quem tem fundo é o box. */
.mec-mes {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 2px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #b3b3b3;
}

.mec-mes-nome {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.01em;
  width: 100%;
  text-align: center;
}

/* Slim: a cor + a legenda comunicam a classificação */
.mec-mes-label {
  display: none;
}

/* Só a cor do texto, sem preenchimento algum.

   MARROM é o perfeito e AMARELO é o bom — invertido a pedido; o cinza do "não
   indicado" não muda.

   A inversão corrige de quebra o pior contraste da tela: o amarelo da marca
   rende 1,53:1 sobre branco, muito abaixo do mínimo legível de 4,5:1, e estava
   justamente no estado que mais importa. Agora o "perfeito" usa o marrom, que dá
   7,92:1, e o amarelo fraco ficou no estado do meio.

   O cinza do "não indicado" também foi escurecido: #8b8880 dava 3,54:1 e #6f6c66
   dá 5,23:1, acima do mínimo, sem deixar de ler como cinza apagado ao lado das
   outras duas cores. */
.mec-perfeito .mec-mes-nome {
  color: #9b2226;
}

.mec-bom .mec-mes-nome {
  color: var(--brand-yellow);
}

.mec-nao-indicado .mec-mes-nome {
  color: #6f6c66;
}

.mec-sem-info .mec-mes-nome {
  color: #d2cec6;
}

.mec-legenda {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.mec-legenda-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: #555;
}

/* A legenda repete o mesmo recurso visual do calendário — a palavra na cor do
   nível — em vez de um quadradinho, que voltaria a introduzir blocos de cor. */
.mec-legenda-item::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}

.mec-legenda-item.mec-perfeito,
.mec-legenda-item.mec-bom,
.mec-legenda-item.mec-nao-indicado {
  background: transparent;
  font-weight: 500;
}

/* A legenda acompanha a inversão — se divergir, ela passa a explicar errado. */
.mec-legenda-item.mec-perfeito {
  color: #9b2226;
}

.mec-legenda-item.mec-bom {
  color: var(--brand-yellow);
}

.mec-legenda-item.mec-nao-indicado {
  color: #6f6c66;
}

/* Texto curado da melhor época, logo abaixo do calendário. */
.mec-texto {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light, #e2e2e2);
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 575px) {
  /* Duas linhas de seis meses, mas ainda um box só. */
  .mec-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2px;
    margin-bottom: 12px;
    padding: 8px 6px;
  }

  .mec-mes {
    min-height: 32px;
    border-radius: 5px;
  }

  .mec-mes-nome {
    font-size: 13px;
  }

  .mec-legenda {
    gap: 12px;
  }

  .mec-legenda-item {
    font-size: 11px;
  }
}
/* ── /Melhor Época Calendário ──────────────────────────── */

.best-season-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.best-season-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border-radius: 999px;
  border: 1px solid #d9d9d9;
  background: #efefef;
  color: #444;
  font-family: var(--font-title);
  font-size: 12px;
  text-transform: uppercase;
}

.best-season-pill.is-active {
  background: #1ec000;
  border-color: #1ec000;
  color: #fff;
}

.best-season-pill.is-partial {
  background: #ffca20;
  border-color: #e0b319;
  color: #111;
}

.best-season-pill.is-off {
  background: #444;
  border-color: #444;
  color: #fff;
}

.contact-stack h3 {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--brand-black);
}

.contact-stack .contact-info-block p {
  font-family: var(--font-body);
  color: #444;
  line-height: 1.6;
  margin-bottom: 10px;
}

.contact-stack .contact-details {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.contact-stack .contact-details li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

.contact-stack .contact-details i {
  color: var(--brand-black);
  font-size: 18px;
  line-height: 1.4;
  flex-shrink: 0;
}

.contact-stack .contact-details a {
  color: #333;
  text-decoration: none;
}

.contact-stack .contact-details a:hover {
  color: var(--brand-black);
  text-decoration: underline;
}

/* 3 boxes lado a lado, sem borda, com espaçamento */
.contact-stack .contact-boxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 16px;
  /* Painel único atrás das 3 colunas */
  background: #eeeeec;
  border-radius: var(--radius-card);
  padding: 32px 34px;
}

.contact-stack .contact-box-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-yellow);
  color: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 12px;
}

.contact-stack .contact-box h3 {
  margin: 0 0 10px;
}

.contact-stack .contact-box p {
  margin: 0;
  line-height: 1.6;
}

/* Espaçamento entre as seções (intro/painel, formulário, localização) */
.contact-stack article {
  margin-bottom: 48px;
}

.contact-stack article:last-child {
  margin-bottom: 0;
}

.contact-stack article > h3 {
  margin-bottom: 18px;
}

/* Redes sociais na coluna de contato */
.contact-stack .contact-social {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.contact-stack .contact-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand-black);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.contact-stack .contact-social a:hover,
.contact-stack .contact-social a:focus {
  background: var(--brand-yellow);
  color: #000;
}

/* Botões de rota (Google Maps / Waze) na localização */
.contact-stack .contact-map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 18px;
}

.contact-stack .contact-address {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  margin-bottom: 16px;
}

.contact-stack .contact-address i {
  color: var(--brand-black);
  font-size: 18px;
  line-height: 1.4;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .contact-stack .contact-boxes {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

.contact-stack .form-label {
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.package-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: 24px;
}

/* Vídeo + chamada do blog — dividem a mesma faixa da página do roteiro.
   Sozinho, qualquer um dos dois fica à esquerda com os mesmos 640px de sempre;
   juntos, viram duas colunas iguais. Antes o vídeo deixava metade da faixa em
   branco. */
.package-media-section {
  margin-top: 12px;
}

.package-media-grid {
  display: grid;
  gap: 32px;
  /* Uma coluna só: 640px é a largura que o vídeo sempre teve aqui. */
  grid-template-columns: minmax(0, 640px);
}

.package-media-grid.is-duplo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 991px) {
  /* Duas colunas abaixo de 992px deixariam o vídeo com menos de 350px. */
  .package-media-grid.is-duplo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Lado a lado, o card do blog terminava ~150px abaixo do vídeo (medido em
   1440px: vídeo 378px, card 527px). A coluna do grid já tinha a mesma altura —
   quem desalinhava era o conteúdo dentro dela.

   O card recebe a MESMA proporção do vídeo (16:9) e, como as duas colunas têm a
   mesma largura, nasce com a mesma altura. Por dentro vira uma coluna flex: o
   texto fica com a altura que precisa e a imagem absorve o que sobra.

   Por que não dá para calcular a altura da imagem direto: ela é
   (altura do vídeo − altura do texto), e a altura do texto depende de quanto a
   pessoa escreveu. O flex resolve isso sem o CSS precisar saber o número.

   LIMITE: se o texto passar da altura do vídeo inteiro, a imagem zera e o texto
   começa a ser cortado pelo `overflow: hidden`. Hoje a folga é grande — os
   textos cadastrados têm de 64 a 139 caracteres e ocupam 123px de 378px. É uma
   chamada, não um artigo. */
@media (min-width: 992px) {
  .package-media-grid.is-duplo .package-blog-card {
    display: flex;
    flex-direction: column;
    aspect-ratio: 16 / 9;
  }

  .package-media-grid.is-duplo .package-blog-card img {
    /* Sem isto o 5:3 do slot brigaria com o flex e a imagem não encolheria.
       `min-height: 0` porque item flex não encolhe abaixo do conteúdo sem ele. */
    aspect-ratio: auto;
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
  }

  .package-media-grid.is-duplo .package-blog-body {
    flex: 0 0 auto;
    /* Cada pixel que o texto devolve vira altura de imagem, e isso pesa muito
       mais na ponta estreita: em 1024px a imagem tinha só 138px de 261px e
       virava uma tira de 3,4:1 — o corte comia o título da arte. Apertando
       fonte, entrelinha e respiros, ela sobe para perto de 170px (2,7:1), que é
       proporção de faixa e não de tira. Em 1440px a diferença é cosmética. */
    padding: 13px 16px 15px;
  }

  .package-media-grid.is-duplo .package-blog-body .content-text {
    font-size: 14px;
    line-height: 1.5;
  }

  .package-media-grid.is-duplo .package-blog-link {
    margin-top: 8px;
  }
}

.package-blog-card {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #fff;
  /* A mesma sombra dos cards de pacote da home. */
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.package-blog-card:hover,
a.package-blog-card:focus-visible {
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
}

.package-blog-card img {
  display: block;
  width: 100%;
  height: auto;
  /* 5:3, a proporção do slot (800×480) — a caixa não muda de altura enquanto a
     imagem carrega. */
  aspect-ratio: 800 / 480;
  object-fit: cover;
}

.package-blog-body {
  padding: 18px 20px 20px;
}

.package-blog-body .content-text {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}

.package-blog-body .content-text > :first-child {
  margin-top: 0;
}

.package-blog-body .content-text > :last-child {
  margin-bottom: 0;
}

.package-blog-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-black);
  border-bottom: 2px solid var(--brand-yellow);
  padding-bottom: 2px;
}

/* Descrição do pacote — fora do box, largura total abaixo da galeria */
.package-intro-text {
  margin-bottom: 2rem;
}

.package-intro-text .content-text {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}

.package-intro-text .content-text p:first-child {
  margin-top: 0;
}

.package-intro-text .content-text p:last-child {
  margin-bottom: 0;
}

.package-gallery {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.package-gallery-main {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 10px;
  overflow: hidden;
  margin: 0;
  /* Âncora da tarja de crédito. A <figure> não era posicionada e a tarja
     escaparia para o primeiro ancestral que fosse. */
  position: relative;
}

/* ── Crédito do fotógrafo ────────────────────────────────────────────────────
   Assinatura sobre a foto, no canto inferior esquerdo. Discreta de propósito:
   é um crédito, não uma legenda — informa quem fez sem disputar a imagem.

   Fica no canto ESQUERDO porque o direito já é ocupado: na foto grande há as
   setas de navegação, e no celular a faixa de bolinhas nasce centralizada
   embaixo. Sobrepor qualquer um dos dois tornaria a tarja ilegível e o controle
   inoperante.

   O fundo é uma pastilha escura translúcida e não texto solto: foto clara com
   texto branco por cima some, e não há como saber de antemão como é a foto.
   `pointer-events: none` para a tarja não roubar o clique do carrossel nem da
   navegação por trás dela. */
.foto-credito {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  max-width: calc(100% - 20px);
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* Foto sem crédito. A tarja da foto grande fica no DOM porque o JS a reaproveita
   ao trocar de imagem; vazia, ela não pode desenhar a pastilha no canto. */
.foto-credito.is-vazio {
  display: none;
}

.package-gallery-main img {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  object-fit: cover;
  display: block;
}

.package-gallery-thumbs {
  flex: 0 0 320px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  align-content: start;
  overflow-y: auto;
  scrollbar-width: thin;
}

.package-gallery-thumbs button {
  flex-shrink: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
  display: block;
  width: 100%;
}

/* Só na tela de PACOTES (destinos mantém thumbs na lateral):
   foto principal em largura total e miniaturas em faixa abaixo. */
.package-intro-media .package-gallery {
  flex-direction: column;
  align-items: stretch;
}

.package-intro-media .package-gallery-main {
  flex: none;
  width: 100%;
  position: relative;
}

/* Setas de navegação sobre a foto principal (pacotes e 4º nível de destinos) */
.package-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background 0.18s ease;
}

.package-gallery-nav:hover,
.package-gallery-nav:focus {
  background: rgba(0, 0, 0, 0.78);
}

.package-gallery-prev {
  left: 12px;
}

/* Bullets sobre a base da foto principal (desktop de pacotes).
   Ficam na foto, e não abaixo dela, para não competir com a faixa de miniaturas
   que já vem logo em seguida. */
.package-gallery-dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: calc(100% - 120px); /* não passa por baixo das setas */
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  z-index: 2;
}

.package-gallery-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.package-gallery-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

.package-gallery-dot.active {
  background: #fff;
  transform: scale(1.3);
}

.package-gallery-next {
  right: 12px;
}

/* Faixa de miniaturas alinhada às extremidades da foto principal.
   Com largura fixa sobrava folga à direita (9 x 96px + gaps = 928 de ~958px);
   as colunas em 1fr dividem a largura exata, então as bordas coincidem.
   auto-fill (e não auto-fit) mantém a coluna do tamanho pedido quando há poucas
   fotos — com auto-fit uma galeria de 3 imagens esticaria cada thumb para ~310px,
   acima dos 320px da miniatura, e ela apareceria borrada. */
.package-intro-media .package-gallery-thumbs {
  flex: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  overflow: visible;
}

.package-intro-media .package-gallery-thumbs button {
  width: 100%;
}

.package-gallery-thumbs button.active {
  border-color: var(--brand-black);
}

.package-gallery-thumbs img {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  object-fit: cover;
  display: block;
}

/* 4º nível de destinos: a coluna de miniaturas fecha exatamente com o topo e a
   base da foto principal.
   Sem isso a coluna tinha altura própria e desencontrava dos dois lados: com 12
   fotos sobravam ~31px abaixo da foto; com 20, passavam ~352px.
   stretch dá à coluna a altura da foto; as linhas em 1fr preenchem essa altura
   quando as fotos cabem, e o mínimo de 70px impede que uma galeria grande achate
   as miniaturas — aí o overflow-y já existente rola dentro da mesma altura. */
/* A FOTO dita a altura; a coluna de miniaturas é absoluta dentro dela.
   Enquanto as duas eram itens flex, quem mandava era a MAIS ALTA: com 12
   miniaturas em 16:9 a coluna precisa de 556px, e abaixo de 1280 a foto já não
   chega a isso — a coluna passava a pender 70px (1280), 214px (1024) e 328px
   (820) abaixo da base da foto. Fora do fluxo, ela ocupa exatamente a altura da
   foto em qualquer largura e o excedente rola por dentro (`overflow-y` já
   existia). */
.destination-detail-gallery .package-gallery {
  align-items: stretch;
  position: relative;
  /* 320 da coluna + 10 do respiro entre ela e a foto */
  padding-right: 330px;
}

.destination-detail-gallery .package-gallery-main {
  flex: 1 1 auto;
  width: 100%;
}

.destination-detail-gallery .package-gallery-thumbs {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  flex: none;
}

/* Âncora das setas de navegação — .package-gallery-nav é absolute e, sem isto,
   se posicionaria pela página em vez da foto. Em pacotes esse relative vem de
   .package-intro-media .package-gallery-main. */
.destination-detail-gallery .package-gallery-main {
  position: relative;
}

/* A MINIATURA MANDA NA ALTURA, não a foto principal.
   Esticar a coluna até a altura da foto funcionava com galeria cheia, mas com
   poucas fotos cada célula virava uma tira vertical: medido nesta página, 4
   fotos davam caixa de 152×291 (proporção 0,52) para uma imagem 320×180
   (proporção 1,78) — o `cover` então mostrava uma fatia estreita do meio, que é
   o que se lê como "esticado".
   Com 16:9 a coluna fecha sozinha perto da foto de qualquer jeito: em 12 fotos
   dá ~553px contra ~597 da foto. Quarenta pixels de sobra embaixo custam menos
   que recortar toda miniatura. */
.destination-detail-gallery .package-gallery-thumbs {
  align-content: start;
  grid-auto-rows: auto;
}

.destination-detail-gallery .package-gallery-thumbs button {
  height: auto;
}

.destination-detail-gallery .package-gallery-thumbs img {
  aspect-ratio: 16 / 9;
  height: auto;
}

/* GALERIA CHEIA: a coluna fecha na mesma linha de base da foto.
   Com 16:9 e espaçamento fixo sobrava um resto — medido em 1440 com 12 fotos:
   a última miniatura terminava 20px acima da base da foto. Aqui as LINHAS
   esticam para consumir esse resto e a miniatura fica centrada dentro da célula,
   mantendo a proporção: com 12 fotos a célula dá ~93px para uma imagem de 86,
   três pixels de folga acima e abaixo que ninguém enxerga.
   A partir de 11 miniaturas (6 linhas) porque só aí o resto é pequeno: com 10,
   as células passariam de 113px para a mesma imagem de 86 e a coluna ficaria
   rala. Abaixo disso as miniaturas seguem no topo, que é o comportamento que já
   estava certo.
   12 fotos é o caso comum: 35 dos 85 destinos com galeria estão no limite. */
.destination-detail-gallery .package-gallery-thumbs:has(> button:nth-child(11)) {
  align-content: stretch;
  align-items: center;
  grid-auto-rows: minmax(70px, 1fr);
}

.package-summary {
  background: #000;
  border: 1px solid #000;
  border-radius: var(--radius-card);
  padding: 24px;
  color: #fff;
}

.package-summary p {
  color: #d0d0d0;
}

.package-summary h3 {
  margin-top: 0;
  font-family: var(--font-title);
  font-size: 18px;
  line-height: 1.25;
  text-transform: uppercase;
  color: #fff;
}

/* Experiências dentro do box de resumo (ícones maiores, lado a lado) */
.package-summary-experiences {
  margin-bottom: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.package-summary-exp-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}

.package-summary-exp-item {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity 0.18s ease;
}

.package-summary-exp-item:hover,
.package-summary-exp-item:focus {
  opacity: 0.7;
}

.package-summary-exp-item img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  /* silhuetas escuras → brancas legíveis no fundo preto */
  filter: brightness(0) invert(1);
}

.package-summary-exp-item .bi {
  font-size: 30px;
  color: #fff;
}

/* Promoção + tag de destaque no box de resumo */
.package-summary-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}

.package-summary-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.package-summary-tag-promo {
  background: var(--brand-yellow);
  color: #000;
}

/* Nível de dificuldade dentro do box de resumo */
.package-summary-difficulty {
  margin-bottom: 16px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 14px;
}

.package-summary-difficulty-title {
  display: block;
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #b3b3b3;
  margin-bottom: 8px;
}

.package-summary-difficulty-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Patas inativas no box preto: cinza mais claro para contraste no fundo escuro.
   A metade apagada da meia patinha (`::after`) segue a mesma regra. */
.package-summary-difficulty .pkg-card-paw:not(.is-active):not(.is-half),
.package-summary-difficulty .pkg-card-paw.is-half::after {
  filter: grayscale(1) brightness(1.25);
}

.package-summary-difficulty-label {
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
}

/* Barra de compartilhamento */
.package-share {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.package-share-label {
  display: block;
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #b3b3b3;
  margin-bottom: 10px;
}

.package-share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.package-share-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.package-share-btn:hover,
.package-share-btn:focus {
  background: rgba(255, 255, 255, 0.12);
  color: var(--brand-yellow);
}

.package-share-copied {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #1ec000;
}

/* ── Favoritos ─────────────────────────────────────────── */
.fav-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.38);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.fav-btn:hover {
  background: rgba(0, 0, 0, 0.55);
}

.fav-btn:active {
  transform: scale(0.9);
}

.fav-btn.is-fav {
  color: #e23744;
}

/* Coração inline (detalhe do pacote) */
.fav-btn-inline {
  position: static;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #cfcfcf;
  flex-shrink: 0;
}

.fav-btn-inline:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e23744;
}

.fav-btn-inline.is-fav {
  color: #e23744;
  border-color: #e23744;
}

.package-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.package-summary-head h3 {
  margin: 0;
}

/* Código de referência do pacote, logo abaixo do título do box. Discreto de
   propósito: é dado de atendimento, não parte da chamada. */
.package-summary-code {
  margin: 6px 0 14px;
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* Botão de filtro "só favoritos" */
.fav-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-light);
  background: #fff;
  border-radius: 999px;
  padding: 9px 16px;
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #333;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.fav-filter i {
  color: #e23744;
  font-size: 15px;
}

.fav-filter.is-active {
  background: #e23744;
  border-color: #e23744;
  color: #fff;
}

.fav-filter.is-active i {
  color: #fff;
}

/* Variante dentro da barra de filtros (alinha altura com Filtrar/Limpar) */
.fav-filter-bar {
  min-height: 44px;
  border-radius: 8px;
}

/* Sem favoritos nesta lista: botão esmaecido (contador mostra 0) */
.fav-filter.is-empty {
  opacity: 0.55;
}

/* Ícone de favoritos no header, ao lado da lupa (mobile e desktop).
   Contorno quando não há favoritos; preenchido vermelho quando há. */
.header-fav-toggle {
  color: #fff;
}

.header-fav-toggle .bi,
.header-fav-link .bi {
  font-size: 18px;
}

.header-fav-toggle.has-fav,
.header-fav-link.has-fav {
  color: #e23744;
}

@media (max-width: 991px) {
  .header-fav-toggle {
    position: absolute;
    right: 42px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 21;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }
}

.fav-empty {
  color: #666;
  font-size: 15px;
  padding: 8px 0;
}

.package-facts {
  margin: 18px 0;
  display: grid;
  gap: 8px;
}

.package-facts li {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.package-facts i {
  color: var(--brand-yellow);
}

.highlight-icon-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 18px;
  height: 100%;
}

.highlight-icon-card i {
  font-size: 24px;
  color: #000;
}

.highlight-icon-card h3 {
  margin: 8px 0;
  font-family: var(--font-title);
  font-size: 18px;
  text-transform: uppercase;
  color: #111;
}

.highlight-icon-card p {
  margin: 0;
}

.difficulty-highlight {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 18px;
}

.difficulty-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.difficulty-title-row h3 {
  margin: 0;
  font-family: var(--font-title);
  text-transform: uppercase;
  color: #111;
}

.difficulty-label {
  font-family: var(--font-title);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #000;
  border-radius: 999px;
  padding: 5px 10px;
}

/* Nível de dificuldade com patas (mesmo padrão do card), maiores nesta seção */
.difficulty-paws {
  margin-top: 14px;
  gap: 6px;
}

.difficulty-paws .pkg-card-paw {
  width: 28px;
  height: 28px;
}

.package-tabs-section {
  background: transparent;
  border: 0;
  border-radius: 0;
}

.package-separated-section {
  padding-top: 28px;
  border-top: 1px solid rgba(17, 17, 17, 0.1);
}

.package-testimonials-section .section-heading,
.package-related-section .section-heading {
  margin-bottom: 22px;
}

.package-tabs-nav {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--border-light);
  background: #eeeeec;
}

.package-tabs-nav .nav-link {
  white-space: nowrap;
  font-family: var(--font-title);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  color: #333;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 14px 16px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Destaque amarelo (igual aos botões) no hover */
.package-tabs-nav .nav-link:hover,
.package-tabs-nav .nav-link:focus {
  background: var(--brand-yellow);
  color: #000;
  border-bottom-color: var(--brand-yellow);
}

/* Ativo: tab toda amarela */
.package-tabs-nav .nav-link.active {
  background: var(--brand-yellow);
  color: #000;
  border-bottom: 2px solid var(--brand-yellow);
}

.package-tabs-content {
  padding: 22px 0;
}

.package-tabs-content h3 {
  margin-top: 0;
  font-family: var(--font-title);
  text-transform: uppercase;
  color: #111;
}

.package-accordion-trigger {
  display: none;
}

.package-accordion-body {
  max-height: none;
  opacity: 1;
  overflow: visible;
}

.package-day-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

/* ── Dia a Dia (acordeão aninhado) ─────────────────────── */
.daybyday {
  display: grid;
}

.daybyday-item {
  border-bottom: 1px solid var(--border-light);
}

.daybyday-item:last-child {
  border-bottom: 0;
}

.daybyday-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: none;
  border: 0;
  padding: 12px 0;
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--brand-black);
  text-align: left;
}

.daybyday-icon::after {
  content: "+";
  font-size: 20px;
  line-height: 1;
  color: var(--brand-black);
}

.daybyday-item.is-open .daybyday-icon::after {
  content: "\2212"; /* − */
}

.daybyday-body {
  padding-bottom: 14px;
}

/* Desktop: tudo aberto, cabeçalho estático (sem toggle) */
@media (min-width: 768px) {
  .daybyday-header {
    cursor: default;
    pointer-events: none;
    padding-bottom: 6px;
  }

  .daybyday-icon {
    display: none;
  }

  .daybyday-body {
    display: block;
  }
}

/* Mobile: colapsável — só o item aberto mostra o conteúdo */
@media (max-width: 767px) {
  .daybyday-header {
    cursor: pointer;
  }

  .daybyday-body {
    display: none;
  }

  .daybyday-item.is-open .daybyday-body {
    display: block;
  }
}

.package-price-table {
  margin-bottom: 10px;
}

.package-price-table th {
  border: 0;
  background: #000;
  color: var(--brand-yellow);
  font-family: var(--font-title);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.03em;
}

.package-price-table td {
  border-color: #e4e4e4;
}

/* Datas (desktop): zebra em dois cinzas claros, sem bordas, com respiro.
   No mobile a tabela vira card (regras próprias abaixo). */
@media (min-width: 768px) {
  .package-dates-table .table {
    --bs-table-bg: transparent;
  }

  .package-dates-table .table th,
  .package-dates-table .table td {
    border: 0;
    padding: 13px 26px;
    vertical-align: middle;
  }

  .package-dates-table tbody tr:nth-child(odd) {
    background: #f1f1ef;
  }

  .package-dates-table tbody tr:nth-child(even) {
    background: #f9f9f8;
  }
}

.status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #dedede;
  background: #fff;
  font-family: var(--font-title);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
}

.status-chip.status-saida-garantida {
  color: #009cee;
}

.status-chip.status-ha-vagas {
  color: #1ec000;
}

.status-chip.status-ultimas-vagas {
  color: #ed0000;
}

.status-chip.status-cancelado {
  color: #8f8f8f;
}

.status-chip.status-disponivel {
  color: #1ec000;
}

/* Bloco de preços sem box */
.package-price-block {
  margin-bottom: 24px;
}

.package-price-block h4 {
  font-family: var(--font-title);
  text-transform: uppercase;
  font-size: 16px;
  color: #111;
  margin: 0 0 10px;
}

.package-price-block .table {
  margin-bottom: 0;
}

/* Tabelas de preço elegantes: zebra em dois cinzas claros, sem bordas, com respiro */
.package-price-block .table {
  --bs-table-bg: transparent;
  border: 0;
  border-collapse: collapse;
}

.package-price-block .table th,
.package-price-block .table td {
  border: 0;
  padding: 12px 26px;
  vertical-align: middle;
}

.package-price-block .table th {
  background: #2a2a2a;
  color: #fff;
  font-family: var(--font-title);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.03em;
}

.package-price-block .table tbody tr:nth-child(even) {
  background: #f1f1ef;
}

.package-price-block .table tbody tr:nth-child(odd) {
  background: #f9f9f8;
}

/* Tabela larga com scroll lateral: dica + degradê na borda direita */
.package-scroll-x {
  position: relative;
}

.package-scroll-x .table-scroll-hint {
  display: none;
  align-items: center;
  gap: 6px;
  font-family: var(--font-title);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #888;
  margin-bottom: 8px;
}

.package-scroll-x.has-x-scroll .table-scroll-hint {
  display: inline-flex;
}

.package-scroll-x.has-x-scroll::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 42px;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0));
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.package-scroll-x.x-scroll-end::after {
  opacity: 0;
}

/* Formas de pagamento — apresentação amigável do conteúdo do CMS */
.package-payment-block h4 i {
  color: var(--brand-black);
  margin-right: 4px;
}

.package-payment-block .content-text ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.package-payment-block .content-text li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 9px 14px;
  background: #fafafa;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.3;
  color: #333;
}

.package-payment-block .content-text li::before {
  content: "\2713"; /* ✓ */
  color: #1ec000;
  font-weight: 700;
  font-size: 14px;
}

.package-dates-table .dates-cell-price {
  font-family: var(--font-title);
  font-weight: 700;
  color: #111;
}

/* Datas: no mobile cada saída vira um card (a tabela quebrava) */
@media (max-width: 767px) {
  .package-dates-table {
    overflow: visible;
  }

  .package-dates-table table,
  .package-dates-table tbody,
  .package-dates-table tr,
  .package-dates-table td {
    display: block;
    width: 100%;
  }

  .package-dates-table thead {
    display: none;
  }

  .package-dates-table tr {
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
  }

  .package-dates-table td {
    border: 0;
    padding: 5px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .package-dates-table td::before {
    content: attr(data-label);
    font-family: var(--font-title);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #888;
  }

  .package-dates-table td.dates-cell-action {
    margin-top: 6px;
  }

  .package-dates-table td.dates-cell-action::before {
    display: none;
  }

  .package-dates-table td.dates-cell-action .btn {
    width: 100%;
  }
}

.package-list-check {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.package-list-check li {
  position: relative;
  padding-left: 24px;
}

.package-list-check li::before {
  content: "\\F26E";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 0;
  color: #000;
}

.guide-card {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 12px;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  align-items: center;
  background: #fff;
}

.guide-card img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
}

.guide-card h4 {
  margin: 0 0 6px;
  font-family: var(--font-title);
  text-transform: uppercase;
  font-size: 17px;
  color: #111;
}

.guide-card p {
  margin: 0;
}

.reservation-form .form-label {
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.reservation-form .form-control,
.reservation-form .form-select {
  min-height: 42px;
}

.departure-months-wrap {
  position: relative;
  z-index: 1050;
}

.departure-months {
  position: sticky;
  top: 96px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(52, 52, 52, 0.96);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.departure-months.is-stuck {
  background: rgba(52, 52, 52, 0.96);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.departure-months.is-fixed {
  position: fixed;
  top: var(--departure-top-offset, 96px);
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--container-max), calc(100% - 48px));
  z-index: 1110;
}

.departure-months-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(88px, 1fr));
}

.departure-months-list li {
  border-right: 1px solid var(--border-light);
}

.departure-months-list li:last-child {
  border-right: 0;
}

.departure-months-list a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  min-height: 74px;
  font-family: var(--font-title);
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1.05;
  color: #fff;
  letter-spacing: 0.03em;
  transition: background 0.2s ease, color 0.2s ease;
}

.departure-months-list a strong {
  font-size: 12px;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
}

.departure-months-list li {
  border-right-color: rgba(255, 255, 255, 0.14);
}

.departure-months-list a:hover,
.departure-months-list a.active {
  background: var(--brand-yellow);
  color: #000;
}

.departure-months-list a:hover strong,
.departure-months-list a.active strong {
  color: #000;
}

.departure-months.is-stuck .departure-months-list li {
  border-right-color: rgba(255, 255, 255, 0.14);
}

.departure-months.is-stuck .departure-months-list a {
  color: #fff;
}

.departure-months.is-stuck .departure-months-list a strong {
  color: rgba(255, 255, 255, 0.82);
}

.departure-months-mobile {
  background: rgba(52, 52, 52, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-card);
  padding: 10px;
}

.departure-months-mobile .mobile-filter-toggle {
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.departure-months-mobile .mobile-filter-toggle-icon {
  color: var(--brand-yellow);
}

.departure-months-mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.departure-months-mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #343434;
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.departure-months-mobile-link strong {
  font-weight: 600;
  color: #d6d6d6;
}

.departure-months-mobile-link:hover,
.departure-months-mobile-link:focus {
  border-color: var(--brand-yellow);
  color: var(--brand-yellow);
}

.departure-months-mobile-link.active {
  background: var(--brand-yellow);
  border-color: var(--brand-yellow);
  color: #000;
}

.departure-months-mobile-link.active strong {
  color: #000;
}

.departure-filters .form-label {
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #222;
}

.departure-guaranteed-check {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  margin-top: 28px;
  gap: 8px;
}

.departure-guaranteed-check .form-check-input {
  width: 1.1rem;
  height: 1.1rem;
  border-color: #444;
}

.departure-guaranteed-check .form-check-label {
  font-family: var(--font-title);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: #111;
}

/* ── Card de Próximas Saídas ──────────────────────────────────────
   O corpo é o MESMO .pkg-card dos cards de pacote das telas de destino; o que
   existe a mais é a faixa do topo, com a data, o status e o desconto da saída.
   O arredondamento e a sombra passam para o wrapper: no .pkg-card eles fariam a
   faixa preta parecer um retângulo solto por cima do card. */
.departure-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09);
  transition: box-shadow 0.2s ease;
}

.departure-card:hover {
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.13);
}

.departure-card .pkg-card {
  flex: 1 1 auto;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}

.departure-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 14px;
  min-height: 40px;
  background: #000;
  font-family: var(--font-title);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.departure-date {
  color: var(--brand-yellow);
  font-weight: 600;
}

.departure-status {
  font-weight: 700;
}

/* Tons clareados em relação aos da versão sobre fundo branco: o vermelho e o azul
   originais (#ed0000, #009cee) ficavam com contraste baixo sobre o preto. */
.departure-status.status-saida-garantida {
  color: #3cb8ff;
}

.departure-status.status-ha-vagas {
  color: #35d40f;
}

.departure-status.status-ultimas-vagas {
  color: #ff5252;
}

.departure-status.status-cancelado {
  color: #a5a5a5;
}

/* Desconto: encostado na direita da faixa, amarelo com número preto. */
.departure-discount {
  margin-left: auto;
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 3px;
  background: var(--brand-yellow);
  color: #000;
  font-weight: 800;
}

@media (max-width: 1199px) {
  .newsletter-grid {
    grid-template-columns: 1fr 1fr auto;
    gap: 12px 14px;
    align-items: end;
  }

  /* Título ocupa a linha inteira; nome + e-mail + botão ficam numa linha só */
  .newsletter-grid > div:first-child {
    grid-column: 1 / -1;
  }

  .package-intro-grid {
    grid-template-columns: 1fr;
  }

  .mega-grid {
    grid-template-columns: 240px 1fr;
  }

  .mega-destinations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  /* Mobile: header-main-shell sempre sólido preto */
  .header-main-shell {
    background: #000 !important;
    border-bottom-color: #1f1f1f !important;
  }

  .header-top-inner {
    padding-top: 3px;
    padding-bottom: 3px;
    gap: 8px;
  }

  .header-top-list li {
    font-size: 11px;
  }

  .header-top-list li i {
    font-size: 11px;
  }

  .header-main {
    align-items: center;
    justify-content: center;
    min-height: 82px;
    position: relative;
  }

  .header-brand {
    flex: 0 0 auto;
    min-height: 82px;
    margin: 0 auto;
    justify-content: center;
    position: relative;
    z-index: 2;
  }

  .header-brand img {
    width: 132px;
  }

  .header-main > .header-search-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 21;
    pointer-events: auto;
    padding: 4px 8px;
  }

  .header-nav {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: 20;
  }

  .header-nav .navbar {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .header-nav .navbar-toggler,
  .header-nav .navbar-collapse {
    pointer-events: auto;
  }

  .header-nav .navbar-toggler {
    width: 40px;
    height: 40px;
    margin-left: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .header-nav .navbar-toggler:focus {
    box-shadow: none;
  }

  .header-nav .navbar-toggler-icon {
    width: 22px;
    height: 2px;
    display: block;
    background-image: none;
    background-color: #fff;
    border-radius: 0;
    box-shadow: 0 -7px 0 #fff, 0 7px 0 #fff;
    filter: none;
  }

  .header-nav .nav-link {
    min-height: 48px;
    padding: 12px 4px;
    width: 100%;
    justify-content: space-between;
    color: #fff;
  }

  .header-nav .nav-link:hover,
  .header-nav .nav-link.active,
  .header-nav .nav-item.show > .nav-link {
    color: #fff;
  }

  .header-nav .navbar-nav {
    padding-bottom: 0;
    gap: 0;
    align-items: stretch;
  }

  .header-nav .navbar-nav .nav-item {
    border-bottom: 1px solid #2a2a2a;
  }

  .header-nav .navbar-nav .nav-item:last-child {
    border-bottom: 0;
  }

  .header-nav .navbar-collapse {
    background: #000;
    border: 1px solid #2a2a2a;
    border-radius: 0;
    padding: 8px 12px 12px;
    margin-top: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    z-index: 30;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  .header-nav .navbar-collapse.show,
  .header-nav .navbar-collapse.collapsing {
    opacity: 1;
    transform: translateY(0);
  }

  /* Raise header-main-shell above header-top when search opens */
  .header-main-shell:has(.header-main.search-active) {
    z-index: 1102;
  }

  .header-search-overlay {
    padding: 12px;
    border-bottom: 3px solid var(--brand-yellow);
  }

  .header-search-form {
    grid-template-columns: 1fr auto auto;
    gap: 6px;
    align-items: center;
  }

  .header-search-content {
    width: 100%;
    gap: 0;
  }

  .header-search-hint {
    display: none;
  }

  .header-search-close {
    grid-column: 3;
    grid-row: 1;
    min-height: 44px;
    min-width: 44px;
  }

  .header-search-submit.btn-theme {
    grid-column: 2;
    grid-row: 1;
    min-height: 44px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 700;
  }

  .header-search-input {
    min-height: 44px;
    font-size: 16px;
  }

  /* Suggestions ancoradas ao overlay (logo abaixo da barra de busca),
     evitando cobrir o campo e a lupa */
  .header-search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
    max-height: 55vh;
    overflow-y: auto;
    z-index: 24;
    margin: 0;
    padding: 8px 0;
  }

  .header-search-suggestion,
  .header-search-all-results {
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px;
    border-radius: 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }

  .header-search-suggestion:last-child {
    border-bottom: 0;
  }

  .header-search-suggestion:hover,
  .header-search-suggestion.is-active {
    transform: none;
  }

  .header-search-suggestion-type {
    min-width: 0;
    font-size: 10px;
    letter-spacing: 0.06em;
  }

  .header-search-all-results {
    justify-content: flex-start;
    border-bottom: 0;
    padding: 12px 16px;
  }

  .header-search-suggestions-label {
    padding-left: 16px;
    padding-right: 16px;
  }

  .header-search-empty {
    padding: 12px 16px;
  }

  .header-nav .menu-accordion-item > .nav-link.dropdown-toggle::after {
    display: none;
  }

  .header-nav .menu-accordion-item {
    position: relative;
  }

  .header-nav .menu-accordion-item > .nav-link {
    width: 100%;
    position: relative;
    justify-content: flex-start;
    padding-right: 36px;
  }

  .header-nav .menu-accordion-item > .nav-link::before {
    content: "+";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
  }

  .header-nav .menu-accordion-item.mobile-open > .nav-link::before {
    content: "-";
  }

  .header-nav .menu-accordion-toggle {
    display: none !important;
  }

  .header-main .header-nav .menu-accordion-item > .dropdown-menu {
    position: static;
    width: 100%;
    min-width: 100%;
    border: 0;
    border-radius: 0;
    background: #0a0a0a;
    margin: 0;
    display: block;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 12px;
    transform: translateY(-6px);
    transition: max-height 0.32s ease, opacity 0.22s ease, transform 0.22s ease, margin 0.22s ease, padding 0.22s ease;
  }

  .header-main .header-nav .menu-accordion-item.mobile-open > .dropdown-menu {
    max-height: 65vh;
    opacity: 1;
    overflow-y: auto;
    padding: 8px 12px 10px;
    margin: 0 0 10px;
    transform: translateY(0);
  }

  .header-main .header-nav .menu-institucional > .dropdown-menu {
    min-width: 100%;
  }

  .institutional-dropdown-list {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .institutional-dropdown-list a {
    font-size: 15px;
    line-height: 1.3;
  }

  .departure-months {
    top: 82px;
  }

  .departure-months-list {
    grid-template-columns: repeat(6, minmax(96px, 1fr));
  }

  .mega-grid {
    display: none;
  }

  /* Mobile 3-level destination accordion */
  .mobile-dest-accordion {
    display: block;
  }

  .mobile-dest-list,
  .mobile-dest-states-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mobile-dest-region-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    background: none;
    border: 0;
    border-bottom: 1px solid #2a2a2a;
    color: #e8e8e8;
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
  }

  .mobile-dest-icon {
    font-size: 20px;
    font-weight: 400;
    color: var(--brand-yellow);
    line-height: 1;
    flex: 0 0 auto;
  }

  .mobile-dest-region-body {
    padding: 0 0 4px 12px;
  }

  .mobile-dest-states-list li {
    border-bottom: 1px solid #1e1e1e;
  }

  .mobile-dest-states-list li:last-child {
    border-bottom: 0;
  }

  .mobile-dest-state-item {
    border-bottom: 1px solid #1e1e1e;
  }

  .mobile-dest-state-item:last-child {
    border-bottom: 0;
  }

  .mobile-dest-state-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
    background: none;
    border: 0;
    color: #b8b8b8;
    font-family: var(--font-title);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
  }

  .mobile-dest-state-name {
    flex: 1 1 auto;
    text-align: left;
  }

  .mobile-dest-state-icon {
    font-size: 16px;
    font-weight: 400;
    color: var(--brand-yellow);
    line-height: 1;
    flex: 0 0 auto;
  }

  .mobile-dest-state-body {
    padding: 0 0 4px 16px;
  }

  .mobile-dest-state-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
    color: #b8b8b8;
    font-family: var(--font-title);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: color 0.15s ease;
  }

  .mobile-dest-state-link:hover {
    color: var(--brand-yellow);
  }

  .mobile-dest-flag {
    flex: 0 0 auto;
    width: 28px;
    height: 18px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .mobile-dest-flag-placeholder {
    display: inline-block;
    width: 28px;
    height: 18px;
    background: #2a2a2a;
    border-radius: 2px;
  }

  .mobile-dest-destinations-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mobile-dest-destination-link {
    display: block;
    padding: 7px 4px;
    color: #888;
    font-family: var(--font-title);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    border-bottom: 1px solid #222;
    transition: color 0.15s ease;
  }

  .mobile-dest-destination-link:hover {
    color: var(--brand-yellow);
  }

  .mobile-dest-view-state {
    display: block;
    padding: 8px 4px 4px;
    color: var(--brand-yellow);
    font-family: var(--font-title);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    opacity: 0.75;
  }

  .mobile-dest-view-state:hover {
    opacity: 1;
  }

  .mobile-dest-view-all-item {
    border-top: 1px solid #2a2a2a;
    margin-top: 6px;
    padding-top: 4px;
  }

  .mobile-dest-view-all {
    display: block;
    padding: 9px 0;
    color: var(--brand-yellow);
    font-family: var(--font-title);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
  }

  .mega-destinations {
    grid-template-columns: 1fr;
    gap: 8px 0;
  }

  .mega-destination-title {
    font-size: 16px;
  }

  .hero {
    min-height: 460px;
  }

  .search-block {
    margin-top: 20px;
  }

  /* A altura FIXA era o que esmagava as fotos: 300px divididos por três linhas
     dão 95px de altura para uma célula de 382 de largura — uma tira de 4:1, em
     que não se enxerga a experiência. No celular ficava pior, 177x75.

     Agora a altura vem da largura: cada célula é 4:3 e as linhas seguem o
     conteúdo. Num aparelho de 390px isso dá 177x133 em vez de 177x75. */
  .highlight-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    height: auto;
  }

  .highlight-item {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .highlight-item:first-child {
    grid-row: span 1;
  }

  /* Tablet/mobile: grade de 2 colunas com 6 destaques. */
  .highlight-item:nth-child(6) {
    display: block;
  }

  /* Com CINCO destaques — que é o número cadastrado hoje — a última célula
     ficaria vazia numa grade de duas colunas. O quinto item então ocupa a linha
     inteira, virando uma faixa larga. A regra só casa quando o 5º É o último,
     então com seis a grade volta a ser 2x3 sem tocar em nada. */
  .highlight-item:nth-child(5):last-child {
    grid-column: span 2;
    aspect-ratio: 16 / 7;
  }

  .institutional-layout {
    grid-template-columns: 1fr;
  }

  .exp-menu-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .destination-submenu ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .destination-tab-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .destination-local-hero {
    grid-template-columns: 1fr;
  }

  .destination-local-hero-media,
  .destination-local-hero-media img {
    min-height: 220px;
  }

  /* Empilhado: a foto vira a largura da tela e o texto vem embaixo. O gap de 24
     separava duas colunas lado a lado; entre foto e texto empilhados, 16 basta —
     o respiro maior é o que separa um item do outro. */
  .promo-list-item {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .testimonial-item {
    grid-template-columns: 1fr;
  }

  .institutional-page-difficulty .difficulty-grid {
    grid-template-columns: 1fr;
  }

  .institutional-page-difficulty .difficulty-card.is-level-5 {
    grid-column: auto;
  }

  .institutional-page-difficulty .difficulty-card-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .institutional-page-difficulty .difficulty-table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }

  .institutional-page-difficulty .difficulty-table,
  .institutional-page-difficulty .difficulty-table thead,
  .institutional-page-difficulty .difficulty-table tbody,
  .institutional-page-difficulty .difficulty-table tr,
  .institutional-page-difficulty .difficulty-table th,
  .institutional-page-difficulty .difficulty-table td {
    display: block;
  }

  .institutional-page-difficulty .difficulty-table {
    min-width: 0;
    background: transparent;
  }

  .institutional-page-difficulty .difficulty-table thead {
    display: none;
  }

  .institutional-page-difficulty .difficulty-table tbody {
    display: grid;
    gap: 14px;
  }

  .institutional-page-difficulty .difficulty-table tr {
    padding: 16px;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 18px;
    background: #fff;
  }

  .institutional-page-difficulty .difficulty-table tbody th,
  .institutional-page-difficulty .difficulty-table td {
    padding: 0;
    border: 0;
  }

  .institutional-page-difficulty .difficulty-table tbody th {
    margin-bottom: 12px;
    font-family: var(--font-title);
    font-size: 18px;
  }

  .institutional-page-difficulty .difficulty-table td + td {
    margin-top: 10px;
  }

  .institutional-page-difficulty .difficulty-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: #6c6c6c;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}

@media (max-width: 767px) {
  .dura-container,
  .theme-container,
  .container-1440 {
    padding-left: 14px;
    padding-right: 14px;
  }

  .header-top {
    max-height: 34px;
  }

  .header-top-list,
  .header-contact-list {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .header-top-list li span {
    font-size: 10px;
  }

  .header-search-nav-item {
    display: none;
  }

  .search-results-form {
    grid-template-columns: 1fr;
  }

  .header-brand {
    flex: 0 0 auto;
    min-height: 76px;
  }

  .header-brand img {
    width: 120px;
  }

  .header-nav .navbar-toggler {
    width: 40px;
    height: 40px;
  }

  .guide-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .guide-card img {
    margin: 0 auto;
  }

  /* No celular o carrossel anda sozinho e as setas saem de cena: elas comiam 80px
     dos 390 da tela (40 de cada lado) para uma ação que o giro automático já faz,
     e ficavam por cima da foto do depoimento. */
  .testimonial-shell .carousel-control-prev,
  .testimonial-shell .carousel-control-next {
    display: none;
  }

  /* Sem as setas, o trilho aproveita o espaço que elas reservavam — mas PARA aí:
     as margens laterais do container ficam. Chegou a ir de ponta a ponta
     (`width: 100vw` com margem negativa) e o card encostado no vidro leu como
     faixa, não como cartão. */
  .testimonial-shell .carousel {
    padding: 0;
  }

  /* Só o alinhamento: o tamanho 200×200 agora é o mesmo em toda largura, definido
     lá na regra base. Item de grade estica por padrão e a foto ficava encostada à
     esquerda; `justify-self` centra, e vale também para o quadrado de iniciais de
     quem não tem foto, que é irmão dela na mesma célula. */
  .testimonial-avatar {
    justify-self: center;
  }

  .testimonial-submit-panel {
    flex-direction: column;
    align-items: stretch;
  }

  /* No celular o modal começa a 5px do topo, e vale para TODOS eles. A folga de
     88px existia para o modal não nascer embaixo do cabeçalho fixo — mas o modal
     cobre a página inteira, então não havia o que evitar: os 88px só empurravam
     o formulário para baixo e obrigavam a rolar a tela antes de ler o primeiro
     campo. Com 5px, a altura útil do aparelho é quase toda do formulário.

     O seletor é `.modal .modal-dialog` para pegar os quatro: a regra antiga era
     só do modal de depoimento, e a pré-reserva — o formulário mais longo do site
     — nunca teve tratamento nenhum. */
  .modal .modal-dialog {
    margin-top: 5px;
    margin-bottom: 5px;
  }

  /* O corpo rolável acompanha: com o modal 83px mais alto, sobra esse tanto a
     mais de campo visível antes de precisar rolar DENTRO dele. */
  .testimonial-submit-modal .modal-body {
    max-height: calc(100vh - 97px);
  }

  .hero {
    min-height: 380px;
  }

  .rev-slider-shell .rev_slider .tparrows {
    width: 42px !important;
    height: 42px !important;
  }

  .rev-slider-shell .rev_slider .tparrows:before {
    line-height: 42px !important;
    font-size: 22px !important;
  }

  .rev-slider-shell .rev-manual-arrow {
    width: 42px;
    height: 42px;
    font-size: 22px;
  }

  .rev-slider-shell .rev-manual-arrow-prev {
    left: 14px;
  }

  .rev-slider-shell .rev-manual-arrow-next {
    right: 14px;
  }

  .hero-content {
    padding-bottom: 30px;
  }

  .section-space {
    padding: 40px 0;
  }

  .package-tabs-section.mobile-accordion .package-tabs-nav {
    display: none;
  }

  .package-tabs-section.mobile-accordion .package-tabs-content {
    padding: 0;
  }

  .package-tabs-section.mobile-accordion .package-tabs-content .tab-pane {
    display: block !important;
    opacity: 1 !important;
    border-top: 1px solid var(--border-light);
    margin: 0;
    padding: 0;
  }

  .package-tabs-section.mobile-accordion .package-tabs-content .tab-pane:first-child {
    border-top: 0;
  }

  .package-tabs-section.mobile-accordion .package-accordion-trigger {
    width: 100%;
    min-height: 48px;
    border: 0;
    background: #f8f8f8;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
  }

  .package-tabs-section.mobile-accordion .package-accordion-trigger::after {
    content: "+";
    font-size: 20px;
    line-height: 1;
    color: #111;
    flex: 0 0 auto;
  }

  .package-tabs-section.mobile-accordion .tab-pane.accordion-open .package-accordion-trigger {
    background: var(--brand-yellow);
    color: #000;
  }

  .package-tabs-section.mobile-accordion .tab-pane.accordion-open .package-accordion-trigger::after {
    content: "-";
    color: #000;
  }

  .package-tabs-section.mobile-accordion .package-accordion-body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 14px;
    transition: max-height 0.32s ease, opacity 0.22s ease, padding 0.22s ease;
  }

  .package-tabs-section.mobile-accordion .tab-pane.accordion-open .package-accordion-body {
    max-height: none;
    overflow: visible;
    opacity: 1;
    padding: 12px 14px 16px;
  }

  .search-panel {
    padding: 12px;
  }

  .search-panel-mobile-head {
    display: block;
  }

  .search-panel-body {
    max-height: 1400px;
    opacity: 1;
    overflow: hidden;
    margin-top: 10px;
    transition: max-height 0.35s ease, opacity 0.22s ease, margin 0.22s ease;
  }

  .search-panel.mobile-collapsed .search-panel-body {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    pointer-events: none;
  }

  .search-panel.mobile-expanded .search-panel-toggle-plus {
    display: none;
  }

  .search-panel.mobile-expanded .search-panel-toggle-minus {
    display: inline;
  }

  .mobile-filter-head {
    display: block;
  }

  .mobile-filter-body {
    max-height: 1400px;
    opacity: 1;
    overflow: hidden;
    margin-top: 10px;
    transition: max-height 0.35s ease, opacity 0.22s ease, margin 0.22s ease;
  }

  .mobile-filter-panel.mobile-collapsed .mobile-filter-body {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    pointer-events: none;
  }

  .mobile-filter-panel.mobile-expanded .mobile-filter-toggle-plus {
    display: none;
  }

  .mobile-filter-panel.mobile-expanded .mobile-filter-toggle-minus {
    display: inline;
  }

  /* Container amarelo — igual ao search-panel da home */
  .filter-panel.mobile-filter-panel {
    background: var(--brand-yellow);
    border: 1px solid var(--brand-black);
    border-radius: var(--radius-card);
    padding: 12px;
  }

  .filter-panel.mobile-filter-panel label {
    font-family: var(--font-title);
    color: var(--brand-black);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
  }

  .filter-panel.mobile-filter-panel .form-control,
  .filter-panel.mobile-filter-panel .form-select {
    border: 1px solid var(--brand-black);
    min-height: 44px;
    border-radius: 8px;
  }

  .institutional-mobile-menu {
    background: rgba(52, 52, 52, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-card);
    padding: 10px;
  }

  .institutional-mobile-menu .mobile-filter-toggle {
    background: rgba(0, 0, 0, 0.22);
    border-color: rgba(255, 255, 255, 0.14);
    color: #fff;
  }

  .institutional-mobile-menu .mobile-filter-toggle-icon {
    color: var(--brand-yellow);
  }

  .institutional-mobile-menu .mobile-filter-body h4 {
    display: none;
  }

  .institutional-mobile-menu .mobile-filter-body ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
  }

  .institutional-mobile-menu .mobile-filter-body li + li {
    border-top: 0;
  }

  .institutional-mobile-menu .mobile-filter-body a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid #343434;
    border-radius: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-family: var(--font-title);
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
  }

  .institutional-mobile-menu .mobile-filter-body a:hover,
  .institutional-mobile-menu .mobile-filter-body a:focus {
    border-color: var(--brand-yellow);
    color: var(--brand-yellow);
    text-decoration: none;
  }

  .institutional-mobile-menu .mobile-filter-body a.active {
    background: var(--brand-yellow);
    border-color: var(--brand-yellow);
    color: #000;
  }

  .theme-breadcrumb {
    padding: 10px 0;
  }

  .destination-dark-block {
    padding: 34px 0 44px;
  }

  .destination-tabs-section {
    padding: 20px 0 28px;
  }

  .destination-tab-panel {
    padding: 16px 0;
  }

  .promo-grid,
  .info-split {
    grid-template-columns: 1fr;
  }

  /* Uma coluna e o recorte VERTICAL do banner: a caixa troca de proporção junto
     com a imagem, no mesmo 767px. Sem `--promo-aspect-mobile` (banner sem arte
     de celular cadastrada) continua valendo a proporção de desktop. */
  .promo-grid .promo-item {
    aspect-ratio: var(--promo-aspect-mobile, var(--promo-aspect, 1200 / 400));
  }

  .destination-submenu ul,
  .exp-menu-strip,
  .newsletter-grid {
    grid-template-columns: 1fr;
  }

  .destination-tab-links {
    grid-template-columns: 1fr;
  }

  .destination-legacy-nav .nav-link,
  .destination-tabs-nav .nav-link {
    padding: 10px 14px;
    font-size: 12px;
    letter-spacing: 0.03em;
  }

  /* destination-locals-nav: inside dark collapsible (departure-months-mobile style) */
  .destination-locals-mobile-panel .destination-locals-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    overflow: visible;
    gap: 6px;
    padding: 8px 0 2px;
    margin-bottom: 0;
    border: 0;
  }

  .destination-locals-mobile-panel .destination-locals-nav .nav-item {
    width: 100%;
  }

  .destination-locals-mobile-panel .destination-locals-nav .nav-link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid #343434 !important;
    border-radius: 8px !important;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-family: var(--font-title);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 0;
    transition: border-color 0.18s, color 0.18s, background 0.18s;
  }

  .destination-locals-mobile-panel .destination-locals-nav .nav-link:hover {
    border-color: var(--brand-yellow) !important;
    color: var(--brand-yellow);
  }

  .destination-locals-mobile-panel .destination-locals-nav .nav-link.active {
    background: var(--brand-yellow) !important;
    border-color: var(--brand-yellow) !important;
    color: #000 !important;
    box-shadow: none;
  }

  .destination-locals-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    row-gap: 0;
    scrollbar-width: none;
  }

  .destination-detail-page {
    padding-top: 26px;
  }

  .destination-detail-page .theme-container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .destination-detail-page .destination-detail-overview {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-bottom: 26px;
  }

  .destination-detail-page .destination-detail-overview .content-text {
    margin-bottom: 18px;
  }

  .destination-detail-page .info-split {
    gap: 0;
  }

  .destination-detail-page .destination-detail-packages {
    border-top: 1px solid var(--border-light);
    padding-top: 18px;
  }

  .destination-detail-page .destination-detail-testimonials {
    padding-top: 22px;
  }

  /* SEM o traço cinza que separava estes dois blocos do que vem acima. Ele fazia
     sentido quando nenhum dos dois tinha contorno próprio: hoje o depoimento é um
     card com sombra e o convite tem fundo cinza com a barra amarela — os dois já
     se anunciam sozinhos, e a linha virava mais uma divisória numa tela que só
     tem uma coluna. Fica o respiro, que é o que de fato separa. */
  .destination-detail-page .testimonial-shell {
    padding-top: 18px;
  }

  .destination-detail-page .testimonial-submit-section {
    margin-top: 22px;
    padding-top: 18px;
  }

  /* Empilhar e esticar o botão são adaptações de largura, e ficam. O que saiu
     daqui foi o `padding: 0; border: 0; background: transparent`, que dissolvia o
     box: na página de destino o convite aparecia como texto solto, enquanto na do
     pacote era o cartão cinza com a barra amarela. O mesmo convite com duas caras
     dependendo da página.

     A regra fazia sentido quando o painel não tinha identidade própria; hoje ele
     tem, e é ela que o distingue do corpo da página. */
  .destination-detail-page .testimonial-submit-panel {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .destination-detail-page .testimonial-submit-panel .btn {
    width: 100%;
  }

  /* Galeria mobile: slider com dots */
  .dest-gallery-desktop { display: none; }
  .dest-gallery-mobile  { display: block; }

  .dest-gallery-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 12px;
    gap: 0;
  }
  .dest-gallery-slider::-webkit-scrollbar { display: none; }

  .dest-gallery-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    /* Âncora da tarja de crédito deste slide. Sem isto ela se prenderia ao
       slider e ficaria parada enquanto as fotos passam por baixo. */
    position: relative;
  }
  /* Sem recuo extra: as bolinhas do carrossel ficam FORA do slide, abaixo da
     faixa de fotos — não por cima dela. Medido: a foto acaba em 260px e as
     bolinhas começam depois. Subir a tarja para fugir delas só a deixava
     boiando no meio da imagem. */
  .dest-gallery-slide img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
  }
  .dest-gallery-slide:first-child img { border-radius: 12px 0 0 12px; }
  .dest-gallery-slide:last-child  img { border-radius: 0 12px 12px 0; }
  .dest-gallery-slide:only-child  img { border-radius: 12px; }

  .dest-gallery-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
  }
  .dest-gallery-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: var(--border-light, #ddd);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
  }
  .dest-gallery-dot.active {
    background: var(--brand-black, #111);
    transform: scale(1.3);
  }

  /* Módulos colapsáveis (mobile only) */
  .dest-collapse-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    background: none;
    border: 0;
    border-bottom: 2px solid var(--brand-yellow);
    padding: 10px 0;
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--brand-black);
    text-align: left;
  }
  .dest-collapse-toggle .dest-chevron {
    margin-left: auto;
    transition: transform 0.2s ease;
  }
  .dest-collapse-toggle[aria-expanded="true"] .dest-chevron {
    transform: rotate(180deg);
  }
  .dest-collapse-body {
    padding-top: 14px;
  }

  .destination-related-list a {
    flex-direction: column;
    align-items: flex-start;
  }

  .departure-months {
    top: 82px;
    overflow-x: auto;
  }

  .departure-months.is-fixed {
    width: calc(100% - 28px);
  }

  .departure-months-list {
    min-width: 780px;
    grid-template-columns: repeat(12, minmax(60px, 1fr));
  }

  .departure-guaranteed-check {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  /* carousel only for featured packages outside the legacy tab panel */
  .destination-level-page .destination-featured-section .destination-featured-packages,
  .destination-root-page .destination-featured-packages {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 12px;
  }

  .destination-level-page .destination-featured-section .destination-featured-packages::-webkit-scrollbar,
  .destination-root-page .destination-featured-packages::-webkit-scrollbar {
    display: none;
  }

  .destination-level-page .destination-featured-section .destination-featured-packages > [class*="col-"],
  .destination-root-page .destination-featured-packages > [class*="col-"] {
    flex: 0 0 88%;
    min-width: 88%;
    scroll-snap-align: start;
  }

  /* inside legacy tab panel: flowing list, no carousel */
  .destination-tab-panel-legacy .destination-featured-packages {
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }

  .destination-tab-panel-legacy .destination-featured-packages > [class*="col-"] {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: none;
  }

  .pkg-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 14px;
  }

  .pkg-carousel-dots {
    display: flex;
    gap: 7px;
    align-items: center;
  }

  .pkg-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: var(--border-light, #ddd);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
  }

  .pkg-carousel-dot.active {
    background: var(--brand-yellow);
    transform: scale(1.35);
  }

  .pkg-carousel-arrow {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border-light, #ddd);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--brand-black);
    font-size: 15px;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    flex: 0 0 auto;
  }

  .pkg-carousel-arrow:hover {
    background: var(--brand-yellow);
    border-color: var(--brand-yellow);
    color: #000;
  }

}

@media (max-width: 430px) {
  .card-theme .card-image {
    height: 190px;
  }

  /* A altura da grade não é mais fixa (as células são 4:3 e as linhas seguem o
     conteúdo), então o teto de 240px que existia aqui só voltaria a esmagar as
     fotos — 75px de altura cada. */
}

/* Tablet: TRÊS colunas. Com duas, a célula de 4:3 fica com 382 de largura e a
   grade inteira passa de 900px de altura — mais que a tela do aparelho para um
   bloco só. Em três, a célula cai para ~257x193 e cinco itens fecham duas
   linhas. Precisa vir DEPOIS do bloco de 991px, senão ele sobrescreve. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .highlight-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Mesma ideia de baixo: sendo o quinto e último, ele fecha a linha ocupando
     as duas colunas que sobrariam. */
  .highlight-item:nth-child(5):last-child {
    grid-column: span 2;
    aspect-ratio: 8 / 3;
  }
}

/* ── Cookie Banner / LGPD ───────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  background: var(--brand-charcoal);
  color: #fff;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.35);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cookie-banner--visible {
  transform: translateY(0);
}

.cookie-banner--hiding {
  transform: translateY(100%);
}

.cookie-banner-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.cookie-banner-text {
  flex: 1;
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
}

.cookie-banner-link {
  color: var(--brand-yellow);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 4px;
  white-space: nowrap;
}

.cookie-banner-link:hover {
  color: #fff;
}

.cookie-banner-actions {
  flex-shrink: 0;
}

.cookie-banner-accept {
  background: var(--brand-yellow);
  color: #000;
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.15s ease;
  line-height: 1;
}

.cookie-banner-accept:hover,
.cookie-banner-accept:focus-visible {
  background: #e6b800;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.cookie-banner-accept:active {
  transform: scale(0.97);
}

@media (max-width: 767px) {
  .cookie-banner-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px;
  }

  .cookie-banner-accept {
    width: 100%;
    padding: 13px;
    font-size: 14px;
  }
}
/* ── /Cookie Banner / LGPD ──────────────────────────────── */

/* ── Card de Pacote (.pkg-card) ─────────────────────────── */
.pkg-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09);
  transition: box-shadow 0.2s ease;
}

.pkg-card:hover {
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.13);
}

/* ── Faixa de desconto — triângulo canto superior direito ── */
.pkg-card {
  position: relative;
}

.pkg-card-discount {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 80px;
  height: 80px;
  overflow: hidden;
  pointer-events: none;
}

.pkg-card-discount::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 80px 80px 0;
  border-color: transparent var(--brand-yellow) transparent transparent;
}

.pkg-card-discount-pct {
  position: absolute;
  top: 13px;
  right: -3px;
  width: 46px;
  text-align: center;
  transform: rotate(45deg);
  transform-origin: center;
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 800;
  color: #000;
  line-height: 1;
}

/* Desconto em valor fixo ("US$ 200") não cabe no triângulo: são 46px de texto
   rotacionado, ~4 caracteres. Acima disso a fita vira uma faixa horizontal no
   mesmo canto, que cresce com o conteúdo. Porcentagem segue na fita diagonal. */
.pkg-card-discount--wide {
  width: auto;
  height: auto;
  max-width: calc(100% - 24px);
  top: 12px;
  overflow: visible;
}

.pkg-card-discount--wide::before {
  content: none;
}

.pkg-card-discount--wide .pkg-card-discount-pct {
  position: static;
  display: block;
  width: auto;
  transform: none;
  padding: 6px 12px;
  border-radius: 3px 0 0 3px;
  background: var(--brand-yellow);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Imagem ──────────────────────────────────── */
.pkg-card-img-link {
  display: block;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  text-decoration: none;
}

.pkg-card-img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

.pkg-card:hover .pkg-card-img {
  transform: scale(1.02);
}

.pkg-card-img--placeholder {
  height: 220px;
  background: #d8d4cc;
}

/* Gradiente sobre a foto */
.pkg-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.28) 45%,
    transparent 70%
  );
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  padding: 12px 14px;
  gap: 8px;
}

/* Meta: dias + grupo — coluna esquerda */
.pkg-card-overlay-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.pkg-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}

.pkg-card-meta-item .bi {
  font-size: 13px;
}

/* Badge de classificação — canto inferior direito */
.pkg-card-badge {
  flex-shrink: 0;
  background: var(--brand-yellow);
  color: #000;
  font-family: var(--font-title);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  line-height: 1.4;
  align-self: flex-end;
}

/* ── Corpo: título + descrição ───────────────── */
.pkg-card-body {
  padding: 16px 16px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pkg-card-title {
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 600;
  color: var(--brand-black);
  margin: 0;
  line-height: 1.3;
}

.pkg-card-title a {
  color: inherit;
  text-decoration: none;
}

.pkg-card-title a:hover {
  color: var(--brand-charcoal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pkg-card-desc {
  font-family: var(--font-body);
  font-size: 13px;
  color: #555;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Dificuldade ─────────────────────────────── */
.pkg-card-difficulty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
}

.pkg-card-paws {
  display: flex;
  gap: 4px;
  align-items: center;
}

.pkg-card-paw {
  display: inline-block;
  width: 18px;
  height: 18px;
  /* base = pata sólida (amarela); inativas viram cinza via grayscale */
  background: url('/img/level_ativo.png') center/contain no-repeat;
  flex-shrink: 0;
}

/* Inativas: pata sólida em cinza (fundo claro do card). O box preto reajusta. */
.pkg-card-paw:not(.is-active):not(.is-half) {
  filter: grayscale(1) brightness(0.6);
}

/* MEIA PATINHA (nivel_plus): meio nível ACIMA. Fica na posição seguinte às
   ativas — nível 2 com a marca lê-se "2 e meia": mais que Moderado, sem chegar a
   Intenso. Metade amarela, metade cinza, recortada da MESMA arte da pata inteira
   para o contorno bater. Em 09/2026 isto virou pata vermelha por uns dias, com o
   sentido de "fator extra sem mexer na contagem"; a Pisa manteve a meia pata. */
.pkg-card-paw.is-half {
  background-image: none;
  position: relative;
}

.pkg-card-paw.is-half::before,
.pkg-card-paw.is-half::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/img/level_ativo.png') center/contain no-repeat;
}

.pkg-card-paw.is-half::before {
  clip-path: inset(0 50% 0 0);
}

.pkg-card-paw.is-half::after {
  clip-path: inset(0 0 0 50%);
  filter: grayscale(1) brightness(0.6);
}

.pkg-card-difficulty-label {
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 500;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* O "+" do Plus, colado no rótulo. Em negrito e um ponto maior para se destacar
   sem virar outra palavra; herda a cor do rótulo em cada tela (cinza no card,
   claro no box preto do roteiro), então não precisa de variante por contexto.
   `letter-spacing: 0` desfaz o espaçamento do rótulo em caixa alta, que deixava
   o sinal solto do "Leve". */
.nivel-plus {
  font-weight: 700;
  /* 1,45em e não 1,15: a 12px do rótulo, o sinal saía com 13,8px e passava
     despercebido ao lado da palavra em caixa alta. Agora vai a 17,4px.
     E com respiro: colar o "+" na última letra (o -0.04em que tinha aqui antes)
     deixava "MODERADO+" apertado; 0,1em separa sem soltar. */
  font-size: 1.45em;
  line-height: 1;
  letter-spacing: 0;
  margin-left: 0.1em;
}

/* ── Rodapé: preço + botão ───────────────────── */
.pkg-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  position: relative;
}

.pkg-card-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5px;
  right: 5px;
  height: 1px;
  background: #f0ece4;
}

.pkg-card-price {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.pkg-card-price-from {
  font-size: 11px;
  color: #888;
  font-family: var(--font-body);
}

.pkg-card-price-value {
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-black);
}

/* O valor no box preto do roteiro. Vinha com os mesmos 16px do resto da lista;
   20px dá o destaque que o número merece sem empurrar a linha para outra altura
   (o `align-items: baseline` do `li` mantém o alinhamento com o rótulo). */
.package-price-value {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

@media (max-width: 767px) {
  /* 18px e não 19 no celular: medido em 360px (Android comum) quando a linha
     ainda trazia a ressalva do preço ("... US$ 0.000,00 terrestre"), que saiu
     de exibição depois. Sem ela sobra folga — 18px continua por ser o tamanho
     já validado, não por falta de espaço. */
  .package-price-value {
    font-size: 18px;
  }
}

.pkg-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--brand-yellow);
  color: #000;
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 9px 16px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.pkg-card-btn:hover,
.pkg-card-btn:focus-visible {
  background: #e6b800;
  color: #000;
  text-decoration: none;
}

.pkg-card-btn .bi {
  font-size: 14px;
}

/* ── Responsivo ──────────────────────────────── */
@media (max-width: 575px) {
  .pkg-card-img,
  .pkg-card-img--placeholder {
    height: 200px;
  }

  .pkg-card-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .pkg-card-btn {
    justify-content: center;
    padding: 11px;
  }
}
/* ── /Card de Pacote ─────────────────────────── */

/* ── Card de Imagem Cheia (.card-full-img-wrap) ─ */
.card-theme--full-img {
  position: relative;
  min-height: 340px;
  border: none;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.card-full-img-wrap {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 340px;
  overflow: hidden;
  border-radius: var(--radius-card);
  text-decoration: none;
  color: #fff;
}

.card-full-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.card-full-img-wrap:hover .card-full-img {
  transform: scale(1.04);
}

.card-full-img-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  background: linear-gradient(
    to bottom,
    transparent 25%,
    rgba(0, 0, 0, 0.55) 60%,
    rgba(0, 0, 0, 0.85) 100%
  );
}

.card-full-img-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.card-full-img-meta .badge-theme {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}

.card-full-img-body h3 {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.3;
}

.card-full-img-body p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 12px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-full-img-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-yellow);
  color: #000;
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 6px;
  align-self: flex-start;
  transition: background 0.2s;
}

.card-full-img-wrap:hover .card-full-img-cta {
  background: #e6c800;
}

@media (max-width: 767px) {
  .card-theme--full-img,
  .card-full-img-wrap {
    min-height: 280px;
  }
}
/* ── /Card de Imagem Cheia ───────────────────── */

/* ── Sidebar de informações — Palestras (view) ── */
.lecture-meta-sidebar {
  position: sticky;
  top: calc(96px + 16px); /* 96px = header-main após scroll + folga */
}

.lecture-meta-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
}

.lecture-meta-item:first-child {
  border-top: 1px solid var(--border-light);
}

.lecture-meta-item > .bi {
  font-size: 20px;
  color: var(--brand-yellow);
  flex-shrink: 0;
  margin-top: 2px;
}

.lecture-meta-item > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lecture-meta-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #999;
  font-weight: 600;
}

.lecture-meta-value {
  font-size: 15px;
  color: var(--brand-black);
  font-weight: 500;
  line-height: 1.4;
}
/* ── /Sidebar de informações — Palestras ─────── */

/* ── Aviso — Próximas Saídas ─────── */
.departure-disclaimer {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 8px;
  padding: 24px 28px;
  background: #eeeeec;
  border-left: 4px solid var(--brand-yellow);
  border-radius: 8px;
}
.departure-disclaimer-icon {
  color: var(--brand-black);
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.departure-disclaimer-body strong {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  color: var(--brand-black);
}
.departure-disclaimer-body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #444;
}
.departure-disclaimer-body a {
  color: var(--brand-black);
  font-weight: 600;
  text-decoration: underline;
}
.departure-disclaimer-body a:hover {
  color: #b8860b;
}
@media (max-width: 575.98px) {
  .departure-disclaimer {
    padding: 18px 18px;
    gap: 12px;
  }
}
/* ── /Aviso — Próximas Saídas ─────── */

/* ===== Depoimentos — tela geral (cards 2 colunas) + "Leia mais" ===== */
.testimonial-board-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}
.testimonial-board-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Retrato 1:1 de 200px, o MESMO do carrossel. Esta tela ficou para trás quando o
   depoimento deixou de ser um círculo: aqui a foto seguia redonda e com 56px,
   tamanho de ícone ao lado do nome, enquanto na home e nas páginas de destino já
   era um retrato quadrado de 200. */
.testimonial-board-avatar,
.testimonial-board-initials {
  width: 200px;
  height: 200px;
  border-radius: 14px;
  flex: 0 0 200px;
  object-fit: cover;
}
.testimonial-board-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e0e0e0;
  color: #444;
  font-weight: 700;
  /* Acompanha o quadrado: 18px era a medida de quando ele tinha 56. */
  font-size: 48px;
}

/* Cabeçalho do modal "Leia mais": a foto é item de flex e encolhia para caber
   (medido: 126×150 no celular, ou seja, deixou de ser quadrada). */
.testimonial-read-head > #trmAvatar {
  flex: 0 0 auto;
}

/* No celular os dois cabeçalhos empilham — o da tela geral e o do modal. Lado a
   lado, a foto deixaria ~104px para o nome no card e ~128px no modal, e nome de
   viajante não cabe nisso. */
@media (max-width: 767px) {
  .testimonial-board-head,
  .testimonial-read-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* Só a FOTO vai ao centro; nome, localidade e citação seguem alinhados à
     esquerda, com o resto do texto do card. É o mesmo arranjo do carrossel:
     empilhada, a foto quadrada encostada num canto fica torta em relação ao
     bloco todo, mas centrar o texto junto quebraria a leitura. */
  .testimonial-board-head > .testimonial-board-avatar,
  .testimonial-board-head > .testimonial-board-initials,
  .testimonial-read-head > #trmAvatar {
    align-self: center;
  }
}
.testimonial-board-name {
  margin: 0;
  font-size: 17px;
  font-family: var(--font-title);
}
.testimonial-board-local {
  font-size: 13px;
  color: #7a7a7a;
}
.testimonial-board-text {
  margin: 0;
  color: #444;
  line-height: 1.6;
  flex: 1 1 auto;
}
.testimonial-readmore {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  color: var(--brand-yellow, #d9a400);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.testimonial-readmore:hover {
  color: #111;
}
/* Paginação padrão do site */
.site-pagination ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.site-pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  background: #fff;
  color: var(--brand-black);
  font-family: var(--font-title);
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.site-pagination a.page-link:hover {
  border-color: var(--brand-yellow);
  background: #fff8e1;
}
.site-pagination .page-link.is-active {
  background: var(--brand-yellow);
  border-color: var(--brand-yellow);
  color: var(--brand-black);
}
.site-pagination .page-link.is-disabled {
  opacity: .4;
  pointer-events: none;
}
.site-pagination .page-arrow {
  font-size: 22px;
  line-height: 1;
}
.site-pagination .page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  color: #999;
}

/* O contador só existe no celular, onde os números não cabem. */
.site-pagination .page-contador {
  display: none;
}

@media (max-width: 767px) {
  /* Uma linha, sempre. O miolo da lista — números e reticências — sai de cena e
     entra o contador: a primeira caixa é sempre a seta anterior e a última a
     próxima, mesmo desabilitadas, então "nem primeiro nem último" é exatamente
     o conjunto dos números.

     Medido em 390px: a faixa tem 362 e o miolo de uma página do meio soma 545.
     Cabendo à força, cada alvo ficaria com 31px — menos que o dedo pede. */
  /* O `:not(.page-contador)` não é enfeite: sem ele esta regra também apagava o
     contador — três pseudo-classes pesam mais que `.site-pagination
     .page-contador`, e a paginação ficava só com as duas setas. */
  .site-pagination li:not(:first-child):not(:last-child):not(.page-contador) {
    display: none;
  }

  .site-pagination .page-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 14px;
    color: var(--text-main);
    font-family: var(--font-title);
    font-weight: 600;
    white-space: nowrap;
  }

  /* `nowrap` fecha a porta que sobrou: mesmo numa tela estreitíssima a
     paginação encolhe em vez de quebrar. */
  .site-pagination ul {
    flex-wrap: nowrap;
  }
}

/* -------------------------------------------------------------------------
   Cards de foto 4:3 (Parceiros, Equipe, Guias, Brindes)
   As imagens desses módulos são 800×600 (4:3). O card padrão é 16:9 e cortaria
   topo/base — aqui exibimos em 4:3 para NÃO cortar as bordas.
   Colocado no fim do arquivo para vencer as regras base/mobile de .card-image.
   ------------------------------------------------------------------------- */
.card-theme--foto .card-image {
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ── Anti-spam dos formulários ─────────────────────────────────────────────
   A isca do honeypot precisa sumir para gente e continuar existindo para o bot.
   Por isso NÃO se usa `display:none` nem `type="hidden"`: bot bom ignora os
   dois. Ela sai do fluxo e da tela, mas segue sendo um campo de texto normal no
   DOM. `aria-hidden` e `tabindex="-1"` no HTML cuidam de leitor de tela e Tab. */
.anti-spam-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.anti-spam-aviso {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted, #6b7280);
}

.anti-spam-aviso a {
  color: inherit;
  text-decoration: underline;
}

/* Aviso de que a busca afrouxou os termos — precisa ser lido antes dos cards,
   senão o visitante acha que a busca errou. */
.search-relaxed-notice {
  margin: 8px 0 4px;
  padding: 10px 14px;
  border-left: 3px solid var(--brand-yellow);
  background: #fffbea;
  color: #4a4a4a;
  font-size: 14.5px;
  line-height: 1.5;
}

/* ── Níveis de Dificuldade ─────────────────────────────────────────────────
   A página antiga passava de 5.500px no celular: cinco cards de ~380px cada,
   mais uma tabela. Aqui a escala inteira cabe numa tela e o texto vem depois.
   Nada de grid de 2 colunas — em telefone ela nunca ajudou. */
.niveis-escala {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  gap: 2px;
  background: var(--border-light, #e6e6e6);
  border: 1px solid var(--border-light, #e6e6e6);
  border-radius: 12px;
  overflow: hidden;
}

.niveis-escala-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #fff;
}

.niveis-escala-nome {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 15px;
  flex: 1 1 auto;
}

.niveis-escala-num {
  font-size: 12.5px;
  color: var(--text-muted, #9d9d9d);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* O bloco da meia patinha é o assunto que gera dúvida — ganha a única moldura
   forte da página, para não competir com a escala acima. O acento é o amarelo da
   marca, a cor da própria patinha: enquanto a marca foi vermelha, este bloco era
   vermelho, e sobrar vermelho aqui apontaria para um símbolo que não existe. */
/* Mesmo desenho do convite de depoimento (`.testimonial-submit-panel`): fundo
   cinza claro com a barra amarela à esquerda. Era um fundo creme (#fffdf4) com
   a borda também amarelada — bonito sozinho, mas um terceiro tratamento de caixa
   num site que já tem dois. O amarelo fica onde ele marca, na barra. */
.niveis-meia {
  margin: 0 0 32px;
  padding: 24px 26px;
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--brand-yellow);
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, var(--bg-light), #fff);
}

.niveis-meia-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.niveis-meia-head h3 {
  margin: 0;
  font-family: var(--font-title);
  font-size: 20px;
}

.niveis-meia-lead {
  margin: 2px 0 0;
  color: #7a5a10;
  font-size: 14.5px;
}

.niveis-meia-exemplos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.niveis-exemplo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 10px;
  font-size: 14px;
}

.niveis-exemplo.is-destaque {
  border-color: rgba(255, 202, 32, 0.75);
  background: #fffdf4;
}

.niveis-meia-nota {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #4a4a4a;
}

/* O texto ocupa a coluna inteira. Tinha um teto de 68ch, medida de leitura — mas
   numa coluna de 1.084px isso deixava o texto com 611px e metade da página
   vazia à direita. Entre a medida ideal de linha e a página parecer preenchida,
   o time escolheu a segunda. */
.niveis-texto {
  max-width: none;
}

/* Patinhas dentro do texto corrido: acompanham a linha, um pouco menores que as
   da escala, e não se partem no meio — um conjunto quebrado em duas linhas deixa
   de ser lido como "três patinhas". */
.niveis-texto .pkg-card-paws {
  display: inline-flex;
  vertical-align: text-bottom;
  white-space: nowrap;
  gap: 2px;
  margin: 0 3px;
}

.niveis-texto .pkg-card-paw {
  width: 15px;
  height: 15px;
}

/* ── Fale Conosco: consentimento e newsletter ────────────────────────────── */

/* Caixa própria, não nota de rodapé: o aviso de privacidade precisa ser lido
   ANTES do envio, porque é o envio que dá o consentimento. */
.contato-privacidade {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--brand-yellow);
  border-radius: 10px;
  background: var(--bg-light);
}

.contato-privacidade i {
  font-size: 18px;
  line-height: 1.4;
  color: #8a6d10;
  flex-shrink: 0;
}

.contato-privacidade p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-main);
}

.contato-privacidade a {
  color: inherit;
  text-decoration: underline;
}

.contato-newsletter .form-check-label strong {
  font-family: var(--font-title);
}

.contato-newsletter .form-check-label span {
  font-size: 13.5px;
  color: var(--text-main);
}

/* ── Fale Conosco: confirmação ───────────────────────────────────────────── */

.contato-obrigado {
  max-width: 640px;
}

/* Ícone ao LADO do título, não acima: junto ele lê como um só sinal de
   "deu certo" — separado, era um selo solto no topo da página. */
.contato-obrigado-titulo {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-title);
  margin: 0 0 12px;
}

.contato-obrigado-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-yellow);
  color: var(--brand-black);
  font-size: 24px;
  flex-shrink: 0;
}

.contato-obrigado-lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-main);
}

.contato-obrigado-prazo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 28px;
  font-size: 14.5px;
  color: var(--text-main);
}

.contato-obrigado-atalhos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.contato-obrigado-atalho {
  display: block;
  padding: 16px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.contato-obrigado-atalho:hover {
  border-color: var(--brand-yellow);
  transform: translateY(-2px);
}

.contato-obrigado-atalho i {
  display: block;
  margin-bottom: 8px;
  font-size: 22px;
  color: #8a6d10;
}

.contato-obrigado-atalho strong {
  display: block;
  font-family: var(--font-title);
  font-size: 15px;
}

.contato-obrigado-atalho span {
  font-size: 13px;
  color: var(--text-muted);
}

.contato-obrigado-urgente {
  font-size: 14.5px;
  color: var(--text-main);
}

/* `.btn` do Bootstrap é inline-block, e com o min-height de 44px do tema o
   conteúdo encosta no topo em vez de centralizar — é o desalinhamento que
   aparecia aqui. inline-flex resolve para o texto E para a seta. */
.contato-obrigado-voltar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

/* ── História, Missão e Valores ──────────────────────────────────────────── */

.historia-secao-titulo {
  margin-top: 8px;
}

/* Sem teto de medida: a narrativa usa a coluna inteira. Havia 68ch aqui pelo
   mesmo motivo do texto de níveis, e com a mesma consequência — 611px de texto
   numa coluna de 1.084. O que segura a leitura agora são os títulos de seção,
   que quebram os onze parágrafos em blocos. */
.historia-narrativa {
  max-width: none;
}

/* Ponto de entrada do texto. Só o PRIMEIRO parágrafo — o resto em corpo normal,
   senão o destaque deixa de destacar. */
.historia-narrativa > p:first-child {
  font-size: 17px;
  line-height: 1.75;
  color: var(--brand-charcoal);
}

/* Missão e visão: dois painéis lado a lado. Vêm em grade automática, então uma
   terceira seção sem valores entra na fila sem quebrar o layout. */
.historia-pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 32px 0;
}

.historia-pilar {
  padding: 24px;
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--brand-yellow);
  border-radius: 12px;
  background: var(--bg-light);
}

.historia-pilar h3 {
  font-family: var(--font-title);
  font-size: 19px;
  margin: 0 0 12px;
}

.historia-pilar-texto p:last-child,
.historia-valor-texto p:last-child {
  margin-bottom: 0;
}

.historia-pilar-texto p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-main);
}

/* Os nove valores em grade. Antes eram dezoito parágrafos empilhados, com o
   nome sublinhado — que na tela lê como link. */
.historia-valores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.historia-valor {
  padding: 20px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.historia-valor:hover {
  border-color: var(--brand-yellow);
  transform: translateY(-2px);
}

/* Ícone e título na mesma linha. Empilhado, o círculo custava ~52px por card —
   com nove cards empilhando no celular, quase 500px só de enfeite. */
.historia-valor-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.historia-valor-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-yellow);
  color: var(--brand-black);
  font-size: 17px;
  flex-shrink: 0;
}

.historia-valor h3 {
  font-family: var(--font-title);
  font-size: 16px;
  margin: 0;
}

.historia-valor-texto p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-main);
}

@media (max-width: 575.98px) {
  .historia-pilar,
  .historia-valor {
    padding: 18px;
  }
}

/* ── Rodapé da aba de subdestino ─────────────────────────────────────────── */

/* Texto à esquerda, botão à direita; empilha no celular. A aba mostra só três
   roteiros, então este bloco é a saída para quem quer a lista inteira ou quer
   falar com alguém.

   Sem moldura nem fundo: ele fecha a listagem, não é um aviso à parte. Só o
   espaço acima separa dos cards — caixa dentro de uma tela que já é feita de
   cards vira mais uma caixa. */
.destination-local-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
}

.destination-local-cta-texto {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-main);
}

.destination-local-cta-texto strong {
  font-family: var(--font-title);
  color: var(--brand-charcoal);
}

/* Botão que se comporta como link: é o que abre o modal, e visualmente precisa
   convidar ao clique sem competir com o botão sólido ao lado. */
.destination-local-cta-link {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-title);
  font-weight: 700;
  color: #8a6d10;
  text-decoration: underline;
  cursor: pointer;
}

.destination-local-cta-link:hover,
.destination-local-cta-link:focus {
  color: var(--brand-black);
}

/* Sobre o bloco preto dos destinos, só a cor do texto muda. */
.destination-dark-block .destination-local-cta-texto,
.destination-dark-block .destination-local-cta-texto strong {
  color: #fff;
}

.destination-dark-block .destination-local-cta-link {
  color: var(--brand-yellow);
}

.destination-dark-block .destination-local-cta-link:hover,
.destination-dark-block .destination-local-cta-link:focus {
  color: #fff;
}

.contato-modal-lead {
  margin-bottom: 18px;
  font-size: 14.5px;
  color: var(--text-main);
}

@media (max-width: 575.98px) {
  .destination-local-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}