/* ===== Reset básico ===== */
/* ===== Fonte personalizada: Beautifully Delicious Script =====
   Essa fonte não está disponível no Google Fonts (é paga). Quando você
   adicionar o arquivo dela na pasta "fonts/", o navegador passa a usá-la
   automaticamente. Até lá, ele usa "Lavishly Yours" (gratuita) no lugar,
   pois o @font-face abaixo simplesmente "falha" silenciosamente sem o arquivo,
   caindo no fallback definido no CSS da seção .frase-verde. */
@font-face {
  font-family: 'Beautifully Delicious Script';
  src: url('fonts/BDScript-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bethany Elingston';
  src: url('fonts/BethanyElingston-Regular.otf') format('opentype'),
       url('fonts/BethanyElingston-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* ===== Seção principal (capa) ===== */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000; /* aparece enquanto o vídeo carrega */
}

/* ===== Vídeos de fundo ===== */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* preenche a tela sem distorcer */
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.hero-video.active {
  opacity: 1;
}

/* Camada escura sobre o vídeo, para o texto ficar legível */
.overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1;
}

/* ===== Cabeçalho (topbar) ===== */
.topbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 50px;
  color: #fff;
}

.topbar-left, .topbar-right {
  display: flex;
  gap: 30px;
  align-items: center;
}

.lang {
  font-size: 13px;
  letter-spacing: 1px;
  padding-left: 10px;
  border-left: 1px solid rgba(210, 207, 185, 0.4);
}

/* ===== Variante clara do topbar, para páginas sem vídeo de fundo ===== */
.topbar-light {
  position: relative; /* aqui não fica sobre vídeo, então não precisa de "absolute" */
  background: #f4f1ea;
  color: #2e2a25;
}

.topbar-light .link,
.topbar-light .menu-btn,
.topbar-light .lang-btn {
  color: #2e2a25;
}

.topbar-light .lang {
  border-left: 1px solid rgba(46, 42, 37, 0.3);
}

.lang-btn {
  background: none;
  border: none;
  color: #d2cfb9;
  font-size: 13px;
  letter-spacing: 1px;
  font-family: inherit;
  cursor: pointer;
  opacity: 0.6;
}

.lang-btn.active {
  opacity: 1;
  font-weight: bold;
}

.lang-btn:hover {
  opacity: 1;
}

/* Logo pequeno no topo da capa, centralizado e alinhado com o menu */
.capa-logo-link {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  align-items: center;
}

.capa-logo {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  height: 32px;
  z-index: 3;
}

.menu-btn {
  background: none;
  border: none;
  color: #d2cfb9;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  font-family: inherit;
}

.link {
  color: #d2cfb9;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 1px;
}

.link:hover,
.menu-btn:hover {
  opacity: 0.7;
}

/* ===== Menu lateral (dropdown) ===== */
.side-menu {
  position: fixed;
  top: 0;
  left: -280px; /* começa escondido fora da tela */
  width: 280px;
  height: 100vh;
  background: #e7e0d3; /* mesma cor clara do logo */
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 70px 40px;
  gap: 22px;
  transition: left 0.4s ease-in-out;
}

.side-menu.open {
  left: 0; /* desliza para dentro da tela */
}

.close-btn {
  align-self: flex-end;
  background: none;
  border: none;
  font-size: 22px;
  color: #4a3f33;
  cursor: pointer;
  margin-bottom: 20px;
  padding: 0;
}

.close-btn:hover {
  opacity: 0.6;
}

.side-menu a {
  color: #4a3f33;
  text-decoration: none;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.side-menu a:hover {
  text-decoration: underline;
}

/* ===== Aviso de diagnóstico (mostra erro de carregamento do vídeo) ===== */
.debug-msg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background: rgba(200, 30, 30, 0.9);
  color: #fff;
  padding: 16px 24px;
  border-radius: 8px;
  font-size: 14px;
  max-width: 80%;
  text-align: center;
  line-height: 1.5;
}

/* Versão do aviso de erro para seções normais (não tela cheia) */
#debugMsgEquipe {
  position: static;
  transform: none;
  background: rgba(200, 30, 30, 0.9);
  color: #fff;
  padding: 16px 24px;
  border-radius: 8px;
  font-size: 14px;
  text-align: left;
  line-height: 1.5;
  margin-bottom: 40px;
}

/* ===== Setas de navegação (aparecem ao passar o mouse), reutilizadas em
   TODOS os carrosséis de foto/vídeo do site ===== */
.seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  background: none;
  border: none;
  color: #d2cfb9; /* mesmo tom claro usado nos textos do site */
  font-size: 38px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 10px;
}

/* A seta só aparece quando o mouse está sobre a foto/vídeo */
.hero:hover .seta,
.jornada-fotos:hover .seta,
.planejamento-fotos:hover .seta,
.roteiro-fotos:hover .seta,
.insider-fotos:hover .seta,
.gp-fotos:hover .seta {
  opacity: 1;
}

.seta-esq {
  left: 14px;
}

.seta-dir {
  right: 14px;
}


/* ===== Logo + tagline centralizados na capa de vídeos (página Início) ===== */
.hero-identidade {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.hero-logo {
  height: 270px;
  width: 100%;
  object-fit: contain;
}

.hero-tagline {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 300;
  font-size: 35px;
  text-transform: uppercase;
  letter-spacing: 0.525em;
  color: #bdb8a1;
  margin: 0;
  white-space: nowrap;
}

/* ===== Bolinhas de navegação dos vídeos ===== */
.dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 12px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.3s;
}

.dot.active {
  background: #fff;
}

/* ===== Responsivo (telas pequenas) ===== */
@media (max-width: 768px) {
  .topbar {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .seta {
    font-size: 28px;
    padding: 6px;
  }
}

/* ===================== SEÇÃO "SOBRE" ===================== */
.sobre {
  background: #f4f1ea;
  padding: 80px 90px;
}

.sobre-conteudo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* Bloco das imagens, com o efeito de colagem (uma foto sobrepondo a outra) */
.sobre-imagens {
  position: relative;
  min-height: 510px;
  transform: translateY(-25px);
}

.sobre-imagens img.img-1,
.sobre-imagens img.img-2 {
  position: absolute;
  height: auto;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.sobre-imagens .img-1 {
  top: 0;
  left: 0;
  width: 48%;
  z-index: 2;
}

.sobre-imagens .img-2 {
  top: 38%;
  left: 42%;
  width: 50%;
  z-index: 1;
}

.ilustracao {
  position: absolute;
  width: auto;
  height: auto;
  /* Se o arquivo PNG tiver fundo branco em vez de transparente, este
     "mix-blend-mode" faz o branco se misturar com o fundo bege e desaparecer
     visualmente. Se a sua imagem já for 100% transparente, pode remover esta
     linha sem problema. */
  mix-blend-mode: multiply;
}

.ilustracao.balao {
  width: 225px;
  top: -11%;
  left: 38%;
  z-index: 3;
}

.ilustracao.trem {
  width: 330px;
  bottom: -8%;
  left: -2%;
  z-index: 3;
}

/* Texto ao lado das imagens */
.sobre-texto h2 {
  font-family: 'Noto Serif Display', serif;
  font-stretch: condensed;
  font-weight: 600;
  font-size: 56px;
  line-height: 1.15;
  color: #5c3a3a;
  margin-bottom: 32px;
}

.sobre-texto p {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: #3f3a35;
  margin-bottom: 20px;
}

.sobre-texto .sobre-frase {
  font-style: italic;
  margin-top: 10px;
}

.saiba-mais {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 1px;
  color: #3f3a35;
  text-decoration: none;
  border-bottom: 1px solid #3f3a35;
  padding-bottom: 4px;
}

.saiba-mais:hover {
  opacity: 0.7;
}

/* ===================== SEÇÃO DE FRASE (FUNDO VERDE) ===================== */
.frase-verde {
  background: #4b4a39;
  padding: 130px 40px;
  text-align: center;
}

.frase-verde p {
  font-family: 'Beautifully Delicious Script', 'Lavishly Yours', cursive;
  color: #e9e4d3;
  font-size: 150px;
  line-height: 1.3;
  max-width: 1300px;
  margin: 0 auto;
}

/* ===================== SEÇÃO EQUIPE ===================== */
.equipe {
  background: #f4f1ea;
  padding: 60px 90px 70px;
}

.equipe-conteudo {
  max-width: 1260px;
  margin: 0 auto;
}

.equipe-titulo {
  font-family: 'Noto Serif Display', serif;
  font-stretch: condensed;
  font-weight: 600;
  font-size: 56px;
  color: #5c3a3a;
  text-align: center;
  margin-bottom: 56px;
}

.equipe-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: start;
}

/* Foto em grupo, grande, e frase cursiva abaixo */
.equipe-grupo {
  display: flex;
  flex-direction: column;
}

.equipe-grupo img {
  width: 92%;
  height: auto;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: block;
  margin: 0 auto;
}

.equipe-frase {
  font-family: 'Beautifully Delicious Script', 'Lavishly Yours', cursive;
  font-size: 68px;
  color: #2e2a25;
  margin-top: 32px;
  white-space: nowrap; /* garante que a frase fique em uma única linha */
}

/* Lista de pessoas, distribuída de forma equidistante na altura da foto */
.equipe-lista {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 50px; /* espaço mínimo garantido entre cada pessoa */
  height: 100%;
  margin-top: -30px; /* sobe sutilmente o grupo para aproximar do topo */
}

.equipe-membro {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

/* Wrapper circular que age como "lente" — a foto fica maior que o
   círculo por dentro, dando um zoom automático no centro da imagem */
.equipe-foto-wrap {
  width: 130px;
  height: 130px;
  min-width: 130px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.equipe-foto {
  width: 140%;
  height: 140%;
  margin-left: -20%;
  margin-top: -20%;
  object-fit: cover;
  object-position: center 30%;
}

.equipe-texto h3 {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #2e2a25;
  margin-bottom: 6px;
  white-space: nowrap; /* nome e sobrenome sempre na mesma linha */
}

/* Ajuste específico para nomes mais longos, garantindo que caibam em uma linha */
.nome-compacto {
  font-size: 18px;
  letter-spacing: -0.3px;
}

.equipe-funcao {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  font-style: italic;
  color: #5c3a3a;
  margin-bottom: 10px;
}

.equipe-descricao {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 15px;
  font-style: italic;
  line-height: 1.5;
  color: #3f3a35;
}

/* ===================== SEÇÃO CREDIBILIDADE ===================== */
.credibilidade {
  position: relative;
  width: 100%;
  min-height: 640px;
  overflow: hidden;
}

.credibilidade-foto {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Caixa vinho com a lista de números/credenciais */
.credibilidade-caixa {
  position: absolute;
  top: 50%;
  right: 60px;
  transform: translateY(-50%);
  background: rgba(74, 20, 20, 0.92);
  padding: 50px 60px;
  max-width: 560px;
  z-index: 2;
}

.credibilidade-caixa ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.credibilidade-caixa li {
  display: flex;
  align-items: center;
  gap: 20px;
}

.credibilidade-caixa .bullet {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  position: relative;
  flex-shrink: 0;
}

.credibilidade-caixa .bullet::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  background: #1a1a1a;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.credibilidade-caixa li span:last-child {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 16px;
  text-transform: uppercase;
  color: #fff;
}

/* ===================== SEÇÃO DEPOIMENTOS ===================== */
.depoimentos {
  position: relative;
  background: #f4f1ea;
  padding: 70px 90px 160px;
}

.depoimentos-conteudo {
  max-width: 1260px;
  margin: 0 auto;
}

.depoimentos-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  column-gap: 50px;
  align-items: stretch; /* as duas colunas ficam com a mesma altura */
}

.depoimentos-titulo-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* título no topo, selo embaixo */
  height: 100%;
}

.depoimentos-titulo {
  font-family: 'Noto Serif Display', serif;
  font-stretch: condensed;
  font-weight: 600;
  font-size: 56px;
  line-height: 1.15;
  color: #5c3a3a;
}

/* Lista vertical com os 3 depoimentos, do lado direito */
.depoimentos-lista {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.depoimento-texto {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #3f3a35;
  margin-bottom: 18px;
}

.depoimento-autor {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #3f3a35;
}

.depoimentos-saiba-mais {
  margin-top: 10px;
}

/* ===================== SEÇÃO CONTATO ===================== */
.contato {
  background: #f4f1ea;
  padding: 70px 90px 40px;
}

/* Só na página Explore: mais espaço entre o último bloco (Brasil com S)
   e o Fale Conosco */
.contato-explore {
  padding-top: 160px;
}

/* Dentro da aba Serviços, o contato também precisa reservar espaço
   à esquerda, por causa da margem de listras que continua até aqui */
.servicos-paginas .contato {
  padding-left: 200px;
}

.contato-conteudo {
  max-width: 1260px;
  margin: 0 auto;
}

.contato-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.contato-titulo {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.5px;
  color: #2e2a25;
  margin-bottom: 26px;
}

.contato-linha {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 15px;
  color: #3f3a35;
  margin-bottom: 6px;
}

.contato-linha strong {
  font-weight: 700;
}

.contato-paragrafo {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #3f3a35;
  margin-top: 18px;
  margin-bottom: 34px;
  white-space: nowrap; /* mantém "São Paulo - SP e Goiânia - GO" em uma única linha */
}

.contato-botao {
  display: inline-block;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: #2e2a25;
  border: 1px solid #2e2a25;
  padding: 16px 28px;
  margin-bottom: 40px;
}

.contato-botao:hover {
  background: #2e2a25;
  color: #f4f1ea;
}

.contato-redes {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  color: #3f3a35;
}

.icone-instagram {
  color: #3f3a35;
  display: flex;
}

.icone-instagram:hover {
  opacity: 0.7;
}

/* Ilustração da janela + frase */
.contato-ilustracao {
  max-width: 420px;
  margin-left: auto;  /* empurra o bloco inteiro (janela + frase) para a direita */
  margin-right: 0;
  text-align: center; /* dentro do bloco, janela e frase ficam centralizadas entre si */
}

.contato-ilustracao img {
  display: block;
  width: 100%;
  margin: 0 auto;
}

.contato-frase {
  font-family: 'Bethany Elingston', 'Noto Serif Display', serif;
  font-style: normal;
  text-transform: lowercase;
  font-size: 22px;
  color: #d2cfb9;
  margin-top: 16px;
  text-align: center;
}

/* Rodapé */
.contato-linha-divisoria {
  border: none;
  border-top: 1px solid rgba(46, 42, 37, 0.25);
  margin: 70px 0 24px;
}

.contato-copyright {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: #6b655c;
  max-width: 900px;
}

/* ===================== RESPONSIVO DAS NOVAS SEÇÕES ===================== */
@media (max-width: 900px) {
  .sobre {
    padding: 70px 26px;
  }

  .sobre-conteudo {
    grid-template-columns: 1fr;
  }

  .sobre-imagens {
    min-height: 360px;
    margin-bottom: 20px;
  }

  .frase-verde {
    padding: 90px 24px;
  }

  .frase-verde p {
    font-size: 32px;
  }

  .equipe-frase {
    white-space: normal;
  }

  .equipe {
    padding: 60px 26px 80px;
  }

  .equipe-titulo {
    font-size: 38px;
    margin-bottom: 40px;
  }

  .equipe-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .equipe-lista {
    gap: 30px;
  }

  .credibilidade {
    min-height: 520px;
  }

  .credibilidade-caixa {
    right: 20px;
    left: 20px;
    max-width: none;
    padding: 30px 26px;
  }

  .credibilidade-caixa li span:last-child {
    font-size: 13px;
  }

  .depoimentos {
    padding: 70px 26px 90px;
  }

  .depoimentos-grid {
    grid-template-columns: 1fr;
  }

  .depoimentos-titulo {
    font-size: 38px;
    padding-left: 0;
    margin-bottom: 40px;
  }

  .depoimentos-lista {
    gap: 40px;
  }

  .depoimentos-titulo-col {
    height: auto;
  }

  .contato {
    padding: 70px 26px 40px;
  }

  .contato-explore {
    padding-top: 45px;
  }

  .servicos-paginas .contato {
    padding-left: 130px;
    padding-top: 120px;
  }

  .contato-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .contato-ilustracao {
    order: -1;
    margin-left: auto;
    margin-right: auto;
  }

  .contato-frase {
    text-align: center;
  }

  .contato-paragrafo {
    white-space: normal;
  }

  .contato-linha-divisoria {
    margin: 50px 0 20px;
  }
}

/* ===================== SEÇÃO "PLANEJAMENTO" (ESPELHADA DA JORNADA) ===================== */
.planejamento {
  position: relative;
  background: #f4f1ea;
  padding: 5px 90px 5px 200px; /* mesmo espaço extra à esquerda, por causa da margem de azulejos */
}

.planejamento-conteudo {
  position: relative;
  max-width: 1150px;
  margin: 0 auto;
  min-height: 620px;
  display: flex;
  justify-content: flex-end; /* o grupo fica encostado à direita, espelhando a jornada */
}

/* Agrupa caixa + ilustração + fotos, com a mesma margem usada na seção
   anterior, só que agora do lado direito */
.planejamento-grupo {
  position: relative;
  width: 840px;
  margin-right: 5px;
}

/* Caixa verde: mesmo tamanho do quadrado vinho da seção anterior, agora
   centralizada verticalmente em relação à foto */
.planejamento-caixa {
  position: absolute;
  top: 30px;
  left: 40px;
  width: 440px;
  height: 440px;
  background: #5d6a54;
  color: #fff;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 50px;
}

.planejamento-caixa p {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  text-align: justify;
}

/* Ilustração: agora na parte inferior do quadrado (espelhando a posição
   da seção anterior), com a mesma sobreposição sutil */
.planejamento-ilustracao {
  position: absolute;
  bottom: -15px;
  left: 240px;
  width: 280px;
  z-index: 3;
}

/* Foto: mesma largura/proporção da foto anterior, com a MESMA margem de
   sobreposição mínima (40px) sobre o quadrado, espelhada */
.planejamento-fotos {
  position: absolute;
  top: 0;
  left: 440px;
  width: 400px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  z-index: 1;
}

.planejamento-foto {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.planejamento-foto.active {
  opacity: 1;
}

.planejamento-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 10px;
}

.planejamento-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.3s;
}

.planejamento-dots .dot.active {
  background: #fff;
}

@media (max-width: 900px) {
  .planejamento {
    padding: 10px 26px 15px 130px;
  }

  .planejamento-conteudo {
    min-height: 0;
    display: block;
  }

  .planejamento-grupo {
    width: 100%;
    margin-right: 0;
  }

  .planejamento-fotos {
    position: relative;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .planejamento-caixa {
    position: relative;
    top: -40px;
    left: auto;
    width: 90%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
    padding: 40px 26px;
  }

  .planejamento-ilustracao {
    position: relative;
    top: auto;
    left: auto;
    width: 160px;
    margin: 20px auto -60px;
    display: block;
  }
}

/* ===================== SEÇÃO "ROTEIRO AUTORAL" ===================== */
.roteiro {
  position: relative;
  background: #f4f1ea;
  padding: 5px 90px 5px 200px; /* mesmo espaço extra à esquerda, por causa da margem de azulejos */
}

.roteiro-conteudo {
  position: relative;
  max-width: 1150px;
  margin: 0 auto;
  min-height: 620px;
  display: flex;
}

.roteiro-grupo {
  position: relative;
  width: 840px;
  margin-left: 5px;
}

/* Foto: mesmo tamanho/proporção das seções anteriores */
.roteiro-fotos {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  z-index: 1;
}

.roteiro-foto {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.roteiro-foto.active {
  opacity: 1;
}

.roteiro-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 10px;
}

.roteiro-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.3s;
}

.roteiro-dots .dot.active {
  background: #fff;
}

/* Caixa vinho: mesmo tamanho/sobreposição (40px) das outras seções,
   centralizada verticalmente em relação à foto */
.roteiro-caixa {
  position: absolute;
  top: 30px;
  left: 360px;
  width: 440px;
  height: 440px;
  background: #4a1410;
  color: #fff;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 50px;
}

.roteiro-caixa p {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  text-align: justify;
}

/* Ilustração: na parte de baixo da caixa, igual às demais seções */
.roteiro-ilustracao {
  position: absolute;
  bottom: -25px;
  left: 305px;
  width: 280px;
  z-index: 3;
}

.roteiro-saiba-mais {
  position: absolute;
  bottom: 150px; /* mesma altura da margem inferior do quadro vinho */
  right: 20px;
}

@media (max-width: 900px) {
  .roteiro {
    padding: 10px 26px 15px 130px;
  }

  .roteiro-conteudo {
    min-height: 0;
    display: block;
  }

  .roteiro-grupo {
    width: 100%;
    margin-left: 0;
  }

  .roteiro-fotos {
    position: relative;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .roteiro-caixa {
    position: relative;
    top: -40px;
    left: auto;
    width: 90%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
    padding: 40px 26px;
  }

  .roteiro-ilustracao {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    width: 160px;
    margin: -60px auto 0;
    display: block;
  }

  .roteiro-saiba-mais {
    position: relative;
    bottom: auto;
    right: auto;
    display: block;
    text-align: right;
    margin-top: 20px;
  }
}

/* ===================== SEÇÃO "INSIDER GEMS" (ESPELHADA, IGUAL AO PLANEJAMENTO) ===================== */
.insider {
  position: relative;
  background: #f4f1ea;
  padding: 5px 90px 90px 200px; /* mesmo espaço extra à esquerda, por causa da margem de azulejos */
}

.insider-conteudo {
  position: relative;
  max-width: 1150px;
  margin: 0 auto;
  min-height: 620px;
  display: flex;
  justify-content: flex-end;
}

.insider-grupo {
  position: relative;
  width: 840px;
  margin-right: 5px;
}

.insider-caixa {
  position: absolute;
  top: 30px;
  left: 40px;
  width: 440px;
  height: 440px;
  background: #5d6a54;
  color: #fff;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px;
  gap: 16px;
}

.insider-caixa p {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  text-align: justify;
}

.insider-contratado {
  margin-top: auto;
  font-size: 12px !important;
  opacity: 0.85;
}

.insider-ilustracao {
  position: absolute;
  bottom: -15px;
  left: 240px;
  width: 280px;
  z-index: 3;
}

.insider-fotos {
  position: absolute;
  top: 0;
  left: 440px;
  width: 400px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  z-index: 1;
}

.insider-foto {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.insider-foto.active {
  opacity: 1;
}

.insider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 10px;
}

.insider-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.3s;
}

.insider-dots .dot.active {
  background: #fff;
}

@media (max-width: 900px) {
  .insider {
    padding: 10px 26px 15px 130px;
  }

  .insider-conteudo {
    min-height: 0;
    display: block;
  }

  .insider-grupo {
    width: 100%;
    margin-right: 0;
  }

  .insider-fotos {
    position: relative;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .insider-caixa {
    position: relative;
    top: -40px;
    left: auto;
    width: 90%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
    padding: 40px 26px;
  }

  .insider-ilustracao {
    position: relative;
    bottom: auto;
    left: auto;
    width: 160px;
    margin: 20px auto -60px;
    display: block;
  }
}

/* ===================== SEÇÃO "INSIDER GEMS" (PÁGINA COM COLAGEM) ===================== */
.insider-info {
  position: relative;
  background: #f4f1ea;
  padding: 50px 90px 10px 200px; /* mesmo espaço extra à esquerda, por causa da margem de azulejos */
}

.insider-info-conteudo {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 60px;
  align-items: stretch;
}

/* ===== Colagem de 5 fotos sobrepostas ===== */
.insider-colagem {
  position: relative;
  width: 100%;
  min-height: 520px;
  top: -210px;
  margin-left: -80px;
}

.ig-foto {
  position: absolute;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
}

/* Foto única (mobile): escondida no desktop, some no lugar da colagem */
.ig-foto-mobile {
  display: none;
}

/* Foto 1: grande, à esquerda, levemente inclinada para a esquerda */
.ig-foto-1 {
  width: 60%;
  height: 50%;
  top: 65%;
  left: -5%;
  transform: rotate(0deg);
  z-index: 4;
}

/* Foto 2: grande, 0 graus, sobrepondo a foto 3 */
.ig-foto-2 {
  width: 75%;
  height: 65%;
  top: 16.7%;
  left: 7%;
  transform: rotate(0deg);
  z-index: 2;
}

/* Foto 3: grande, margem direita, alinhada ao topo do título Insider Gems */
.ig-foto-3 {
  width: 58%;
  height: 52%;
  top: 10%;
  right: -18.5%;
  transform: rotate(0deg);
  z-index: 1;
}

/* Foto 4: grande, 0 graus, margem direita, topo sobrepondo levemente a lateral direita da foto 2 */
.ig-foto-4 {
  width: 70%;
  height: 60%;
  top: 60%;
  right: -20.2%;
  transform: rotate(0deg);
  z-index: 3;
}

/* Foto 5: inferior direita */
.ig-foto-5 {
  width: 50%;
  height: 46%;
  top: 75%;
  bottom: -25%;
  right: 29%;
  transform: rotate(-2deg);
  z-index: 5;
}

.insider-info-texto {
  position: relative;
  top: -30px;
}

.insider-info-texto h2 {
  font-family: 'Noto Serif Display', serif;
  font-stretch: condensed;
  font-weight: 600;
  font-size: 56px;
  color: #5c3a3a;
  margin-bottom: 24px;
  text-align: center;
}

.insider-info-texto p {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #3f3a35;
  margin-bottom: 20px;
  text-align: justify;
  text-align-last: center;
}

.insider-info-saiba-mais {
  margin-top: 80px;
}

@media (max-width: 900px) {
  .insider-info-saiba-mais {
    margin-top: 20px;
  }

  .insider-info {
    padding: 15px 26px 15px 130px;
  }

  .insider-info-conteudo {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .insider-info-texto h2 {
    font-size: 38px;
  }

  .insider-colagem {
    min-height: 0;
    top: 0;
    margin-left: 0;
  }

  .ig-foto-1, .ig-foto-2, .ig-foto-3, .ig-foto-4, .ig-foto-5 {
    display: none;
  }

  .ig-foto-mobile {
    display: block;
    position: relative;
    width: 85%;
    max-width: 340px;
    margin: 0 auto 40px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: transparent;
  }
}

/* ===================== SEÇÃO "ETAPAS DO PROCESSO" ===================== */
.etapas {
  position: relative;
  background: #f4f1ea;
  padding: 5px 90px 180px 200px; /* mesmo espaço extra à esquerda, por causa da margem */
}

.etapas-conteudo {
  position: relative;
  max-width: 1150px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
}

.etapas-texto h2 {
  font-family: 'Noto Serif Display', serif;
  font-stretch: condensed;
  font-weight: 600;
  font-size: 56px;
  line-height: 1.15;
  color: #5c3a3a;
  margin-bottom: 28px;
  text-align: center;
}

.etapas-texto p {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #3f3a35;
  margin-bottom: 20px;
  text-align: justify;
  text-align-last: center;
}

/* Lista de etapas, com marcadores simples */
.etapas-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-top: 14px;
  padding-left: 50px;
}

.etapas-lista li {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #3f3a35;
  position: relative;
  padding-left: 22px;
}

.etapas-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5c3a3a;
}

.etapas-selo {
  position: absolute;
  bottom: 25px;
  right: -25px;
  width: 90px;
}

@media (max-width: 900px) {
  .etapas {
    padding: 10px 26px 20px 130px;
  }

  .etapas-conteudo {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .etapas-texto h2 {
    font-size: 38px;
  }

  .etapas-lista {
    width: fit-content;
    margin: 0 auto;
    padding-left: 0;
  }

  .etapas-selo {
    position: relative;
    right: auto;
    bottom: auto;
    margin: 5px 0 0 auto;
    display: block;
  }
}

/* ===================== SEÇÃO "MAIS SERVIÇOS" ===================== */
.mais-servicos {
  position: relative;
  background: #f4f1ea;
  padding: 30px 90px 100px 200px; /* mesmo espaço extra à esquerda, por causa da margem */
}

.mais-servicos-conteudo {
  max-width: 1150px;
  margin: 0 auto;
}

.mais-servicos-conteudo h2 {
  font-family: 'Noto Serif Display', serif;
  font-stretch: condensed;
  font-weight: 600;
  font-size: 56px;
  color: #5c3a3a;
  text-align: center;
  margin-bottom: 50px;
}

.mais-servicos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
}

.mais-servicos-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  margin-bottom: 20px;
}

.mais-servicos-item h3 {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #3f3a35;
  text-align: center;
  margin-bottom: 12px;
}

.mais-servicos-link {
  display: block;
  text-align: center;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #5c3a3a;
  text-decoration: none;
}

.mais-servicos-link::after {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: #5c3a3a;
  margin: 6px auto 0;
}

.mais-servicos-link:hover {
  opacity: 0.7;
}

@media (max-width: 900px) {
  .mais-servicos {
    padding: 10px 26px 20px 130px;
  }

  .mais-servicos-conteudo h2 {
    font-size: 38px;
  }

  .mais-servicos-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .mais-servicos-item h3 {
    font-size: 13px;
  }

  .mais-servicos-link {
    font-size: 10px;
  }
}

/* ===================== SEÇÃO "GRUPOS PEQUENOS" (aba Explore) ===================== */
.grupos-pequenos {
  display: grid;
  grid-template-columns: 1fr 1.4fr 0.6fr;
  min-height: 600px;
}

/* Coluna 1: carrossel grande de fotos */
.gp-fotos {
  position: relative;
  overflow: hidden;
}

.gp-fotos picture {
  display: contents;
}

.gp-foto {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.gp-foto.active {
  opacity: 1;
}

.gp-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 10px;
}

.gp-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.3s;
}

.gp-dots .dot.active {
  background: #fff;
}

/* Coluna 2: texto */
.gp-texto {
  background: #f4f1ea;
  padding: 60px 50px 60px 70px;
  display: flex;
  flex-direction: column;
}

.gp-texto h2 {
  font-family: 'Noto Serif Display', serif;
  font-stretch: condensed;
  font-weight: 600;
  font-size: 56px;
  color: #5c3a3a;
  margin-bottom: 22px;
}

.gp-texto p {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #3f3a35;
  margin-top: auto;
  margin-bottom: auto;
  text-align: left;
}

.gp-ilustracao-foto {
  position: relative;
  margin-top: 60px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
}

.gp-ilustracao {
  position: relative;
  width: 320px;
  z-index: 2;
  order: 2;
  margin-left: -90px; /* sobrepõe a lateral direita da foto */
}

/* Modificador: mantém a ordem original (foto, depois ilustração
   sobrepondo a direita dela), mas desloca a ilustração mais para a
   esquerda (mais sobreposição sobre a foto) - Brasil com S */
.gp-ilustracao--direita {
  margin-left: -40px;
}

.gp-foto-secundaria {
  width: 65%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  order: 1;
}

.gp-titulo-unico {
  white-space: nowrap;
}

.gp-texto-proximo {
  margin-top: 4px !important;
  margin-bottom: auto;
}

.gp-saiba-mais {
  margin-top: 16px;
  margin-left: auto; /* alinhado à direita */
}

/* Coluna 3: barra lateral cáqui */
.gp-lateral {
  background: #a9925f;
  color: #fff;
  padding: 50px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}

.gp-lateral hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  margin: 0;
}

.gp-lateral-item h3 {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: left;
  margin-bottom: 14px;
}

.gp-lateral-item p {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 12.5px;
  line-height: 1.7;
  text-align: left;
}

@media (max-width: 900px) {
  .grupos-pequenos {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .gp-fotos {
    height: 360px;
  }

  .gp-texto {
    padding: 50px 26px;
  }

  .gp-texto h2 {
    font-size: 38px;
    text-align: center;
    white-space: nowrap;
  }

  .gp-texto h2 br {
    display: none;
  }

  .gp-texto p {
    text-align: justify;
    text-align-last: center;
  }

  .gp-ilustracao {
    width: 160px;
    margin-left: -45px;
  }

  .gp-ilustracao--direita {
    margin-left: -35px;
  }

  .gp-foto-secundaria {
    width: 80%;
    object-position: center;
  }

  .gp-lateral {
    padding: 50px 26px;
  }
}

/* ===================== CARROSSEL CONTÍNUO (20 FOTOS) ===================== */
.carrossel20-secao {
  background: #f4f1ea;
  padding: 140px 0 60px;
}

.carrossel20-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.carrossel20-track {
  display: flex;
  gap: 14px;
  width: max-content;
  will-change: transform;
}

.carrossel20-track img {
  width: 220px;
  height: 200px;
  object-fit: cover;
  flex-shrink: 0;
}

.carrossel20-wrap:hover .seta {
  opacity: 1;
}

@media (max-width: 768px) {
  .carrossel20-secao {
    padding: 40px 0 20px;
  }

  .carrossel20-track img {
    width: 150px;
    height: 140px;
  }
}

/* ===================== CAPA DE SERVIÇOS (CARROSSEL DE 6 FOTOS) ===================== */

/* Janela visível do carrossel: ocupa a tela inteira, igual à capa de vídeos */
.servicos-faixa {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Trilho com as 6 fotos lado a lado (600% de largura = 6 x 100%) */
.servicos-track {
  display: flex;
  width: 600%;
  height: 100%;
  transition: transform 0.9s ease-in-out;
}

/* O <picture> não deve gerar caixa própria no flex - assim o <img> dentro
   dele continua se comportando exatamente como antes (sem <picture>) */
.servicos-track picture {
  display: contents;
}

.servicos-slide {
  width: 16.6667%; /* 1/6 do trilho = exatamente a largura da tela */
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Selo fixo, sempre na mesma posição/proporção sobre as 6 fotos */
.servicos-selo {
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 90px;
  z-index: 3;
  opacity: 0.9;
}

@media (max-width: 768px) {
  .servicos-selo {
    width: 60px;
    bottom: 16px;
    right: 16px;
  }
}

/* ===================== MARGEM LATERAL (AZULEJOS) - aba Serviços ===================== */
.servicos-paginas {
  position: relative;
}

.servicos-margem {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 100%;
  z-index: 1;
  background-image: url('imagens/servicos/margem-1.jpg');
  background-repeat: repeat-y;
  background-size: 220px 700px;
  background-position: top left;
}

/* ===================== SEÇÃO "A JORNADA COM A CHEZ 21" ===================== */
.jornada {
  position: relative;
  background: #f4f1ea;
  padding: 90px 90px 5px 200px; /* espaço extra à esquerda, por causa da margem de azulejos */
}

.jornada-conteudo {
  position: relative;
  max-width: 1150px;
  margin: 0 auto;
  min-height: 620px;
  display: flex; /* importante: garante que o bloco abaixo "herde" a altura */
}

/* Agrupa fotos + quadrado + ilustração + saiba mais, posicionando o
   bloco inteiro com uma margem de 250px a partir da esquerda */
.jornada-grupo {
  position: relative;
  width: 840px;
  margin-left: 5px;
}

/* Foto: reduzida, mas um pouco maior que antes, com proporção parecida
   em tamanho com o quadrado vinho */
.jornada-fotos {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  z-index: 1;
}

.jornada-foto {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.jornada-foto.active {
  opacity: 1;
}

.jornada-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 10px;
}

.jornada-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.3s;
}

.jornada-dots .dot.active {
  background: #fff;
}

/* Caixa vinho: aumentada sutilmente, para caber o título em uma linha,
   e com sobreposição mínima sobre a foto (apenas uma margem) */
.jornada-caixa {
  position: absolute;
  top: 30px;
  left: 360px;
  width: 440px;
  height: 440px;
  background: #4a1410;
  color: #fff;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px;
}

.jornada-caixa h2 {
  font-family: 'Noto Serif Display', serif;
  font-stretch: condensed;
  font-weight: 600;
  font-size: 30px;
  white-space: nowrap; /* "A Jornada com a Chez 21" sempre em uma linha */
  text-align: center;
  margin-bottom: 22px;
}

.jornada-caixa p {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  text-align: justify;
}

/* Ilustração: deslocada mais para a direita, evitando ficar por cima das
   bolinhas do carrossel, com sobreposição sutil sobre o quadrado e a foto */
.jornada-ilustracao {
  position: absolute;
  bottom: -35px;
  left: 320px;
  width: 280px;
  z-index: 3;
}

.jornada-saiba-mais {
  position: absolute;
  bottom: 150px; /* mesma altura da margem inferior do quadrado vinho */
  right: 20px; /* quase encostado na margem direita da seção */
}

@media (max-width: 900px) {
  .jornada {
    padding: 60px 26px 15px 130px;
  }

  .jornada-conteudo {
    min-height: 0;
    display: block;
  }

  .jornada-grupo {
    width: 100%;
    margin-left: 0;
  }

  .jornada-fotos {
    position: relative;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .jornada-caixa {
    position: relative;
    top: -40px;
    left: auto;
    width: 90%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
    padding: 40px 26px 70px;
  }

  .jornada-ilustracao {
    position: relative;
    bottom: auto;
    left: auto;
    width: 160px;
    margin: -60px auto 0;
    display: block;
  }

  .jornada-saiba-mais {
    position: relative;
    left: auto;
    bottom: auto;
    display: block;
    text-align: right;
    margin-top: 20px;
  }

  .servicos-margem {
    width: 70px;
    background-size: 70px auto;
  }
}


.mobile-only { display: none; }

@media (max-width: 768px) {

  body { overflow-x: hidden; }

  .side-menu {
    transform: translateX(-100%);
    width: 85vw;
    max-width: 320px;
    transition: transform 0.3s ease;
  }
  .side-menu.open { transform: translateX(0); }

  /* ── TOPBAR: esconder TODOS os links, manter só MENU + PT/ENG ── */
  .topbar {
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 14px 16px;
    justify-content: space-between;
    align-items: center;
    gap: 0;
  }
  .topbar-left { gap: 10px; }
  .topbar-right { gap: 10px; }
  .topbar-left a.link { display: none; }
  .topbar-right a.link { display: none; }  /* esconde TODOS incluindo CONTATO */
  .topbar-left .link, .topbar-right .link, .lang { font-size: 10px; }

  /* ── HERO ── */
  .hero { height: 100svh; }
  .hero-video { object-position: center center; }
  .hero-identidade { top: 65%; left: 50%; width: 90%; transform: translate(-50%, -50%); gap: 12px; align-items: center; }
  .hero-logo { height: 70px; width: 100%; object-fit: contain; }
  .hero-tagline { font-size: 13px; letter-spacing: 0.3em; text-align: center; white-space: normal; }

  /* ── SOBRE ── */
  .sobre { padding: 50px 24px; }
  .sobre-conteudo { grid-template-columns: 1fr; gap: 50px; }
  .sobre-imagens { min-height: 300px; transform: none; }
  .ilustracao.balao { width: 110px; }
  .ilustracao.trem  { width: 170px; }
  .sobre-texto { text-align: justify; text-align-last: center; padding: 0 8px; }
  .sobre-texto h2 { font-size: 36px; text-align: center; }
  .sobre-texto p { font-size: 14px; text-align: justify; text-align-last: center; }
  .saiba-mais { margin: 10px auto 0; font-size: 9px; letter-spacing: 0.5px; padding-bottom: 2px; }

  /* ── FRASE VERDE ── */
  .frase-verde { padding: 40px 20px; }
  .frase-verde p { font-size: 50px; text-align: center; line-height: 1.2; white-space: normal; }

  /* ── EQUIPE ── */
  .mobile-only { display: inline; }
  .equipe { padding: 50px 20px; }
  .equipe-titulo { font-size: 36px; text-align: center; margin-bottom: 30px; }
  .equipe-grid { grid-template-columns: 1fr; gap: 40px; }
  .equipe-grupo img { width: 100%; height: 260px; object-fit: cover; }
  .equipe-frase { font-size: 55px; text-align: center; white-space: normal; line-height: 1.25; margin-top: 16px; }
  .equipe-lista { gap: 36px; margin-top: 0; }
  .equipe-membro { flex-direction: row; align-items: flex-start; gap: 16px; }
  .equipe-foto-wrap { width: 80px; height: 80px; min-width: 80px; }
  .equipe-texto h3 { font-size: 15px; }
  .equipe-funcao   { font-size: 11px; }
  .equipe-descricao { font-size: 12px; line-height: 1.6; }

  /* ── CREDIBILIDADE ── */
  .credibilidade { min-height: 400px; }
  .credibilidade-caixa { right: 10px; left: auto; top: 50%; transform: translateY(-50%); padding: 18px 14px; max-width: 52%; }
  .credibilidade-caixa ul { gap: 14px; }
  .credibilidade-caixa li span:last-child { font-size: 10px; letter-spacing: 0.4px; }
  .credibilidade-caixa .bullet { width: 12px; height: 12px; }

  /* ── DEPOIMENTOS ── */
  .depoimentos { padding: 50px 24px 80px; }
  .depoimentos-grid { grid-template-columns: 1fr; gap: 30px; }
  .depoimentos-titulo { font-size: 36px; text-align: center; }
  .depoimentos-lista { gap: 28px; }
  .depoimento-texto, .depoimento-autor { font-size: 13px; text-align: justify; text-align-last: center; padding: 0 4px; }

  /* ── CONTATO ── */
  .contato { padding: 40px 16px 30px; }
  .contato-explore { padding-top: 45px; }
  .contato-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; }
  .contato-texto    { order: 1; }
  .contato-ilustracao { order: 2; display: block; max-width: 100%; margin: 0; }
  .contato-titulo { font-size: 14px; letter-spacing: 0.8px; margin-bottom: 12px; white-space: nowrap; }
  .contato-linha, .contato-paragrafo { font-size: 10px; }
  .contato-paragrafo { white-space: normal; margin-bottom: 14px; margin-top: 10px; }
  .contato-botao { font-size: 11px; padding: 10px 16px; margin-bottom: 24px; letter-spacing: 0.8px; display: block; width: fit-content; }
  .contato-redes { font-size: 10px; gap: 8px; }
  .contato-ilustracao img { width: 85%; margin: 0 auto; }
  .contato-frase { font-size: 13px; margin-top: 8px; }
  .contato-copyright { font-size: 9px; text-align: center; }

  /* ── SERVIÇOS: remover margem lateral ── */
  .servicos-margem { display: none; }
  .jornada, .planejamento, .roteiro, .insider, .etapas,
  .insider-info, .mais-servicos, .servicos-paginas .contato {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ── CAIXAS COLORIDAS ── */
  .jornada-conteudo, .planejamento-conteudo,
  .roteiro-conteudo, .insider-conteudo { min-height: 0; display: flex; flex-direction: column; }

  /* Grupos: altura menor, fotos menores (retângulos) */
  .jornada-grupo, .roteiro-grupo { position: relative; width: 100%; margin-left: 0; min-height: 320px; }
  .planejamento-grupo, .insider-grupo { position: relative; width: 100%; margin-right: 0; min-height: 320px; }

  /* Fotos: retângulos menores, não ocupam 100% da altura */
  .jornada-fotos, .roteiro-fotos { position: absolute; width: 50%; height: 80%; top: 5%; left: 0; }
  .planejamento-fotos, .insider-fotos { position: absolute; width: 50%; height: 80%; top: 5%; right: 0; left: auto; }

  /* Caixas coloridas: quadradas, sobreposição menor sobre a foto */
  .jornada-caixa, .roteiro-caixa {
    position: absolute;
    width: 55%;
    aspect-ratio: 1/1;
    top: 15%;
    left: 45%;
    padding: 14px;
    overflow: hidden;
  }
  .planejamento-caixa, .insider-caixa {
    position: absolute;
    width: 55%;
    aspect-ratio: 1/1;
    top: 15%;
    right: 45%;
    left: auto;
    padding: 14px;
    overflow: hidden;
  }

  /* Título reduzido dentro dos quadrados */
  .jornada-caixa h2,
  .planejamento-caixa h2,
  .roteiro-caixa h2,
  .insider-caixa h2 { font-size: 14px; margin-bottom: 8px; white-space: nowrap; }

  /* Texto reduzido para caber no quadrado */
  .jornada-caixa p, .planejamento-caixa p,
  .roteiro-caixa p, .insider-caixa p {
    font-size: 8px;
    line-height: 1.5;
    text-align: justify;
    display: -webkit-box;
    -webkit-line-clamp: 9; /* limita linhas visíveis */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Selos: mesma posição do desktop (canto inferior direito) */
  .servicos-selo {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 45px;
    z-index: 3;
  }

  /* SAIBA MAIS / FALE CONOSCO: mesma posição do desktop */
  .jornada-saiba-mais {
    position: absolute;
    bottom: 30px;
    right: 10px;
  }

  .roteiro-saiba-mais {
    position: absolute;
    bottom: 25px;
    right: 10px;
  }

  /* Ilustrações: menores, mesma posição relativa do desktop */
  .jornada-ilustracao { position: absolute; bottom: 10px; left: 40%; width: 100px; z-index: 3; }
  .planejamento-ilustracao { position: absolute; bottom: 65px; left: 27%; width: 100px; z-index: 3; }
  .roteiro-ilustracao { position: absolute; bottom: 5px; left: 36%; width: 100px; z-index: 3; }
  .insider-ilustracao { position: absolute; bottom: 60px; left: 32%; width: 100px; z-index: 3; }

  /* ── ETAPAS ── */
  .etapas-conteudo { grid-template-columns: 1fr; gap: 20px; }
  .etapas-texto h2 { font-size: 32px; }
  .etapas-texto p { font-size: 12px; }
  .etapas-lista { padding-left: 20px; gap: 16px; }
  .etapas-lista li { font-size: 11px; letter-spacing: 0.5px; }
  .etapas-lista li::before { width: 6px; height: 6px; top: 5px; }
  .etapas-selo { width: 55px; right: 0; }

  /* ── INSIDER GEMS PÁGINA ── */
  .insider-info-conteudo { grid-template-columns: 1fr; gap: 20px; }
  .insider-colagem { min-height: 0; top: 0; margin-left: 0; }
  .ig-foto-1, .ig-foto-2, .ig-foto-3, .ig-foto-4, .ig-foto-5 { display: none; }
  .ig-foto-mobile { display: block; width: 85%; max-width: 340px; margin: 0 auto 40px; aspect-ratio: 1 / 1; object-fit: cover; background: transparent; }
  .insider-info-texto h2 { font-size: 32px; }
  .insider-info-texto p  { font-size: 12px; }

  /* ── MAIS SERVIÇOS ── */
  .mais-servicos { padding: 10px 20px; }
  .mais-servicos-grid { grid-template-columns: 1fr; gap: 30px; }
  .mais-servicos-conteudo h2 { font-size: 32px; }

  /* ── EXPLORE: grupos ── */
  .grupos-pequenos { grid-template-columns: 1fr; min-height: 0; }
  .gp-fotos { height: 260px; }
  .gp-texto { padding: 24px 20px; }
  .gp-texto h2 { font-size: 32px; }
  .gp-texto p { font-size: 12px; }
  .gp-lateral { padding: 24px 20px; }
  .gp-lateral-item h3 { font-size: 12px; }
  .gp-lateral-item p { font-size: 11px; }

  /* ── CARROSSEL 20 FOTOS ── */
  .carrossel20-track img { width: 140px; height: 120px; }
}

@media (max-width: 480px) {
  .hero-logo    { height: 52px; }
  .hero-tagline { font-size: 10px; letter-spacing: 0.2em; }
  .frase-verde p { font-size: 38px; }
  .equipe-frase  { font-size: 40px; }
  .credibilidade-caixa { max-width: 58%; padding: 12px 10px; }
  .credibilidade-caixa li span:last-child { font-size: 9px; }
  .contato-titulo { font-size: 12px; }
  .contato-botao { font-size: 10px; padding: 8px 14px; }
  .jornada-caixa p, .planejamento-caixa p, .roteiro-caixa p, .insider-caixa p { font-size: 9px; }
  .etapas-lista li { font-size: 10px; }
}