/* =========================================================================
   VAGATUR — camada aditiva sobre css/style.css
   Nenhuma regra do layout original foi alterada. Este arquivo só acrescenta
   os pedaços que o conteúdo da Vagatur precisa: selos, hero das páginas
   internas, texto corrido de roteiro, galeria de fotos, lista de itens da
   frota, FAQ, tabela de créditos e botão flutuante de WhatsApp.
   Carregado DEPOIS de style.css.
   ========================================================================= */

/* =========================================================================
   PALETA — laranja da logo, branco e laranjinha bem claro.
   Redefine os tokens de style.css; nenhuma regra de lá precisou mudar.
   ========================================================================= */

:root {
  --primary:      #f0601c;   /* laranja da logo Vagatur */
  --primary-dark: #c9430b;   /* hover / estados ativos  */
  --accent:       #fdc70a;   /* amarelo do arco da logo */

  --white:      #ffffff;
  --surface:    #fff3ea;     /* laranjinha bem claro (fundo das seções) */
  --border:     #fadfcc;     /* bordas e pílula do header */
  --muted-soft: #cbbfb6;     /* texto claro sobre fundo escuro */
  --muted:      #6b5a50;     /* texto secundário, cinza quente */
  --ink:        #1b1512;     /* preto levemente quente */
  --star:       #ffb020;
}

/* pontos onde style.css usava preto puro */
.tours-bar__item.is-active { background: var(--primary); }
.tours-bar__item:hover { background: rgba(240, 96, 28, .12); }
.btn--primary:hover { background: var(--primary-dark); }
.slider-btn { background: rgba(27, 21, 18, .28); }
.slider-btn:hover { background: var(--primary); }

/* =========================================================================
   TIPOGRAFIA
   text-wrap: balance evita que sobre uma ou duas palavras sozinhas
   na última linha dos títulos.
   ========================================================================= */

h1, h2, h3, h4, h5,
.section-title__sub,
.hero__experience,
.review-content__text { text-wrap: balance; }

.prose p, .features li, .faq__item p { text-wrap: pretty; }

/* --- imagens ocupando o lugar dos vídeos do layout original ------------- */

.hero__media img,
.deal__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ink);
  display: block;
}

.deal__media img { border-radius: 32px; }

/* O layout original tinha vídeo escuro atrás do hero. Com fotografia real,
   céu e areia deixam o topo claro demais e o texto branco some, então o
   degradê escurece o começo, o miolo e o rodapé da imagem. */
.hero__overlay {
  background: linear-gradient(
    rgba(20, 14, 10, .68) 0%,
    rgba(20, 14, 10, .40) 26%,
    rgba(20, 14, 10, .50) 58%,
    rgba(20, 14, 10, .88) 100%
  );
}

/* --- header ------------------------------------------------------------- */

.main-menu__link { font-weight: 500; }
.main-menu__link.is-current { color: var(--primary); }

/* logo dentro do menu: só aparece quando o menu vira overlay no mobile */
.main-menu__logo { display: none; }

.btn__note { opacity: .72; }

/* --- hero das páginas internas ------------------------------------------ */

/* Piso alto o bastante para o hero mais cheio (Sobre, 808px de conteúdo),
   assim todas as páginas internas abrem com a mesma altura. */
.hero--page { min-height: 810px; padding: 210px var(--page-gutter) 60px; }
.hero--page .hero__container { gap: 90px; }
.hero--page h1 { font-size: 72px; }

.hero--short { min-height: 520px; padding: 200px var(--page-gutter) 60px; }
.hero--short .hero__container { gap: 0; }

.hero__eyebrow {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--white);
  opacity: .82;
  text-align: center;
}
.hero__eyebrow a { text-decoration: underline; text-underline-offset: 3px; }
.hero__eyebrow span { opacity: .5; margin: 0 4px; }

.hero__bottom .review-content__text strong { font-weight: 500; }

/* --- selo "Roteiro Interestadual" --------------------------------------- */

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 22px;
  background: var(--primary);
  color: var(--white);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--tracking);
  white-space: nowrap;
}

.badge--hero {
  position: static;
  align-self: center;
  font-size: 14px;
  padding: 7px 18px;
}

/* --- grade de roteiros -------------------------------------------------- */

/* As chamadas dos roteiros têm comprimentos bem diferentes; sem isto os
   botões "Ver roteiro" ficam desalinhados dentro da mesma linha da grade. */
.tour-card { justify-content: space-between; }

.tour-card__title { line-height: 1.2; }

.tour-card__details .meta { align-items: flex-start; }
.tour-card__details .meta__icon { margin-top: 4px; }
.tour-card__details .meta__text {
  white-space: normal;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
}

.destinations__cta { display: flex; justify-content: center; width: 100%; }

/* Com 4 roteiros publicados a grade padrão (3 colunas) deixava um card
   sozinho na segunda linha. */
.tours-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tours-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- seção "Nossa Essência": a foto acompanha a altura da coluna de texto */

.why__container { align-items: stretch; }
.why__media { aspect-ratio: auto; align-self: stretch; min-height: 420px; }
/* o gap de 107px do layout base abria um vazio grande antes dos contadores */
.why__content { justify-content: center; gap: 48px; }
.counters { padding-top: 8px; border-top: 1px solid var(--border); }

/* --- frota: dois botões no rodapé do card ------------------------------- */

.card-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.blog-card__text h5 a { color: inherit; }
.blog-card__media { display: block; }
.blog__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }

/* --- blocos de destaque (deals) ----------------------------------------- */

.deal__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.deal__actions .btn--outline { padding: 16px 28px 16px 32px; }

/* --- faixa de citação --------------------------------------------------- */

.video-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(rgba(20, 14, 10, .58), rgba(20, 14, 10, .80));
}
.video-banner__content { max-width: 1140px; margin: 0 auto; }
.video-banner__content h2 { font-size: 60px; }
.video-banner__author {
  font-size: 18px;
  font-weight: 300;
  color: var(--white);
  opacity: .85;
}

/* =========================================================================
   DEPOIMENTOS — três colunas rolando na vertical, em loop contínuo.
   Cada coluna repete o próprio conteúdo duas vezes e a animação desloca
   exatamente metade da altura, então a emenda não aparece. O padding-bottom
   igual ao gap é o que faz a conta de 50% fechar certinho.
   ========================================================================= */

.tcolunas {
  --tgap: 24px;
  display: flex;
  justify-content: center;
  gap: var(--tgap);
  width: 100%;
  max-height: 720px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

.tcoluna { flex: 1 1 0; max-width: 364px; }

.tcoluna__trilho {
  display: flex;
  flex-direction: column;
  gap: var(--tgap);
  padding-bottom: var(--tgap);
  animation: tcoluna-sobe var(--tempo, 50s) linear infinite;
}
.tcolunas:hover .tcoluna__trilho { animation-play-state: paused; }

@keyframes tcoluna-sobe {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

.tcard {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 36px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 12px 30px rgba(240, 96, 28, .07);
}

.tcard__text {
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.64em;
  color: var(--muted);
}

.tcard__autor { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.tcard__nome { font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.tcard__cidade { font-size: 14px; font-weight: 300; line-height: 1.4; color: var(--muted); }

/* --- depoimentos: iniciais no lugar da foto ----------------------------- */

.testimonial__avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--primary);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
}

/* --- CTA: garante contraste do texto branco sobre qualquer foto --------- */

.cta__box::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(rgba(20, 14, 10, .52), rgba(20, 14, 10, .80));
}
.cta__content { z-index: 2; }

/* Alternância de fundo: o destaque interestadual abre a home. */
.discounts--surface { background: var(--surface); }

/* Os depoimentos ficavam de borda a borda; agora acompanham a mesma
   largura de conteúdo das demais seções. */
.testimonials__slider {
  max-width: calc(var(--container) + var(--page-gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

/* --- texto corrido das páginas de roteiro ------------------------------- */

.roteiro-texto { padding: 100px var(--page-gutter); }

.prose {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 820px;
}
.prose p {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.75em;
  color: var(--muted);
}
.prose p strong { color: var(--ink); font-weight: 500; }

.prose__aviso {
  padding: 20px 24px;
  border-left: 3px solid var(--primary);
  border-radius: 0 16px 16px 0;
  background: var(--surface);
}

.prose__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* --- galeria "Mais fotos" ----------------------------------------------- */

/* .container não tem gap por padrão — cada seção define o seu. */
.photos { background: var(--surface); }
.photos .container { gap: 50px; }
.creditos .container { gap: 40px; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}
.photo-grid__item {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  overflow: hidden;
  background: var(--border);
}
.photo-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.photo-grid__item:hover img { transform: scale(1.05); }

/* --- lista de itens (frota, canais de contato) -------------------------- */

.features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.features li {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--muted);
}
.features li::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}

/* --- cartões de informação (contato) ------------------------------------ */

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}
.info-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 36px;
  border: 1px solid var(--border);
  border-radius: 32px;
  background: var(--white);
}
.info-card h5 { color: var(--ink); }
.info-card > p { font-size: 20px; font-weight: 500; color: var(--primary); }

/* --- FAQ ---------------------------------------------------------------- */

.faq { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 894px; }

.faq__item {
  padding: 4px 28px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
}
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+';
  flex: 0 0 auto;
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  color: var(--primary);
  transition: transform .25s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p {
  padding: 0 0 22px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.64em;
  color: var(--muted);
}

/* --- tabela de créditos ------------------------------------------------- */

.table-wrap { width: 100%; overflow-x: auto; }

.credits {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 15px;
  text-align: left;
}
.credits th,
.credits td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.credits th { font-weight: 500; color: var(--ink); }
.credits td { font-weight: 300; color: var(--muted); }
.credits a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

/* --- rodapé -------------------------------------------------------------- */
/* As colunas do layout base eram estreitas demais e quebravam
   "Links importantes" deixando uma palavra sozinha na segunda linha. */

.footer__left { max-width: 680px; }
.footer__col--menu { max-width: 180px; }
.footer__col--contact { max-width: 230px; }
.footer__col--social { max-width: 130px; }

/* Com três itens, o max-width de 300px do layout base quebrava
   "Política de Privacidade" e "Créditos de imagens" em duas linhas. */
.footer__legal {
  flex: 0 1 auto;
  max-width: none;
  justify-content: flex-start;
  gap: 32px;
}
.footer__legal a,
.footer__legal .footer__link-botao { white-space: nowrap; }

/* --- CTA: a foto é vertical, então sobe o enquadramento para o horizonte - */

.cta__bg { object-position: 50% 38%; }

/* =========================================================================
   TEMA ESCURO — páginas de transporte, no mesmo tom do site antigo.
   Aplicado com class="tema-escuro" no <body>. Mesmo layout, cores invertidas.
   ========================================================================= */

.tema-escuro {
  --escuro-1: #0a0908;   /* fundo principal */
  --escuro-2: #141110;   /* cards e seções alternadas */
  --escuro-3: #2a2321;   /* bordas */
  --escuro-texto: #b3a79f;
  background: var(--escuro-1);
  color: #fff;
}

.tema-escuro .section,
.tema-escuro .services,
.tema-escuro .discounts,
.tema-escuro .blog,
.tema-escuro .destinations,
.tema-escuro .photos,
.tema-escuro .roteiro-texto,
.tema-escuro .testimonials,
.tema-escuro .gallery { background: var(--escuro-1); }

.tema-escuro .services,
.tema-escuro .cta { background: var(--escuro-2); }

.tema-escuro h1, .tema-escuro h2, .tema-escuro h3,
.tema-escuro h4, .tema-escuro h5,
.tema-escuro .tour-card__title,
.tema-escuro .blog-card__text h5,
.tema-escuro .service-card__body h5,
.tema-escuro .info-card h5,
.tema-escuro .faq__item summary,
.tema-escuro .prose p strong { color: #fff; }

.tema-escuro h4 a, .tema-escuro h5 a { color: inherit; }

.tema-escuro .section-title__sub,
.tema-escuro .prose p,
.tema-escuro .features li,
.tema-escuro .meta__text,
.tema-escuro .deal__text p,
.tema-escuro .service-card__body p,
.tema-escuro .blog-card__text p,
.tema-escuro .counter-item p,
.tema-escuro .why__title p { color: var(--escuro-texto); }

.tema-escuro .tour-card,
.tema-escuro .blog-card,
.tema-escuro .info-card,
.tema-escuro .faq__item,
.tema-escuro .prose__aviso {
  background: var(--escuro-2);
  border-color: var(--escuro-3);
}
.tema-escuro .tour-card:hover,
.tema-escuro .blog-card:hover { box-shadow: 0 24px 48px rgba(0, 0, 0, .55); }

.tema-escuro .btn--outline { border-color: var(--escuro-3); color: #fff; }
.tema-escuro .btn--outline:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.tema-escuro .btn--secondary { background: #fff; color: var(--ink); }

/* hero sem foto, preto puro, igual ao site antigo */
.hero--solido { background: var(--escuro-1); min-height: 0; padding: 200px var(--page-gutter) 90px; }
.hero--solido .hero__container { gap: 56px; }
.hero--solido .hero__bottom { border-top: 1px solid var(--escuro-3); padding-top: 28px; }

.hero__logo { width: 240px; height: auto; margin-bottom: 8px; }

/* foto do veículo como produto: fundo branco, sem corte */
.hero__produto {
  width: 100%;
  max-width: 620px;
  padding: 24px;
  border-radius: 32px;
  background: #fff;
}
.hero__produto img { width: 100%; height: auto; display: block; }

/* foto real (não recorte): ocupa o quadro inteiro, sem moldura branca */
.hero__produto--foto { padding: 0; overflow: hidden; background: transparent; }
.hero__produto--foto img { border-radius: 32px; }

.deal__media--produto {
  display: flex;
  align-items: center;
  aspect-ratio: 1.46742 / 1;
  padding: 24px;
  border-radius: 32px;
  background: #fff;
}
.deal__media--produto img {
  width: 100%;
  height: auto;
  max-height: 100%;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
}

/* título com filete laranja e descrição ao lado */
.section-title--split {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  max-width: 100%;
  text-align: left;
}
.section-title--split h3 {
  flex: 0 0 auto;
  max-width: 460px;
  padding-bottom: 16px;
  border-bottom: 3px solid var(--primary);
  text-align: left;
}
.section-title--split .section-title__sub {
  flex: 1 1 0;
  max-width: 460px;
  text-align: left;
  margin-top: 8px;
}

.deal__tagline { font-style: italic; color: #fff !important; }

/* lista de itens com check laranja em vez de ponto */
.features--check li::before {
  content: '';
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 0;
  background: var(--primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =========================================================================
   AVISO DE COOKIES
   width:100vw em vez de left:0/right:0 — com overflow no documento o right
   pode ser calculado a partir da página e estourar a largura do viewport.
   ========================================================================= */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 70;
  width: 100vw;
  max-width: 100%;
  padding: 20px var(--page-gutter);
  background: var(--ink);
  overflow: hidden;
  box-sizing: border-box;
  transform: translateY(100%) translateZ(0);
  -webkit-transform: translateY(100%) translateZ(0);
  transition: transform .4s var(--ease);
}
.cookie-banner.is-visivel { transform: translateY(0) translateZ(0); -webkit-transform: translateY(0) translateZ(0); }

.cookie-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

.cookie-banner__texto {
  flex: 1 1 380px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--muted-soft);
}
.cookie-banner__texto a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

.cookie-banner__acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.cookie-banner__acoes .btn { padding: 12px 24px; }

/* Botão claro para o fundo escuro do aviso: um btn--primary aqui teria a
   mesma leitura do laranja do "Aceitar" e confundiria as duas ações. */
.btn--white {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--white);
}
.btn--white:hover { background: transparent; color: var(--white); }

/* enquanto o aviso aparece, o botão do WhatsApp sobe */
body.cookie-aberto .whatsapp-float { bottom: 132px; }

/* com o menu mobile aberto, nem o aviso nem o WhatsApp ficam na frente */
body.menu-aberto .cookie-banner { transform: translateY(100%) translateZ(0); }
body.menu-aberto .whatsapp-float { opacity: 0; pointer-events: none; }

.footer__link-botao {
  padding: 0;
  border: 0;
  background: none;
  font-size: 16px;
  font-weight: 300;
  line-height: 26.24px;
  letter-spacing: var(--tracking);
  color: var(--muted-soft);
  cursor: pointer;
  transition: color .25s var(--ease);
}
.footer__link-botao:hover { color: var(--white); }

/* --- títulos dentro do texto corrido (política de privacidade) ---------- */

.prose__titulo {
  margin-top: 24px;
  font-size: 28px;
  line-height: 1.25;
  color: var(--ink);
}
.prose__titulo:first-child { margin-top: 0; }

/* --- botão flutuante de WhatsApp ---------------------------------------- */
/* left:calc(100vw - 86px) em vez de right: o right pode ser calculado a
   partir do documento quando há overflow e joga o botão para fora do ecrã. */

.whatsapp-float {
  position: fixed;
  bottom: 28px;
  left: calc(100vw - 86px);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 10px 26px rgba(22, 22, 24, .28);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transition: transform .25s var(--ease);
}
.whatsapp-float:hover { transform: translateZ(0) scale(1.07); }
.whatsapp-float svg { width: 32px; height: 32px; fill: #fff; }

@media (prefers-reduced-motion: reduce) {
  .tcoluna__trilho { animation: none; }
  .cookie-banner { transition: none; }
}

/* --- ajustes responsivos das adições ------------------------------------ */

@media (max-width: 1199.98px) {
  .main-menu { gap: 32px; }
  .btn__note { display: none; }
  .hero--page { min-height: 780px; }
  .hero--page h1 { font-size: 56px; }
  .video-banner__content h2 { font-size: 44px; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tours-grid--4,
  .tours-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog__grid--2 { max-width: none; }
  .why__media { min-height: 340px; }
  .why__content { gap: 40px; }
  .tcoluna--3 { display: none; }
  .tcolunas { max-height: 620px; }
}

/* A nav em pílula não cabe abaixo de ~1024px com 5 itens + botão,
   por isso o menu de hambúrguer entra antes do breakpoint mobile.
   Fade em vez de translateX: slide horizontal duplicaria a largura
   do documento e criaria overflow no mobile. */
@media (max-width: 1023.98px) {
  .header__button { display: none; }
  .burger { display: flex; }

  .main-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    max-width: 100%;
    height: 100dvh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 90px 24px 40px;
    background: var(--border);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s var(--ease), visibility 0s linear .35s;
    z-index: 20;
    overflow-y: auto;
  }
  .main-menu.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .35s var(--ease), visibility 0s linear 0s;
  }
  .main-menu__link { font-size: 22px; }
  .main-menu__cta { display: inline-flex; margin-top: 12px; }

  /* O overlay cobre a pílula do header, então a marca reaparece dentro
     do próprio menu. */
  .main-menu__logo { display: block; margin-bottom: 20px; }
  .main-menu__logo img { width: 180px; height: auto; }

  /* O menu tem z-index 20 dentro do header e cobriria o botão de fechar. */
  .burger { position: relative; z-index: 30; }
}

@media (max-width: 767.98px) {
  .hero--page { min-height: 610px; padding: 150px var(--page-gutter) 48px; }
  .hero--page .hero__container { gap: 48px; }
  .hero--page h1 { font-size: 38px; }
  .hero--short { min-height: 440px; padding: 140px var(--page-gutter) 48px; }

  .video-banner__content h2 { font-size: 28px; }
  .video-banner__author { font-size: 16px; }

  .roteiro-texto { padding: 70px var(--page-gutter); }
  .prose p { font-size: 16px; }

  .hero--solido { padding: 140px var(--page-gutter) 60px; }
  .hero--solido .hero__container { gap: 36px; }
  .hero__logo { width: 170px; }
  .section-title--split { flex-direction: column; gap: 20px; }
  .section-title--split h3,
  .section-title--split .section-title__sub { max-width: 100%; }
  .deal__media--produto { padding: 16px; border-radius: 24px; }

  .photo-grid { grid-template-columns: 1fr; gap: 16px; }
  .info-grid { grid-template-columns: 1fr; }
  .info-card { padding: 28px; }

  .tours-grid--4,
  .tours-grid--3,
  .blog__grid--2 { grid-template-columns: 1fr; }
  .why__media { min-height: 0; aspect-ratio: 1.16502 / 1; }

  .badge { font-size: 12px; padding: 5px 12px; }
  .deal__actions .btn { flex: 1 1 auto; justify-content: center; }

  .faq__item { padding: 4px 22px; }
  .faq__item summary { font-size: 16px; }

  .whatsapp-float { bottom: 20px; left: calc(100vw - 74px); width: 52px; height: 52px; }
  .whatsapp-float svg { width: 28px; height: 28px; }
  body.cookie-aberto .whatsapp-float { bottom: 210px; }

  /* Empilhados um sob o outro, os contadores esticavam demais a seção
     sem acrescentar informação. Ficam só no desktop e no tablet. */
  .counters { display: none; }

  .tcoluna--2 { display: none; }
  .tcolunas { max-height: 520px; }
  .tcard { padding: 28px; }
  .prose__titulo { font-size: 22px; }

  .cookie-banner { padding: 18px var(--page-gutter); }
  .cookie-banner__texto { font-size: 14px; flex-basis: 100%; }
  .cookie-banner__acoes { width: 100%; }
  .cookie-banner__acoes .btn { flex: 1 1 auto; justify-content: center; }
}