@import url("govinda-tokens.css");

/* ============================================================
   pagina.php — AS PAGINAS DE TEXTO LONGO
   Serve cinco rotas: /quem-somos, /como-viajar-com-a-gente e as tres de
   "antes de embarcar" (visto, passaporte, vacinas).

   O problema real destas paginas nao e' cor: e' comprimento. A do visto tem
   29.449 caracteres e dez subtitulos; a de "como comprar", 1.131. O desenho
   precisa servir aos dois extremos, e por isso o indice de secoes so' aparece
   quando ha o que indexar — a regra vive no PHP, nao aqui.

   Tudo sob .pg para nao colidir com o CSS herdado do clone.
   ============================================================ */

/* O clone nao define border-box global — medido nas outras paginas. */
.pg, .pg *, .pg *::before, .pg *::after { box-sizing: border-box; }

.pg {
  font-family: var(--f-pagina);
  font-size: var(--t-corpo);
  line-height: 1.6;
  color: var(--tinta);
  background: linear-gradient(180deg, var(--fundo-alto), var(--fundo-baixo));
  position: relative;
  isolation: isolate;
}
/* Grao de papel — 3,2%, fixo, nunca intercepta clique. */
.pg::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  opacity: .032; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.pg__caixa {
  max-width: var(--w-conteudo);
  margin: 0 auto;
  /* margens assimetricas — externa maior que interna */
  padding-inline: clamp(20px, 5vw, 72px) clamp(20px, 5vw, 56px);
  position: relative; z-index: 1;
}
/* A medida de leitura e' a regra que mais importa num texto de 29 mil
   caracteres: ~68 caracteres por linha, nem que sobre pagina em branco. */
.pg__leitura { max-width: var(--w-leitura); }

/* ---------------------------  ABERTURA  --------------------------- */
/* Respiro assimetrico ~2:1: o ar acima do titulo e' o dobro do de baixo. */
.pg__abertura { padding-block: clamp(56px, 9vh, 128px) clamp(28px, 4vh, 56px); }

.pg__rotulo {
  display: flex; align-items: center; gap: var(--e-3);
  font-family: var(--f-disciplina); font-weight: 600;
  font-size: var(--t-rotulo); letter-spacing: .30em; text-transform: uppercase;
  color: var(--tinta-suave); margin: 0;
}
.pg__rotulo::before { content: ""; flex: none; width: 32px; height: 1px; background: var(--ouro); }

.pg__titulo {
  font-family: var(--f-pagina); font-weight: 400;   /* titulo nunca engorda */
  font-size: var(--t-display); line-height: 1.04; letter-spacing: -.015em;
  max-width: 18ch; margin: var(--e-4) 0 0;
}
.pg__titulo em { font-style: italic; color: var(--acento); }  /* acafrao e' display */

.pg__linha {
  max-width: var(--w-leitura);
  margin-top: var(--e-5);
  font-size: var(--t-corpo-ed);
  line-height: 1.95;   /* a entrelinha larga e' da marca; nao apertar */
}

.pg__capa {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--raio);
  background: var(--superficie-2);
  margin-bottom: clamp(32px, 5vw, 64px);
}

/* ---------------------------  O ÍNDICE  --------------------------- */
/* So' entra quando ha quatro ou mais secoes. Num texto curto seria ruido;
   num de 29 mil caracteres e' a diferenca entre consultar e desistir. */
.pg__indice {
  border-top: 1px solid var(--ouro);
  border-bottom: 1px solid var(--superficie-2);
  padding-block: var(--e-5);
  margin-bottom: clamp(32px, 5vw, 56px);
}
.pg__indice-lista {
  list-style: none; margin: var(--e-4) 0 0; padding: 0;
  columns: 2; column-gap: var(--e-6);
}
@media (max-width: 620px) { .pg__indice-lista { columns: 1; } }
.pg__indice-lista li { break-inside: avoid; margin-bottom: var(--e-2); }
.pg__indice-lista a {
  font-family: var(--f-disciplina); font-weight: 300;
  font-size: var(--t-legenda); letter-spacing: .04em;
  color: var(--tinta); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: var(--e-2);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-rapida) var(--ease), border-color var(--dur-rapida) var(--ease);
}
.pg__indice-lista a::before {
  content: ""; flex: none; width: 10px; height: 1px;
  background: var(--ouro); transform: translateY(-.3em);
}
.pg__indice-lista a:hover { color: var(--acento-forte); border-bottom-color: var(--acento-forte); }

/* ---------------------------  O TEXTO  --------------------------- */
/* Estes seletores caem sobre HTML vindo do banco, migrado do WordPress: nao
   ha classe para agarrar, entao se estiliza por elemento dentro de .pg__texto. */
.pg__texto { font-size: var(--t-corpo-ed); line-height: 1.95; }

.pg__texto h2 {
  font-family: var(--f-pagina); font-weight: 400;
  font-size: var(--t-h1); line-height: 1.1;
  margin-top: clamp(48px, 7vw, 88px);   /* ar em cima; embaixo, um terco */
  margin-bottom: var(--e-4);
  scroll-margin-top: var(--e-6);        /* o link do indice nao cola no topo */
}
.pg__texto h3 {
  font-family: var(--f-pagina); font-weight: 400;
  font-size: var(--t-h2); line-height: 1.15;
  margin-top: clamp(36px, 5vw, 64px);
  margin-bottom: var(--e-3);
  scroll-margin-top: var(--e-6);
}
.pg__texto h4 {
  font-family: var(--f-disciplina); font-weight: 600;
  font-size: var(--t-legenda); letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-suave);
  margin-top: var(--e-6); margin-bottom: var(--e-2);
}
/* O rotulo cola na lista que ele abre: sem isto os dois margin-top se somam e
   o titulo parece solto do proprio conteudo. Ver pg_editorial(), passo 3c. */
.pg__texto h4 + ul, .pg__texto h4 + ol, .pg__texto h4 + p { margin-top: var(--e-3); }

/* font-size:inherit nao e' decoracao. O clone traz um `p{font-size:15px}`
   global em clientlib-commons.min.css. Seletor de elemento nu perde em
   especificidade, mas aplica DIRETO no <p> — e o tamanho que .pg__texto
   declara no container so' chega ao filho por HERANCA, que perde para
   qualquer regra direta. Sem esta linha, <li> renderiza a 16,9px e <p> a
   15px dentro do mesmo bloco de texto. */
.pg__texto p { margin-top: var(--e-4); font-size: inherit; }
.pg__texto strong, .pg__texto b { font-weight: 600; }
.pg__texto em, .pg__texto i { font-style: italic; }

.pg__texto a {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-rapida) var(--ease);
}
.pg__texto a:hover { color: var(--acento-forte); }

.pg__texto ol { margin-top: var(--e-4); padding-left: var(--e-5); }
.pg__texto li { margin-bottom: var(--e-3); }
/* O marcador da lista vira o fio de ouro da marca — 1px, nunca area. */
.pg__texto ul { list-style: none; margin-top: var(--e-4); padding-left: 0; }
.pg__texto ul > li { position: relative; padding-left: var(--e-5); }
.pg__texto ul > li::before {
  content: ""; position: absolute; left: 0; top: .85em;
  width: 12px; height: 1px; background: var(--ouro);
}

.pg__texto blockquote {
  margin: var(--e-5) 0; padding-left: var(--e-5);
  border-left: 3px solid var(--acento);
  font-style: italic;
}

.pg__texto img {
  display: block; max-width: 100%; height: auto;
  border-radius: var(--raio); margin-block: var(--e-5);
}
.pg__texto figure { margin: var(--e-6) 0; }
.pg__texto figcaption {
  font-family: var(--f-disciplina); font-weight: 300;
  font-size: var(--t-selo); letter-spacing: .12em;
  color: var(--tinta-suave); margin-top: var(--e-2);
}

/* Tabela vinda do banco: rola sozinha em vez de estourar a pagina. */
/* O invólucro e' que rola — a tabela nua ignora overflow-x. Usado na politica
   de privacidade, onde duas colunas de texto longo nao cabem em 320px. */
.pg__tabela { overflow-x: auto; margin-top: var(--e-5); }
.pg__tabela table { margin-top: 0; }
.pg__texto table { width: 100%; border-collapse: collapse; font-size: var(--t-corpo); margin-top: var(--e-5); }
.pg__texto th, .pg__texto td {
  text-align: left; padding: var(--e-3);
  border-bottom: 1px solid var(--superficie-2);
}
.pg__texto th {
  font-family: var(--f-disciplina); font-weight: 600;
  font-size: var(--t-rotulo); letter-spacing: .20em; text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ---------------------------  O CONVITE  --------------------------- */
.pg__convite {
  border-top: 1px solid var(--ouro);
  margin-top: clamp(56px, 8vw, 112px);
  padding-block: clamp(40px, 6vw, 80px) clamp(48px, 7vw, 96px);
}
.pg__convite-ancora {
  font-family: var(--f-pagina); font-weight: 400;
  font-size: var(--t-h2); line-height: 1.16;
  max-width: 26ch; margin: var(--e-4) 0 var(--e-5);
}
/* Botao-pilula navy: excecao declarada da v2 (§7.2), ainda em ratificacao. */
.pg__botao {
  display: inline-block;
  font-family: var(--f-disciplina); font-weight: 600;
  font-size: .9rem; letter-spacing: .06em;
  color: var(--fundo); background: var(--navy);
  padding: 16px 34px; border-radius: 999px; text-decoration: none;
  transition: background var(--dur-normal) var(--ease);
}
.pg__botao:hover { background: linear-gradient(90deg, var(--acento), var(--acento-forte)); }

/* O folio, grafismo 2 do Design System. */
.pg__folio {
  border-top: 1px solid var(--superficie-2);
  padding-block: var(--e-5);
  font-family: var(--f-disciplina); font-weight: 300;
  font-size: var(--t-selo); letter-spacing: .34em; text-transform: uppercase;
  color: var(--tinta);   /* tinta, e nao tinta-suave: neste corpo o suave nao chega a 4,5:1 */
  display: flex; flex-wrap: wrap; gap: var(--e-4); justify-content: space-between;
}

/* ---------------------------  A ABERTURA DE PARÁGRAFO  --------------------------- */
/* Frase longa que o editor do WordPress marcou como <h2>/<h3>. Nao e' titulo:
   e' a entrada do texto. Titulo de 180 caracteres achata o contraste de escala
   (a regra e' >=3x o corpo) e ainda enche o indice de frase inteira. Quem
   rebaixa e' pg_editorial(), em pagina.php; aqui so' se veste o resultado. */
.pg__lead {
  font-size: var(--t-corpo-ed); line-height: 1.95;
  color: var(--tinta-media);
  margin-top: var(--e-5);
  padding-left: var(--e-5);
  border-left: 1px solid var(--ouro);   /* filete de 1px — a regra dos 5% */
}
/* O negrito veio do WP em bloco inteiro; aqui ele nao significa enfase. */
.pg__lead b, .pg__lead strong { font-weight: 400; }

/* ---------------------------  A EQUIPE  --------------------------- */
/* Fora de .pg__leitura de proposito: cartao de pessoa quer a largura de
   conteudo inteira, e nao a medida de 68 caracteres do texto corrido. */
.gv-eq { margin-top: clamp(56px, 8vw, 112px); }
.gv-eq__titulo {
  font-family: var(--f-pagina); font-weight: 400;
  font-size: var(--t-h1); line-height: 1.08;
  margin: var(--e-4) 0 0;
}
.gv-eq__linha {
  max-width: var(--w-leitura); margin: var(--e-4) 0 0;
  font-size: var(--t-corpo); line-height: 1.75; color: var(--tinta-media);
}
.gv-eq__grid {
  display: grid; gap: clamp(20px, 3vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: clamp(28px, 4vw, 48px);
}

.gv-eq__card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "retrato id" "texto texto" "creds creds" "redes redes";
  column-gap: var(--e-4);
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: clamp(24px, 3vw, 36px);
  transition: transform var(--dur-normal) var(--ease),
              box-shadow var(--dur-normal) var(--ease);
}
.gv-eq__card:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }

/* O retrato entra redondo e pequeno, ao LADO do nome — nao em cima, ocupando
   meia tela. Quem le "quem conduz" quer ver com quem vai viajar, nao um
   banner. Mesma decisao da LP dos Himalaias (v2). */
.gv-eq__retrato {
  grid-area: retrato; align-self: center;
  width: 5.6rem; height: 5.6rem; border-radius: 50%;
  object-fit: cover; display: block;
  background: var(--superficie-2);
  box-shadow: 0 0 0 1px var(--linha), var(--sombra-1);
  /* curva Govinda: a foto da casa tem sempre a mesma temperatura */
  filter: sepia(.12) saturate(.90) contrast(.98) brightness(1.03);
  transition: transform var(--dur-normal) var(--ease),
              box-shadow var(--dur-normal) var(--ease);
}
.gv-eq__card:hover .gv-eq__retrato {
  transform: scale(1.04);
  box-shadow: 0 0 0 1px var(--linha-forte), var(--sombra-1);
}

.gv-eq__id { grid-area: id; align-self: center; min-width: 0; }
.gv-eq__nome {
  font-family: var(--f-pagina); font-weight: 400;   /* nome nunca engorda */
  font-size: var(--t-h3); line-height: 1.2; margin: 0 0 var(--e-1);
}
.gv-eq__papel {
  display: block;
  font-family: var(--f-disciplina); font-weight: 600;
  font-size: var(--t-rotulo); letter-spacing: .30em; text-transform: uppercase;
  color: var(--acento-forte);   /* terracota e' rotulo; acafrao e' display */
}
.gv-eq__texto {
  grid-area: texto; margin-top: var(--e-5);
  font-size: var(--t-corpo); line-height: 1.75; color: var(--tinta-media);
}
/* mesma armadilha do `p{font-size:15px}` do clone — ver .pg__texto p */
.gv-eq__texto p { margin: 0 0 var(--e-3); font-size: inherit; }
.gv-eq__texto p:last-child { margin-bottom: 0; }

/* Os icones sociais vinham em fonte de icone do tema Qode, que este site nao
   carrega — apareciam como quadrado vazio. Viram palavra. */
.gv-eq__redes {
  grid-area: redes; list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--e-4);
  margin: var(--e-4) 0 0; padding: var(--e-4) 0 0;
  border-top: 1px solid var(--superficie-2);
}
/* --tinta-media, e nao --tinta-suave: o cartao de apoio e' transparente, entao
   este texto pode cair sobre o pe' do gradiente de areia (#e6dbc4), onde o
   suave da 3,98:1 e reprova no AA. O media da 6,1:1 nos dois fundos. */
.gv-eq__redes a {
  font-family: var(--f-disciplina); font-weight: 300;
  font-size: var(--t-selo); letter-spacing: .42em; text-transform: uppercase;
  color: var(--tinta-media); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-rapida) var(--ease),
              border-color var(--dur-rapida) var(--ease);
}
.gv-eq__redes a:hover { color: var(--acento-forte); border-bottom-color: var(--ouro); }

/* Os conhecimentos declarados da pessoa. O travessao em terracota e' o mesmo
   marcador da LP dos Himalaias — lista sem bolinha, que a marca nao usa. */
.gv-eq__creds {
  grid-area: creds; list-style: none;
  margin: var(--e-4) 0 0; padding: var(--e-4) 0 0;
  border-top: 1px solid var(--superficie-2);
  font-family: var(--f-disciplina); font-weight: 300;
  font-size: var(--t-legenda); line-height: 1.6;
  color: var(--tinta-media);
}
.gv-eq__creds li { position: relative; padding: var(--e-1) 0 var(--e-1) var(--e-4); }
.gv-eq__creds li::before { content: "\2014"; position: absolute; left: 0; color: var(--acento-forte); }

/* Na pagina que e' SOBRE as duas pessoas (/rebeca-e-mohan), o retrato cresce:
   ali ele nao ilustra o texto — ele e' o assunto. */
.gv-eq__card--destaque .gv-eq__retrato { width: 8.5rem; height: 8.5rem; }
.gv-eq__card--destaque .gv-eq__nome     { font-size: var(--t-h2); }
@media (max-width: 420px) {
  .gv-eq__card--destaque .gv-eq__retrato { width: 5.6rem; height: 5.6rem; }
}

/* Sem foto no banco, a coluna do retrato viraria uma calha vazia ao lado do
   nome. Tres das cinco pessoas nao tem imagem_id. */
.gv-eq__card--sem-foto {
  grid-template-columns: 1fr;
  grid-template-areas: "id" "texto" "creds" "redes";
}

/* Quem conduz roteiro especifico entra numa faixa de meio peso: mesma
   linguagem, metade da presenca. A hierarquia e' a informacao. */
.gv-eq__grid--apoio {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: var(--e-5);
}
.gv-eq__grid--apoio .gv-eq__card {
  background: transparent; border-color: var(--superficie-2);
  padding: var(--e-5) var(--e-4);
}
.gv-eq__grid--apoio .gv-eq__card:hover { box-shadow: var(--sombra-1); }
.gv-eq__grid--apoio .gv-eq__retrato { width: 3.4rem; height: 3.4rem; }
.gv-eq__grid--apoio .gv-eq__nome { font-size: var(--t-corpo-ed); }
.gv-eq__grid--apoio .gv-eq__texto {
  margin-top: var(--e-4); font-size: var(--t-legenda); line-height: 1.7;
}

/* ---------------------------  OS SERVIÇOS  --------------------------- */
/* Os quatro selos que o WP empilhava como bloco de largura total, um sob o
   outro. Sao quatro rotulos curtos: pedem fileira, nao pilha. */
.gv-serv { margin-top: clamp(40px, 6vw, 72px); }
.gv-serv__grid {
  display: grid; gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-top: var(--e-5);
  padding-top: var(--e-5);
  border-top: 1px solid var(--superficie-2);
}
.gv-serv__item { display: flex; flex-direction: column; gap: var(--e-3); }
.gv-serv__icone {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 1px var(--linha);
  filter: sepia(.12) saturate(.90) contrast(.98) brightness(1.03);
}
.gv-serv__nome {
  font-family: var(--f-disciplina); font-weight: 600;
  font-size: var(--t-rotulo); letter-spacing: .30em; text-transform: uppercase;
  color: var(--tinta-suave); margin: 0;
}
.gv-serv__texto {
  font-size: var(--t-legenda); line-height: 1.7;
  color: var(--tinta-media); margin: 0;
}

/* ---------------------------  OS CARTÕES DE ROTA  --------------------------- */
/* O hub /antes-de-embarcar. Cada cartao e' a porta da subpagina que responde a
   pergunta — antes disto a pagina nao linkava nenhuma das tres, embora as tres
   existam e estejam no menu. */
.pg__cartoes {
  display: grid; gap: clamp(16px, 2.5vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  margin-top: clamp(28px, 4vw, 48px);
}
.pg__cartao {
  display: flex; flex-direction: column; gap: var(--e-3);
  background: var(--superficie);
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: clamp(24px, 3vw, 36px);
  text-decoration: none; color: inherit;
  position: relative; isolation: isolate;
  transition: transform var(--dur-normal) var(--ease),
              box-shadow var(--dur-normal) var(--ease),
              border-color var(--dur-normal) var(--ease);
}
/* O filete de ouro desce pela esquerda no hover: 1px, nunca area. */
.pg__cartao::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--ouro); transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur-normal) var(--ease);
}
.pg__cartao:hover, .pg__cartao:focus-visible {
  transform: translateY(-4px); box-shadow: var(--sombra-2);
  border-color: var(--linha-forte);
}
.pg__cartao:hover::before, .pg__cartao:focus-visible::before { transform: scaleY(1); }

.pg__cartao-num {
  font-family: var(--f-disciplina); font-weight: 300;
  font-size: var(--t-selo); letter-spacing: .42em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.pg__cartao-titulo {
  font-family: var(--f-pagina); font-weight: 400;
  font-size: var(--t-h2); line-height: 1.15; margin: 0;
}
.pg__cartao-texto {
  font-size: var(--t-corpo); line-height: 1.7;
  color: var(--tinta-media); margin: 0;
}
/* margin-top:auto alinha a chamada no pe' de todos os cartoes da fileira,
   mesmo com textos de alturas diferentes. */
.pg__cartao-ir {
  margin-top: auto; padding-top: var(--e-4);
  font-family: var(--f-disciplina); font-weight: 600;
  font-size: var(--t-legenda); letter-spacing: .06em;
  color: var(--acento-forte);
}
.pg__cartao-ir::after { content: " \2192"; }

/* Rotulo de grupo de cartoes. */
.pg__grupo { margin-top: clamp(48px, 7vw, 88px); }
.pg__grupo-titulo {
  font-family: var(--f-pagina); font-weight: 400;
  font-size: var(--t-h1); line-height: 1.08;
  margin: var(--e-4) 0 0; max-width: 20ch;
}

/* A capa do hub e' mais baixa que a das paginas de texto: aqui ela emoldura,
   nao protagoniza. E leva a curva Govinda, como toda foto da casa. */
.pg__capa { filter: sepia(.12) saturate(.90) contrast(.98) brightness(1.03); }
.pg__capa--hub { aspect-ratio: 16 / 7; }
@media (max-width: 720px) { .pg__capa--hub { aspect-ratio: 4 / 3; } }
/* Sobe para junto da foto, comendo parte da margem inferior dela. */
.pg__capa-legenda {
  margin: calc(var(--e-3) - clamp(32px, 5vw, 64px)) 0 clamp(32px, 5vw, 64px);
  font-family: var(--f-disciplina); font-weight: 300;
  font-size: var(--t-selo); letter-spacing: .42em; text-transform: uppercase;
  color: var(--tinta-suave);
}

/* Foco visivel: obrigatorio, nunca outline:none. */
.pg a:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: var(--raio); }

@media (prefers-reduced-motion: reduce) { .pg * { transition-duration: .01ms !important; } }