/* =========================================================================
   GLOBO — mapa interativo da apresentação (classes com prefixo gl-)
   ========================================================================= */

/* Uma coluna só, centralizada: abas, globo, números, bandeiras e — quando
   alguém escolhe um lugar — a galeria logo abaixo. Antes o globo ficava à
   esquerda e o painel à direita, o que jogava a seção toda para um lado. */
.globo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 900px;
  margin: 2.4rem auto 0;
}

/* seis bandeiras de cada lado, o globo maior no meio */
.gl-trio {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(1rem, 3vw, 2.4rem);
  align-items: center;
  width: 100%;
}
.so-bandeiras.coluna {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem .6rem; justify-items: center; max-width: none; margin: 0;
}
/* dentro da grade de três colunas a porcentagem não resolve: o tamanho do
   globo vem da largura da janela */
.gl-trio .gl-palco { width: clamp(270px, 30vw, 440px); }
.globo.com-galeria .gl-trio .gl-palco { width: clamp(220px, 22vw, 320px); }

.gl-palco {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1 / 1;
  /* navegador sem aspect-ratio (anterior a 2021) usaria altura zero aqui */
  min-height: 300px;
  display: grid;
  place-items: center;
}
.gl-palco canvas {
  display: block;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
}
.gl-palco canvas:active { cursor: grabbing; }

.gl-abas {
  display: inline-flex;
  gap: .3rem;
  padding: .3rem;
  border-radius: 999px;
  border: 1px solid var(--fina);
  margin-bottom: 1.6rem;
}
.gl-aba {
  padding: .62rem 1.3rem;
  border-radius: 999px;
  border: 0;
  background: none;
  color: var(--suave);
  font-size: .95rem;
  cursor: pointer;
  transition: background .25s, color .25s;
}
.gl-aba.ativa { background: var(--ouro); color: #14110E; font-weight: 600; }

.gl-ficha {
  margin-top: 1.2rem;
  padding: .85rem 1.1rem;
  border-left: 2px solid var(--ouro);
  background: linear-gradient(90deg, rgba(201,162,39,.08), transparent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s, transform .35s;
}
.gl-ficha.visivel { opacity: 1; transform: none; }
.gl-ficha strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: .25rem;
}
.gl-ficha span { color: var(--suave); font-size: .96rem; line-height: 1.5; }

.gl-legenda {
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  gap: .9rem;
  font-size: .82rem;
  color: var(--suave);
}
.gl-legenda i {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 3px;
  margin-right: .45rem;
  vertical-align: -1px;
  background: #8C6A2F;
  border: 1px solid #C9A227;
}
.gl-legenda i.fora { background: #2A2119; border-color: #3B3025; }

.gl-afastar {
  position: absolute;
  bottom: -4px; left: 50%;
  transform: translateX(-50%) translateY(8px);
  padding: .6rem 1.3rem;
  border-radius: 999px;
  border: 1px solid rgba(201,162,39,.5);
  background: rgba(20,17,14,.9);
  color: var(--ouro);
  font-size: .9rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.gl-afastar.visivel { opacity: 1; transform: translateX(-50%); pointer-events: auto; }

.gl-dica { color: var(--suave); font-size: .95rem; margin-bottom: 1.3rem; max-width: 30rem; }

.gl-numeros { display: flex; align-items: center; flex-wrap: wrap; gap: 1.6rem; }
.gl-numeros b {
  display: block;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ouro);
}
.gl-numeros > div > span { font-size: .8rem; color: var(--suave); }

@media (max-width: 980px), (max-aspect-ratio: 3/4) {
  
  .gl-palco { max-width: 460px; margin: 0 auto; width: 100%; }
}

/* ------------------------------------------------------------- celular */

@media (max-width: 980px), (max-aspect-ratio: 3/4) {
  .globo { gap: 1.6rem; }
  /* no telefone as abas vêm primeiro: primeiro escolher, depois olhar */
  
  .gl-abas { margin: 0 auto; display: flex; width: 100%; max-width: 360px; }
  .gl-aba { flex: 1; text-align: center; padding: .72rem .6rem; }
  
  .globo .gl-dica { margin: 1.2rem 0 0; text-align: center; }

  
}

@media (max-width: 560px) {
  .gl-palco { max-width: 330px; }
  .gl-numeros { gap: 1.1rem; }
  .gl-numeros b { font-size: 1.7rem; }
  .gl-ficha { margin-top: 1rem; padding: .8rem 1rem; }
  .gl-ficha strong { font-size: 1.15rem; }
  .gl-legenda { gap: .8rem; font-size: .78rem; }
  .gl-afastar { bottom: 2px; font-size: .84rem; padding: .5rem 1rem; }
}

/* ============================== a Kombi ============================== */

.gl-kombi {
  position: absolute;
  top: -5%;
  left: 50%;
  width: clamp(88px, 22%, 138px);
  transform: translateX(-50%) rotate(-4deg);
  z-index: 4;
  pointer-events: none;
  animation: kombi-flutua 4.6s ease-in-out infinite;
  /* sem camada própria, repintar o desenho vetorial a cada quadro derruba a
     página inteira — medido: 15 quadros por segundo contra 60 */
  will-change: transform;
  transform-origin: center;
}
@keyframes kombi-flutua {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-4deg); }
  50%      { transform: translateX(-50%) translateY(-7px) rotate(-1.5deg); }
}
.gl-kombi-cima  { fill: #E08A2B; }
.gl-kombi-baixo { fill: #16120F; }
.gl-kombi-faixa { fill: #F3E3C6; }
.gl-kombi-v     { fill: #F3E3C6; }
.gl-vidro       { fill: #6E8FA6; opacity: .85; }
.gl-farol       { fill: #FFE9B0; }
.gl-roda        { fill: #100D0B; }
.gl-calota      { fill: #C9A227; }
.gl-rack rect   { fill: #2A241E; }
.gl-bagagem-a   { fill: #8C6A2F !important; }
.gl-bagagem-b   { fill: #6B4526 !important; }
.gl-bagagem-c   { fill: #C9A227 !important; }
.gl-kombi-sombra { fill: rgba(0,0,0,.45); }

@media (prefers-reduced-motion: reduce) {
  .gl-kombi { animation: none; }
}

/* ============================== galeria ==============================
   Carrossel em profundidade: a foto do meio vem à frente e as vizinhas
   recuam, giradas. O globo, ao lado, é o menu — toca no país e a galeria
   troca de assunto. */

/* a galeria abre embaixo, em toda a largura. O globo e as bandeiras encolhem
   para que os três — globo, bandeiras e carrossel — caibam na mesma tela. */
.gl-galeria { display: none; width: 100%; }
.globo.com-galeria { gap: 1rem; }
.globo.com-galeria .gl-palco { width: min(100%, 300px); }
.globo.com-galeria .so-flag { width: 50px; height: 50px; }
.globo.com-galeria .so-pais { width: 80px; font-size: .68rem; gap: .35rem; }
.globo.com-galeria .gl-numeros { margin-bottom: 0; }
.globo.com-galeria .gl-trio { gap: clamp(.8rem, 2vw, 1.6rem); }
/* cabeçalho enxuto: o carrossel é o que interessa, e ele sobe */
.globo.com-galeria .gl-galeria-topo { margin-bottom: .5rem; }
.globo.com-galeria .gl-palco-fotos { height: clamp(230px, 28vw, 320px); }
.globo.com-galeria .gl-fichas-rot { margin-top: 1.1rem; }
.globo.com-galeria .gl-galeria { display: block; animation: gl-entra .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes gl-entra { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }

.gl-galeria-topo { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.gl-galeria-topo > div { flex: 1; }
.gl-galeria-topo .olho { margin-bottom: .2rem; }
.gl-galeria-topo h3 {
  margin: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.05;
}
.gl-fechar {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px;
  border: 1px solid var(--fina); background: none; color: var(--texto);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.gl-fechar:hover { border-color: var(--ouro); color: var(--ouro); }

/* fichas dos lugares: o mesmo caminho do globo, em forma de lista */
.gl-fichas { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.3rem; }
.gl-ficha-lugar {
  padding: .45rem 1rem; border-radius: 999px;
  border: 1px solid var(--fina); background: none;
  color: #CDC4B5; font-size: .88rem; cursor: pointer; white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.gl-ficha-lugar:hover { border-color: var(--ouro); transform: translateY(-2px); }
.gl-ficha-lugar.agora { background: var(--ouro); border-color: var(--ouro); color: #14110E; font-weight: 600; }

/* o palco do carrossel */
.gl-palco-fotos {
  position: relative;
  height: clamp(260px, 38vw, 400px);
  /* os cartões laterais passam da borda de propósito, mas sem este corte eles
     alargavam a página inteira e empurravam o resto do conteúdo */
  overflow: hidden;
  perspective: 1400px;
  touch-action: pan-y;
  cursor: grab;
}
.gl-palco-fotos.arrastando { cursor: grabbing; }

.gl-cartao {
  position: absolute; top: 50%; left: 50%;
  width: clamp(178px, 26vw, 268px);
  height: 340px;                       /* alternativa se aspect-ratio faltar */
  aspect-ratio: 3 / 4;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #241C15, #17120D);
  box-shadow: 0 26px 50px rgba(0,0,0,.6);
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2,.75,.25,1), opacity .55s, box-shadow .55s;
  will-change: transform;
}
.gl-cartao img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-cartao .gl-vazio {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; padding: 1.2rem; color: var(--suave); font-size: .9rem;
}
.gl-cartao::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,17,14,0) 55%, rgba(20,17,14,.55));
  opacity: 0; transition: opacity .5s;
}
.gl-cartao:not(.gl-meio)::after { opacity: 1; }

.gl-legenda-foto {
  margin: 1.1rem 0 .3rem; min-height: 1.5rem;
  font-family: var(--serif); font-size: 1.05rem; color: #CDC4B5; text-align: center;
}

.gl-controles { display: flex; align-items: center; justify-content: center; gap: 1.1rem; }
.gl-seta {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--fina); background: none; color: var(--texto);
  font-size: 1.1rem; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.gl-seta:hover { background: var(--ouro); border-color: var(--ouro); color: #14110E; }
.gl-conta { font-size: .85rem; color: var(--suave); letter-spacing: .08em; min-width: 62px; text-align: center; }

@media (max-width: 980px), (max-aspect-ratio: 3/4) {
  
  .globo.com-galeria .gl-palco { max-width: 190px; margin: 0 auto; }
  /* com a galeria aberta, as abas e os números saem de cena também no celular */
  .globo.com-galeria > .gl-lado { display: none; }
  
  .gl-galeria-topo h3 { font-size: 1.6rem; }
  .gl-palco-fotos { height: 300px; }
  .gl-cartao { width: 178px; }
}

/* com a galeria aberta o globo vira só o navegador, menor */
.globo.com-galeria .gl-palco { max-width: 280px; }
.globo.com-galeria .gl-afastar { display: none; }

/* ===================== foto ampliada (sem corte) ===================== */

.gl-cartao.gl-meio { cursor: zoom-in; }

.gl-lupa {
  position: fixed; inset: 0; z-index: 90;
  display: none;
  align-items: center; justify-content: center;
  gap: .5rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8, 6, 4, .94);
}
.gl-lupa.visivel { display: flex; animation: gl-lupa-entra .28s ease both; }
@keyframes gl-lupa-entra { from { opacity: 0; } to { opacity: 1; } }
body.gl-lupa-aberta { overflow: hidden; }

/* A foto ocupa todo o espaço disponível mantendo a proporção: as imagens do
   material são pequenas, e deixá-las no tamanho original sobrava moldura preta. */
.gl-lupa figure {
  margin: 0;
  width: min(1040px, 92vw);
  height: calc(100vh - 7rem);
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
}
.gl-lupa img {
  flex: 1; min-height: 0;
  width: 100%;
  object-fit: contain;              /* a imagem inteira, sem recorte */
  border-radius: 10px;
  filter: drop-shadow(0 24px 50px rgba(0,0,0,.6));
}
.gl-lupa figcaption {
  color: var(--suave); font-size: .92rem; text-align: center;
  font-family: var(--serif); font-style: italic;
}

.gl-lupa-fechar {
  position: absolute; top: 1rem; right: 1rem;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--fina); background: rgba(20,17,14,.7);
  color: var(--texto); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.gl-lupa-fechar:hover { border-color: var(--ouro); color: var(--ouro); }

.gl-lupa-seta {
  flex: 0 0 auto;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--fina); background: rgba(20,17,14,.6);
  color: var(--texto); font-size: 1.2rem; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.gl-lupa-seta:hover { background: var(--ouro); border-color: var(--ouro); color: #14110E; }

@media (max-width: 700px) {
  /* no telefone as setas descem para o rodapé e a foto fica com a tela inteira */
  .gl-lupa { padding: 3.4rem .7rem 5.4rem; }
  /* posição fixa em vez de flex: no telefone o cálculo do flex deixava a foto
     escapar uns pixels para fora da tela */
  .gl-lupa figure {
    position: absolute;
    inset: 3.4rem .7rem 5.2rem;
    width: auto; max-width: none; height: auto;
  }
  .gl-lupa img { width: 100%; height: 100%; object-fit: contain; }
  .gl-lupa-seta {
    position: absolute; bottom: 1.1rem;
    width: 48px; height: 48px;
  }
  .gl-lupa-seta.esq { left: calc(50% - 62px); }
  .gl-lupa-seta.dir { left: calc(50% + 14px); }
  .gl-lupa-fechar { top: .7rem; right: .7rem; width: 44px; height: 44px; }
  .gl-lupa figcaption { font-size: .85rem; padding: 0 .4rem; }
}

/* ------------------- seção unificada: globo + bandeiras ------------------- */

.secao.centrada { text-align: center; }
/* o título e o texto de apoio têm largura própria: sem margem automática
   eles ficam presos à esquerda mesmo com o texto centralizado */
.secao.centrada > .olho,
.secao.centrada > h2,
.secao.centrada > .intro { margin-left: auto; margin-right: auto; }
.secao.centrada > h2 { max-width: 16ch; }
.secao.centrada > .intro { max-width: 62ch; }
.secao.centrada .paises { text-align: left; }

.gl-abas { margin: 0; }
/* rótulo dos atalhos de estado, dentro da galeria */
.gl-fichas-rot {
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--suave); margin: 0 0 .5rem;
}
.gl-fichas-rot[hidden] { display: none; }
.gl-lado { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; }
.gl-numeros { justify-content: center; margin: 0; }
.gl-ficha:empty { display: none; }



/* telas estreitas: o globo em cima e as doze bandeiras numa grade única
   embaixo — o script junta tudo num container só nesse caso */
@media (max-width: 899px) {
  .globo { gap: 1.1rem; }
  .gl-trio { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; width: 100%; }
  .gl-palco { width: min(100%, 340px); order: 1; }
  .so-bandeiras.coluna { order: 2; display: flex; flex-wrap: wrap;
    justify-content: center; gap: .9rem .5rem; width: 100%; }
  .so-bandeiras.coluna:empty { display: none; }
  .globo.com-galeria .gl-palco { width: min(100%, 230px); }
}