/* ==========================================================================
   PontoAlto Viagens — folha de estilo única
   Paleta estritamente em escala de cinza (as fotos são o único ponto de cor)
   ========================================================================== */

/* ---- Variáveis: altere as cores e espaçamentos aqui ---- */
:root {
  --branco: #ffffff;
  --cinza-claro: #f5f5f5;
  --cinza-linha: #ededed;
  --cinza-medio: #9a9a9a;
  --grafite: #4a4a4a;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  /* Só a assinatura usa esta. Carregada apenas em especialidades.html. */
  --manuscrita: "Brush Script MT", "Yellowtail", "Segoe Script", cursive;

  --espaco-secao: 3.25rem;
  --max-largura: 1120px;
}

/* ---- Reset básico ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img { display: block; max-width: 100%; height: auto; }

body {
  background: var(--branco);
  color: var(--grafite);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* ---- Estruturas reutilizáveis ---- */
.container { width: 100%; max-width: var(--max-largura); margin: 0 auto; padding: 0 1.5rem; }
.container--narrow { max-width: 680px; }
.center { text-align: center; }

.section { padding: var(--espaco-secao) 0; }
.section--alt { background: var(--cinza-claro); }

.eyebrow {
  /* Explícito porque em especialidades.html o olho-de-texto é um <h1>, e sem
     isto ele herdaria o negrito padrão do navegador em vez do peso do site. */
  font-weight: 300;
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-bottom: 1rem;
}

.section__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.85rem, 4.5vw, 2.75rem);
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.lead { color: var(--cinza-medio); margin-bottom: 2.5rem; }

/* ==========================================================================
   1. HERO
   ========================================================================== */
.hero {
  position: relative;
  /* Só o logo mora aqui, então a altura é puramente conteúdo + padding. O
     min-height de 52svh que existia foi removido: sem título e sem subtítulo
     ele sobraria muito acima do logo e o hero viraria uma faixa quase vazia. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3.25rem 1rem 1.75rem;
  overflow: hidden;
  isolation: isolate; /* mantém o mix-blend-mode do logo preso ao hero */
  /* (a) Gradiente radial + (b) textura de grão — camadas de fundo */
  background-color: var(--branco);
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 48%,
      rgba(138,138,138,.055) 0%,
      rgba(138,138,138,.022) 45%,
      rgba(255,255,255,0) 78%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 220px 220px;
}

/* Logo oficial da cliente (625x285, proporção 2,19), único conteúdo do hero.
   A margem inferior saiu junto com o título: não há mais nada abaixo dele. */
.hero__logo {
  width: min(520px, 84vw);
  /* O arquivo tem 625x285, mas o desenho ocupa só de y=17 a y=211: sobram 6%
     de vazio no topo e 26% embaixo, que apareciam como recuo fantasma sob o
     logo. O aspect-ratio 625/194 mais object-fit recortam exatamente essas
     duas faixas — o reflexo do desenho continua inteiro. Se o arquivo do logo
     for trocado, refazer a medição, porque estes números são dele. */
  aspect-ratio: 625 / 194;
  object-fit: cover;
  object-position: center 19%;
  height: auto;
  /* ATENÇÃO: o logo-completo-junto.png tem canal alfa, mas o fundo está
     achatado em branco opaco (conferido: alpha 255, RGB 255,255,255 nos quatro
     cantos). Sem o multiply ele recorta um retângulo branco por cima da textura
     do hero. Só dá para remover esta linha quando a cliente entregar um arquivo
     com transparência de verdade. */
  mix-blend-mode: multiply;
}

/* Em telas estreitas o logo é centralizado e sua borda esquerda chega perto do
   botão do menu, que é fixo no canto. Medido: abaixo de ~536px o botão cobria
   a alça da mala. Um respiro maior no topo empurra o logo para baixo dele. */
@media (max-width: 560px) {
  .hero { padding-top: 5.25rem; }
}

/* ==========================================================================
   MENU SANDUÍCHE — botão redondo fixo + painel lateral
   Substituiu a barra de abas sob o hero. O botão é fixo porque, sem a barra,
   ele é a única navegação do site e precisa estar sempre alcançável.
   Fechado, o painel usa visibility:hidden (e não só transform): isso o tira
   da ordem de tabulação, senão o teclado entraria em links invisíveis.
   ========================================================================== */
.menu-btn {
  position: fixed;
  top: 1.25rem; left: 1.25rem;
  z-index: 60;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--cinza-medio);
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: var(--grafite);
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.menu-btn:hover { background: var(--grafite); color: var(--branco); border-color: var(--grafite); }
.menu-btn svg { width: 20px; height: 20px; display: block; }
.menu-btn .icone-fechar { display: none; }
.menu-btn.is-open .icone-abrir { display: none; }
.menu-btn.is-open .icone-fechar { display: block; }

.menu-overlay {
  position: fixed; inset: 0;
  z-index: 50;
  background: rgba(20,20,20,.35);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.menu-overlay.is-open { opacity: 1; visibility: visible; }

.menu-painel {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 55;
  width: min(320px, 82vw);
  padding: 6.5rem 2rem 2rem;
  background: var(--branco);
  border-right: 1px solid var(--cinza-linha);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), visibility .35s;
}
.menu-painel.is-open { transform: none; visibility: visible; }
.menu-painel ul { list-style: none; }
.menu-painel a {
  display: block;
  padding: .95rem 0;
  border-bottom: 1px solid var(--cinza-linha);
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  text-decoration: none;
  transition: color .3s ease;
}
.menu-painel a:hover { color: var(--grafite); }
.menu-painel a.is-active { color: var(--grafite); }

/* Trava a rolagem do fundo enquanto o painel está aberto. */
body.menu-aberto { overflow: hidden; }

/* ==========================================================================
   ESPECIALIDADES — duas colunas (texto à esquerda, coluna reservada à direita)
   ========================================================================== */
/* Título da seção em serifada, no mesmo corte de "Curadoria de roteiro", mas
   bem maior e centralizado. */
/* Os dois títulos de seção da página compartilham a mesma escala, para as
   duas seções terem o mesmo peso. Mexer aqui muda os dois de uma vez. */
.esp__titulo,
.curadoria__titulo {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.15;
}
.esp__titulo { text-align: center; margin-bottom: 2.75rem; }

/* As quatro frases saem das caixas e ficam só com um marcador: um pequeno
   círculo vazado, do mesmo cinza dos fios do site. O ::before é posicionado
   em vez de usar list-style para o texto de várias linhas manter o recuo
   alinhado, em vez de voltar para debaixo do marcador. */
.marcadores {
  list-style: none;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}
@media (min-width: 700px) {
  .marcadores { grid-template-columns: 1fr 1fr; gap: 1.9rem 3.5rem; }
}
.marcadores li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--grafite);
}
.marcadores li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px; height: 8px;
  border: 1px solid var(--cinza-medio);
  border-radius: 50%;
}

/* --- Grade 2x2 e cartões ----------------------------------------------------
   Os dois blocos da seção usam a mesma grade e o mesmo cartão; o que muda é só
   o modificador --icone, que acrescenta o ícone à esquerda. Cartões brancos
   sobre o cinza da seção já se separam do fundo sem precisar de sombra.
   align-items: stretch (padrão do grid) mantém a dupla de cada linha com a
   mesma altura, mesmo com textos de tamanhos diferentes. */
.cards-2x2 {
  list-style: none;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
}
@media (min-width: 700px) {
  .cards-2x2 { grid-template-columns: 1fr 1fr; gap: 1rem; }
}

.cartao {
  padding: 1.15rem 1.3rem;
  border: 1px solid rgba(154,154,154,.3);
  border-radius: 10px;
  /* Cinza por dentro: a seção da Curadoria é branca, então cartão branco
     sumiria no fundo e só a borda o denunciaria. */
  background: var(--cinza-claro);
  color: var(--grafite);
  font-size: .95rem;
  line-height: 1.55;
}
.cartao--icone { display: flex; align-items: flex-start; gap: 1rem; }
.cartao--icone svg {
  width: 22px; height: 22px;
  flex-shrink: 0;
  color: var(--cinza-medio);
  margin-top: .15rem;
}
.cartao--icone strong {
  display: block;
  font-weight: 500;
  color: var(--grafite);
}
.cartao--icone div { color: var(--cinza-medio); }

.curadoria__sub {
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  margin-top: .35rem;
}
.curadoria__intro {
  color: var(--grafite);
  /* auto nas laterais para o texto ficar centrado junto com o cabeçalho,
     em vez de encostar à esquerda dentro do container inteiro. */
  margin: 1.25rem auto 2.5rem;
  max-width: 62ch;
}

/* ==========================================================================
   2. QUEM SOMOS
   ========================================================================== */
.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
  justify-items: center;
  text-align: center;
}

/* Imagem de destaque em retrato 2:3. A foto oficial é 1200x1600 (3:4), então
   o object-fit recorta só as laterais — cerca de 5,5% da largura no total —
   sem editar o arquivo. O deslocamento horizontal que existia aqui era para
   escapar de uma tarja borrada da foto provisória; a foto atual não tem esse
   defeito, então voltou a ser centralizada. */
.about__photo-wrap {
  /* width: min(100px, 70vw); */
   float: right;
  width: 200px;
  aspect-ratio: 2 / 3;
  border: 1px solid var(--cinza-medio);
  padding: 8px;
  flex-shrink: 0;
  margin: .5rem 0 1.5rem 3rem;
}





.about__photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(15%);
}

.about__text p + p { margin-top: 1rem; }
.about__text p { color: var(--grafite); }

/* Citação de destaque — só tipografia, sem cor nova: serifada, itálica, com um
   fio vertical do mesmo cinza já usado nas bordas do site. Ganhou um pouco de
   corpo por ocupar uma faixa só dela. */
.about__quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.45rem, 3.4vw, 1.9rem);
  line-height: 1.35;
  color: var(--grafite);
  max-width: 32ch;
  margin: 2.5rem 0 0; /* fecha a seção: respiro em cima, nada embaixo */
  padding-left: 1.5rem;
  border-left: 1px solid var(--cinza-medio);
}


/* ==========================================================================
   ASSINATURA — seção que fecha a página
   ========================================================================== */
/* Agora fecha a seção da Curadoria, em vez de ocupar uma seção própria: por
   isso o respiro no topo, que antes vinha do padding da seção. */
.assinatura { text-align: center; margin-top: 3rem; }
/* Efeito de marca d'água: o nome recua para o cinza-médio, o mesmo dos fios e
   dos textos secundários do site, e perde corpo. Não fui além disso de
   propósito — é o nome dela, e clarear mais começa a comprometer a leitura. */
.assinatura__nome {
  font-family: var(--manuscrita);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  line-height: 1.2;
  color: var(--cinza-medio);
}
.assinatura__cargo {
  font-size: .95rem;
  color: var(--cinza-medio);
  margin-top: .4rem;
}

/* ==========================================================================
   3. GALERIA DE DESTINOS
   ========================================================================== */
.gallery { position: relative; margin-top: 3.5rem; padding: 0 1.5rem; }
.gallery .swiper { overflow: hidden; }

.card {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--cinza-linha);
  background: var(--cinza-claro);
}
.card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.card:hover img { transform: scale(1.03); }

/* Overlay em gradiente escuro apenas na base da foto */
.card__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3.5rem 1.5rem 1.4rem;
  background: linear-gradient(to top, rgba(20,20,20,.82), rgba(20,20,20,.35) 55%, rgba(20,20,20,0));
  color: #fff;
}
/* Só o nome do lugar mora na legenda; a margem inferior saiu junto com o
   parágrafo que existia abaixo dele. */
.card__caption h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.2;
}

/* Dots finos */
.gallery__dots {
  display: flex; justify-content: center; gap: .55rem;
  margin-top: 2rem;
}
.gallery__dots .swiper-pagination-bullet {
  width: 22px; height: 1px;
  border-radius: 0;
  background: var(--cinza-medio);
  opacity: .4;
  transition: opacity .3s ease, background .3s ease;
  margin: 0 !important;
}
.gallery__dots .swiper-pagination-bullet-active { opacity: 1; background: var(--grafite); }

/* Setas (somente desktop) */
.nav-arrow {
  display: none;
  position: absolute; top: 42%;
  width: 44px; height: 44px;
  border: 1px solid var(--cinza-medio);
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  cursor: pointer;
  z-index: 5;
  transition: border-color .3s ease, background .3s ease;
}
.nav-arrow::before {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px;
  border-top: 1px solid var(--grafite);
  border-right: 1px solid var(--grafite);
}
.nav-arrow--next::before { transform: translate(-65%, -50%) rotate(45deg); }
.nav-arrow--prev::before { transform: translate(-35%, -50%) rotate(-135deg); }
.nav-arrow:hover { background: #fff; border-color: var(--grafite); }
.nav-arrow.swiper-button-disabled { opacity: .25; cursor: default; }

/* ==========================================================================
   4. CONTATO E RODAPÉ
   ========================================================================== */
.btn-outline {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 2rem;
  border: 1px solid var(--grafite);
  border-radius: 2px;
  color: var(--grafite);
  text-decoration: none;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .3s ease, color .3s ease;
}
.btn-outline:hover { background: var(--grafite); color: var(--branco); }

/* Variante só com o ícone: sem rótulo, o padding lateral largo deixaria um
   retângulo vazio, então vira um botão quase quadrado e o ícone cresce de
   18px para 26px para sustentar sozinho o peso do elemento.
   O texto acessível vem do aria-label no HTML. */
.btn-outline--icone { padding: 1rem; gap: 0; }
.btn-outline--icone svg { width: 26px; height: 26px; }

/* Logo verde tradicional do WhatsApp. Diferente do .btn-outline, aqui o proprio
   logo e o botao: a moldura cinza em volta de um balao verde criava duas formas
   competindo. O <a> so da area de clique (48px, minimo confortavel para o dedo)
   e o hover levanta de leve em vez de inverter cor, para nao mexer no verde da
   marca. */
.btn-whats {
  display: inline-block;
  line-height: 0;
  border-radius: 50%;
  transition: transform .3s ease, filter .3s ease;
}
.btn-whats svg { width: 56px; height: 56px; display: block; }
.btn-whats:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn-whats:focus-visible { outline: 2px solid var(--grafite); outline-offset: 6px; }

.contact__mail { margin-top: 2rem; color: var(--cinza-medio); font-size: .95rem; }
.contact__mail a { color: var(--cinza-medio); text-decoration: none; border-bottom: 1px solid var(--cinza-linha); }
.contact__mail a:hover { color: var(--grafite); }

/* Rodapé de volta ao branco. Com a barra de navegação removida, o degrau cinza
   que ela ocupava saiu da sequência, e a alternância se reorganizou:
   hero(branco) → conteúdo(cinza) → rodapé(branco). */
.footer {
  padding: 3.5rem 1.5rem;
  text-align: center;
  border-top: 1px solid var(--cinza-linha);
  background: var(--branco);
}
/* O ícone da cliente tem apenas 48x48: exibir maior que isso borra. */
.footer img { width: 48px; margin: 0 auto .75rem; mix-blend-mode: multiply; }
.footer p { font-size: .75rem; letter-spacing: .1em; color: var(--cinza-medio); }
/* Rodapé cinza, usado só onde a página tem duas seções de conteúdo e a última
   delas é branca (especialidades.html). Sem isto, branco encostaria em branco
   e a alternância quebraria justo no fim da página. */
.footer--alt { background: var(--cinza-claro); border-top-color: transparent; }

/* ==========================================================================
   Animação suave de entrada no scroll
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Media queries (mobile-first)
   ========================================================================== */
@media (min-width: 768px) {
  :root { --espaco-secao: 4.25rem; }

  /* Texto contornando a foto: sai do grid (que não permite wrap ao redor de um
     item) para fluxo normal com float. flow-root contém o float, então a
     seção não colapsa quando o texto é mais curto que a foto. */
  .about {
    display: flow-root;
    text-align: left;
    /* Sem teto, o texto abaixo da foto ocuparia os ~1072px do container e
       passaria de 120 caracteres por linha. */
    max-width: 900px;
  }
  /* Imagem à direita, como no mockup, com o texto contornando. O texto novo é
     bem mais longo que a imagem é alta, então o float resolve melhor que um
     grid de duas colunas: as primeiras linhas correm ao lado e o restante
     ocupa a largura inteira, em vez de deixar um vazio à direita. */
  

  .card__caption { padding: 4.5rem 2rem 1.8rem; }
  .card__caption h3 { font-size: 2rem; }
}

@media (min-width: 1024px) {
  /* ------------------------------------------------------------------
     MENU FIXO NO DESKTOP — a partir daqui o painel deixa de ser gaveta e
     vira uma coluna permanente. O botao redondo e o overlay somem: com o
     painel sempre visivel eles nao teriam funcao, e o botao ainda ficaria
     por cima do proprio menu. Abaixo de 1024px nada muda — a gaveta com o
     botao hamburguer continua exatamente como estava.
     ------------------------------------------------------------------ */
  .menu-btn,
  .menu-overlay { display: none; }

  .menu-painel {
    transform: none;
    visibility: visible;
    width: 260px;
    /* Sem o botao redondo no canto, os 6.5rem de recuo superior viravam um
       vazio grande no topo da coluna. */
    padding: 3.25rem 2rem 2rem;
    overflow-y: auto;
  }

  /* Abre espaco para a coluna: o painel e fixed, entao nao empurra nada
     sozinho — sem isto ele cobriria a lateral esquerda do conteudo. */
  body { padding-left: 260px; }

  /* Se o menu tiver sido aberto no mobile e a janela for redimensionada para
     desktop, esta classe ficaria presa no <body> e travaria a rolagem. */
  body.menu-aberto { overflow: auto; }

  .nav-arrow { display: block; }
  /* Para dentro da galeria, nao para fora: .gallery ja ocupa a largura inteira
     do container, entao um recuo negativo jogava a seta da direita 8px alem da
     tela e criava uma barra de rolagem horizontal na pagina toda. */
  .nav-arrow--prev { left: .5rem; }
  .nav-arrow--next { right: .5rem; }
}