/* Folha de estilo que o GTS acrescenta ao template.
 *
 * O site é um clone da Framer, ou seja React com hidratação: o bundle reescreve
 * o DOM depois que a página carrega. Nada aqui pode depender das classes da
 * Framer, porque elas são geradas e mudam a cada publicação do template. O que
 * é estável são os id das seções (hero, intro, product, solutions, customers,
 * faq) e o id main, e é só neles que este arquivo se apoia.
 *
 * Quem marca os nós com data-gts-oculto é o gts.js, e a razão de esconder em
 * vez de apagar do HTML é a hidratação: nó removido do HTML o React recria.
 */

[data-gts-oculto] {
  display: none !important;
}

/* O template tem botão de conversão em quase toda seção. O site institucional
 * não tem ação de conversão nenhuma: o contato é só o email do rodapé. Esconder
 * o botão deixa o espaço dele vazio, então o espaçamento vizinho também sai. */
[data-gts-oculto="cta"] {
  margin: 0 !important;
}

/* --- Tipografia do site ---------------------------------------------------
 *
 * Os blocos que este arquivo acrescenta não herdam as fontes do template:
 * eles nascem fora da árvore de estilos dele e caem no Times e no Arial do
 * navegador. O resultado é um bloco que parece recortado de outra página, e
 * foi exatamente o que aconteceu na primeira versão da seção do mapa.
 *
 * Os nomes com "Placeholder" ao lado não são engano: é assim que a Framer
 * declara a fonte de reserva enquanto a de verdade não carregou. Copiar a
 * pilha inteira evita o pulo de fonte no carregamento. */

:root {
  --gts-serifa: Sentient, "Sentient Placeholder", serif;
  --gts-mono: "Geist Mono", monospace;
  --gts-texto: "BDO Grotesk Variable", "BDO Grotesk Variable Placeholder", sans-serif;
}

/* --- O que nunca chega a ser pintado --------------------------------------
 *
 * Tudo o que o gts.js esconde está repetido aqui como regra de CSS. Não é
 * duplicação à toa: é a diferença entre a página abrir certa e a página abrir
 * errada e se corrigir na frente de quem está olhando.
 *
 * O gts.js marca os nós com data-gts-oculto, mas ele só roda depois que o HTML
 * inteiro foi lido. Até lá o navegador já pintou o site do template: o
 * acordeão, as fotos de um painel de fintech, os depoimentos, o rodapé com a
 * marca de outra empresa e os botões de conversão. Era isso que aparecia no
 * primeiro instante.
 *
 * CSS não espera script: o que está aqui nunca é desenhado uma vez sequer.
 *
 * O gts.js continua marcando tudo, e não vira código morto: ele é a rede pra
 * quando o template mudar um nome e um seletor daqui parar de casar. Se isso
 * acontecer, a peça volta a piscar antes de sumir, em vez de ficar na tela.
 *
 * Quem mexer numa das listas mexe nas duas. */

/* Seções e blocos inteiros do template que não existem neste site. */
#customers,
[data-framer-name="Ticker Wrapper"],
[data-framer-name="Testimonials"],
[data-framer-name="Testimonial"],
[data-framer-name="Quote Wrapper"],
[data-framer-name="Pill Wrapper"],
#faq [data-framer-name="FAQ Wrapper"],
#solutions [data-framer-name="Features Tabs"],
#solutions [data-framer-name="Intro"],
#solutions [data-framer-name="Metrics"],
#product [data-framer-name="Inner Container"] > [data-framer-name="Container"],
#final-cta [data-framer-name="Image"] {
  display: none !important;
}

/* O rodapé do template inteiro. O :not é o que salva o nosso, que é montado
 * pelo build/3-gerar.mjs e mora no fim do body. */
footer:not(#gts-rodape) {
  display: none !important;
}

/* As duas abas de região que sobram: o GTS opera em duas, o template traz
 * quatro. São o terceiro e o quarto botão da fila. */
#solutions [data-framer-name="Tab Buttons"] > *:nth-child(3),
#solutions [data-framer-name="Tab Buttons"] > *:nth-child(4) {
  display: none !important;
}

/* Marca da Framer e rede social que o briefing não lista. */
a[href*="framer.link"],
a[href*="framer.com"],
#__framer-badge-container,
a[href*="x.com/"],
a[href*="twitter.com"] {
  display: none !important;
}

/* Os botões de conversão dentro do corpo da página. Mesma regra do gts.js: no
 * corpo eles saem, no menu e no rodapé os mesmos endereços são navegação e
 * ficam. */
:is(#hero, #intro, #product, #solutions, #faq, #customers)
  :is(a[href="./product"], a[href="./customers"], a[href="./pricing"], a:not([href])) {
  display: none !important;
}

/* O endereço de contato é o caso mais solto: o template o usa como botão em
 * toda seção, e aqui ele só faz sentido no menu (que rola até o e-mail) e no
 * rodapé (o link de Careers). Some em todo o resto, inclusive fora de seção. */
a[href="./contact"]:not(nav a):not(#gts-rodape a),
a[href="/contact"]:not(nav a):not(#gts-rodape a),
a[href="contact"]:not(nav a):not(#gts-rodape a) {
  display: none !important;
}

/* --- Ordem das seções -----------------------------------------------------
 *
 * O briefing pede uma ordem que não é a do template, e reordenar no HTML não é
 * possível: o React remonta a página a partir do bundle e desfaria qualquer
 * troca de lugar. Mas as seções são itens de um mesmo flex column, e `order` é
 * decisão de layout do CSS, que a hidratação não toca.
 *
 *   template:  hero → intro → product   → solutions → customers → faq
 *   GTS:       hero → intro → faq       → solutions → product
 *              (sobre nós    (o que      (onde       (como
 *               + números)    fazemos)    operamos)   trabalhamos)
 *
 * `order` só vale entre itens do mesmo container. Os irmãos que não são seção
 * (overlay, rodapé, selo do template) são filhos diretos do container flex e
 * precisam de um número maior, senão caem pra cima das seções: o padrão é 0 e
 * 0 vem antes de 1. */

#main > div > * { order: 9; }

/* --- Rodapé ---------------------------------------------------------------
 *
 * O rodapé do template sai inteiro (o gts.js esconde) e este entra no lugar.
 * Ele é montado pelo build/3-gerar.mjs no fim do body, fora da árvore do React,
 * que é o único lugar onde uma peça nossa sobrevive à hidratação.
 *
 * O do template tinha três colunas de links pra páginas que não existem nesta
 * cópia (Terms, Privacy, Careers como página), rótulos que não batiam com o que
 * havia embaixo deles, e enterrava razão social, endereço e e-mail em letra
 * miúda no pé da página.
 *
 * Esses três são o motivo de o rodapé existir: é aqui que banco e parceiro vêm
 * conferir a empresa. Por isso o e-mail é a maior coisa da faixa depois da
 * assinatura, e o endereço tem coluna própria com rótulo.
 *
 * Aqui NÃO há inversão: o rodapé fica fora das seções filtradas, então as cores
 * são literais. O que se escreve é o que aparece. */

#gts-rodape {
  --gts-fundo: #030303;
  --gts-cor-texto: #f7f7f7;
  --gts-suave: #8a8a8a;
  --gts-borda: rgba(230, 227, 227, 0.14);

  padding: 88px 40px 40px;
  border-top: 1px solid var(--gts-borda);
  background: var(--gts-fundo);
  color: var(--gts-suave);
  font-family: var(--gts-texto);
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: -0.14px;
}

/* --- A assinatura ----------------------------------------------------------
 *
 * "From Brazil to the world" já esteve centrada e em 44px, sozinha no alto do
 * rodapé, e não funcionou: uma linha grande sem nada ao redor pra amarrá-la lia
 * como sobra da página.
 *
 * Agora ela fecha o bloco de identificação da empresa, logo abaixo do endereço.
 * Ali ela tem contexto: é a frase de quem acabou de se identificar. E não
 * repete o nome, porque a razão social está três linhas acima.
 *
 * Em itálico e em cinza pra ler como assinatura e não como mais uma linha de
 * endereço. */

#gts-rodape .gts-rodape-assinatura {
  margin: 18px 0 0;
  font-family: var(--gts-texto);
  font-size: 15px;
  font-style: italic;
  letter-spacing: -0.15px;
  line-height: 1.5;
  color: var(--gts-suave);
}

/* --- As três colunas ------------------------------------------------------ */

#gts-rodape .gts-rodape-colunas {
  display: grid;
  /* A coluna de contato é a mais larga das três: é ela que carrega o e-mail,
   * que é o que mais se procura aqui. */
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 48px;
  max-width: 1185px;
  margin: 0 auto;
  padding-top: 44px;
  border-top: 1px solid var(--gts-borda);
}

#gts-rodape .gts-rodape-rotulo {
  margin: 0 0 18px;
  font-family: var(--gts-mono);
  font-size: 11px;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: var(--gts-suave);
}

/* O endereço é dado de registro, não decoração: fica na cor cheia, do tamanho
 * do texto normal, e com a razão social separada das linhas de endereço. */
#gts-rodape address {
  display: flex;
  flex-direction: column;
  font-style: normal;
  color: var(--gts-cor-texto);
}

#gts-rodape address span:first-child {
  margin-bottom: 6px;
}

#gts-rodape address span:not(:first-child) {
  color: var(--gts-suave);
}

#gts-rodape ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- Contato -------------------------------------------------------------- */

#gts-rodape .gts-rodape-contato {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* O e-mail em tamanho de título, e não de nota de rodapé. Era a queixa: ele
 * estava escondido, e é a informação que mais se procura numa página destas. */
#gts-rodape .gts-rodape-email {
  font-size: 22px;
  letter-spacing: -0.44px;
  line-height: 1.3;
  color: var(--gts-cor-texto);
  /* O sublinhado fica afastado do texto e mais claro que ele: marca que é
   * clicável sem sujar a leitura do endereço. */
  text-decoration: underline;
  text-decoration-color: rgba(247, 247, 247, 0.3);
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

#gts-rodape .gts-rodape-email:hover {
  text-decoration-color: var(--gts-cor-texto);
}

/* O LinkedIn com seta, pra ficar claro que sai do site. */
#gts-rodape .gts-rodape-linkedin {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--gts-borda);
  border-radius: 999px;
  font-size: 13px;
  color: var(--gts-cor-texto);
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

#gts-rodape .gts-rodape-linkedin::after {
  content: "↗";
  font-size: 12px;
  line-height: 1;
  color: var(--gts-suave);
}

#gts-rodape .gts-rodape-linkedin:hover {
  border-color: rgba(230, 227, 227, 0.4);
  background: rgba(230, 227, 227, 0.06);
}

/* --- Direitos ------------------------------------------------------------- */

#gts-rodape .gts-rodape-direitos {
  max-width: 1185px;
  margin: 56px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--gts-borda);
  font-size: 13px;
  color: var(--gts-suave);
}

/* --- Links ---------------------------------------------------------------- */

#gts-rodape a {
  color: var(--gts-suave);
  text-decoration: none;
  transition: color 0.18s ease;
}

#gts-rodape ul a:hover {
  color: var(--gts-cor-texto);
}

#gts-rodape a:focus-visible {
  outline: 2px solid var(--gts-cor-texto);
  outline-offset: 3px;
}

/* --- Telas estreitas ------------------------------------------------------ */

@media (max-width: 809.98px) {
  #gts-rodape {
    padding: 56px 20px 32px;
  }

  /* --- Área de toque ------------------------------------------------------
   *
   * No dedo, o que vale não é o tamanho da letra, é o tamanho do alvo. Os links
   * de navegação tinham 13 pixels de altura, que é a altura da linha de texto:
   * dá pra acertar com mouse e não dá com polegar. A recomendação, tanto da
   * Apple quanto do Google, é 44 pixels.
   *
   * A altura vem de padding e não de margem: margem separa, padding aumenta o
   * que recebe o toque. E o recuo negativo devolve o alinhamento, pra a coluna
   * de links continuar no mesmo eixo das outras duas. */

  #gts-rodape ul {
    gap: 0;
    margin-left: -8px;
  }

  #gts-rodape ul a {
    display: block;
    padding: 13px 8px;
  }

  #gts-rodape .gts-rodape-email {
    display: inline-block;
    padding: 7px 0;
  }

  #gts-rodape .gts-rodape-colunas {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 32px;
  }

  #gts-rodape .gts-rodape-direitos {
    margin-top: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #gts-rodape a,
  #gts-rodape .gts-rodape-linkedin {
    transition: none;
  }
}

/* --- Respiro entre seções no celular --------------------------------------
 *
 * O template abre e fecha toda seção com 112px. Numa tela de 1440 isso é um
 * respiro; numa de 375 são 224px de preto entre um assunto e o outro, quase
 * um terço de tela rolando sem nada. O template não muda esse valor por
 * breakpoint, então ele chega inteiro no celular.
 *
 * 64px mantém a separação legível e devolve mais de 600px de rolagem ao
 * longo da página. O Careers abria com menos que as outras e continua
 * abrindo com menos, na mesma proporção. */

@media (max-width: 809.98px) {
  #intro,
  #faq,
  #solutions,
  #product,
  #o1cx61 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  #o1cx61 { padding-top: 40px !important; }

  /* O vão de dentro da seção, entre o bloco de texto e o que vem depois dele,
   * é outro valor de tela grande que chega inteiro no celular: 96px entre o
   * parágrafo do "About us" e a fileira de números, por exemplo, davam quase
   * uma tela de preto no meio da seção, e quem rolava achava que tinha
   * acabado. O de fora, entre o rótulo e o miolo, são 64px pela mesma razão. */
  :is(#intro, #faq, #solutions, #product, #o1cx61) [data-framer-name="Inner Container"] {
    gap: 48px !important;
  }

  :is(#intro, #faq, #solutions, #product, #o1cx61) > [data-framer-name="Container"] {
    gap: 40px !important;
  }
}

#hero      { order: 1; }
#intro     { order: 2; }
#faq       { order: 3; }
#solutions { order: 4; }
#product   { order: 5; }
#o1cx61    { order: 6; } /* bloco do final-cta, que vira a seção Careers */

/* --- Inversão das seções --------------------------------------------------
 *
 * O template alterna claro e escuro. O pedido é trocar: o que é claro fica
 * escuro e o que é escuro fica claro, menos o hero e o rodapé, que ficam como
 * estão. Depois da troca só "How we work" continua clara.
 *
 * A troca é por filtro de inversão, e não por uma lista de cores novas, por um
 * motivo prático: o template pinta em dezenas de lugares (fundo de card, borda
 * de acordeão, traço de divisor, ícone) e reescrever cor por cor deixaria algum
 * elemento pra trás, com texto preto sobre fundo preto, sem aviso nenhum. O
 * filtro pega tudo de uma vez, e o que ele não pode pegar é só o que está
 * listado abaixo pra voltar ao normal.
 *
 * Isso só funciona porque a paleta aqui é cinza puro: em cinza, inverter é
 * trocar claro por escuro e ponto. Se algum dia entrar cor de marca nessas
 * seções, o filtro vai girar o tom dela e aí esta regra precisa sair.
 *
 * Checado antes de aplicar: nenhuma dessas seções tem position:fixed dentro,
 * que é o que um filtro quebraria. */

/* Careers fica de fora: o card dela já nasce escuro no template, e inverter
 * deixava ela clara, que é o oposto do pedido. */
#intro,
#faq,
#solutions,
#product {
  filter: invert(1);
}

/* O filtro só inverte o que a própria seção pinta. As quatro seções claras
 * pintam o fundo delas por dentro, então viram junto. "How we work" não: ela é
 * transparente, e o escuro dela vinha do fundo do body, que está de fora do
 * filtro. Sem esta linha o filtro invertia só o texto e deixava preto no preto.
 *
 * O valor é a cor que ela tinha antes, de propósito: é o filtro que a vira em
 * claro. Escrever a cor final aqui daria o resultado oposto. */
#product {
  background-color: rgb(3, 3, 3);
}

/* Foto não inverte junto: inverter de novo devolve ela ao normal. Ícone de
 * interface fica de fora de propósito, porque ele tem que virar com o fundo. */
#intro img, #intro video,
#faq img, #faq video,
#solutions img, #solutions video,
#product img, #product video {
  filter: invert(1);
}

/* --- Véu no pé da foto ----------------------------------------------------
 *
 * O template põe um degradê escuro subindo do pé da imagem, que é onde ele
 * escreve por cima dela. Aqui não se escreve nada ali, e o filtro de inversão
 * da seção vira esse degradê em BRANCO: uma faixa clara saindo do nada no pé
 * da foto, sem função nenhuma.
 *
 * Some o véu, e não o filtro: o filtro é quem deixa a seção escura. */

#solutions [data-framer-name="Overlay"] {
  display: none !important;
}

/* --- Faixa de números -----------------------------------------------------
 *
 * O briefing pede quatro números e o template tem três. O quarto, o ano de
 * fundação, é um cartão copiado pelo gts.js, porque não existe um quarto
 * contador no bundle pra alimentar pelo i18n/numeros.json.
 *
 * A cópia entra no fim da lista (é onde o React menos mexe) e vem pro começo
 * por aqui. Com isso o traço divisor troca de dono: quem era o primeiro da
 * fila, e por isso nascia sem traço e sem recuo, agora é o segundo. */

#intro [data-gts-metrica="fundacao"] {
  order: -1;
}

/* A cópia saiu de um cartão do meio, então veio com traço e recuo. Como ela
 * passa a ser a primeira da fila, os dois saem.
 *
 * O !important na variável não é exagero: a Framer escreve --border-left-width
 * no atributo style de cada cartão, e style inline ganha da folha de estilo. */
#intro [data-gts-metrica="fundacao"] [data-border="true"] {
  --border-left-width: 0px !important;
  padding-left: 0 !important;
}

/* No celular os quatro números viram uma grade de dois por dois. Empilhados em
 * quatro linhas eles ocupavam 800 pixels de altura e obrigavam a rolar pra ver
 * o quarto, o que desfaz o efeito: a graça é ver os quatro juntos.
 *
 * A cópia do ano de fundação continua na frente pela propriedade order, que
 * funciona em grade igual funciona em fila. */
@media (max-width: 809.98px) {
  #intro [data-framer-name="Metric Cards"] {
    display: grid;
    /* minmax(0, 1fr) e não 1fr: 1fr sozinho é minmax(AUTO, 1fr), e esse auto
     * deixa o conteúdo mais largo da coluna mandar. Com "100K+ ORDERS
     * DELIVERED" numa coluna e "7 COUNTRIES" na outra, as colunas saíam com 171
     * e 147 pixels e os cartões vazavam 26 pixels pra fora do container. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* O container herda align-items: flex-start do layout de fila do template,
     * e em grade isso desalinhava o topo da primeira fileira. */
    align-items: start;
    gap: 12px 20px;
  }

  /* Os cartões nascem com flex: 1 0 0px, que em grade não quer dizer nada de
   * útil e ainda achata a altura. Em grade quem manda é a faixa. */
  #intro [data-framer-name="Metric Cards"] > * {
    flex: 0 0 auto;
    width: auto;
  }
}

/* E o antigo primeiro ganha os dois. :first-child é a ordem no HTML, não a da
 * tela, então isto pega mesmo o cartão certo: a cópia mora no fim do HTML.
 *
 * Só acima de 1200px, que é o ponto de quebra do próprio template e a única
 * faixa onde os cartões têm traço entre eles. Abaixo disso o template tira o
 * traço de todos, e sem o recorte esta regra devolvia um traço solto e um
 * recuo de 24px só nesse cartão, desalinhado dos outros três. */
@media (min-width: 1200px) {
  #intro [data-framer-name="Metric Cards"] > *:first-child [data-border="true"] {
    --border-left-width: 1px !important;
    padding-left: 24px !important;
  }
}

/* --- Grades numeradas ("What we do" e "How we work") ----------------------
 *
 * A mesma peça serve as duas seções: itens numerados lado a lado, com título e
 * texto à vista. O gts.js monta, aqui é só a aparência.
 *
 * As duas seções estão invertidas, mas em sentidos opostos: "What we do" vira
 * escura e "How we work" continua clara. Por isso as cores não ficam aqui,
 * ficam em variáveis, e cada seção declara as suas mais abaixo. Como sempre
 * neste arquivo, o que se escreve sai TROCADO na tela.
 *
 * O numeral não é enfeite: ele dá a contagem de relance, que é o que o título
 * da seção promete ("Five operations, one company"). */

.gts-grade {
  width: 100%;
  display: grid;
  column-gap: 0;
  row-gap: 56px;

  /* Três linhas: número, título e texto. Elas existem na GRADE, e não dentro de
   * cada item, porque é isso que faz o texto das cinco colunas começar na mesma
   * altura.
   *
   * Sem isso, cada coluna se resolvia sozinha: "Performance marketing" e
   * "Proprietary technology" ocupam duas linhas de título e empurravam o
   * próprio texto pra baixo, enquanto os vizinhos de título curto ficavam lá em
   * cima. Cinco colunas, três alturas de partida diferentes.
   *
   * A última linha é 1fr pra sobrar altura pro fio divisor descer até o fim,
   * mesmo na coluna de texto mais curto. */
  grid-template-rows: auto auto 1fr;
  grid-auto-rows: auto auto 1fr;
  align-items: stretch;
}

/* O item ocupa as três linhas da grade e empresta as alturas dela pros próprios
 * filhos: é o que subgrid quer dizer. O número, o título e o texto de todas as
 * colunas passam a dividir a mesma linha, e a mais alta manda. */
.gts-grade-item {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: 0 28px;
  border-left: 1px solid var(--gts-cor-fio);
}

.gts-grade-item:first-child {
  padding-left: 0;
  border-left: 0;
}

.gts-grade-numero {
  display: block;
  margin-bottom: 20px;
  font-family: var(--gts-mono);
  font-size: 11px;
  letter-spacing: 0.55px;
  font-variant-numeric: tabular-nums;
  color: var(--gts-cor-numero);
}

.gts-grade-titulo {
  margin: 0 0 12px;
  font-family: var(--gts-texto);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.19px;
  line-height: 1.25;
  color: var(--gts-cor-titulo);
}

.gts-grade-texto {
  margin: 0;
  font-family: var(--gts-texto);
  font-size: 14px;
  letter-spacing: -0.14px;
  line-height: 1.6;
  color: var(--gts-cor-texto);
}

/* --- "What we do": cinco colunas, seção escura --------------------------- */

#gts-operacoes {
  /* Cinco colunas numa linha só, e não três mais duas: o título da seção diz
   * "Five operations", e a contagem bater com o que se vê vale mais que ter
   * coluna larga. */
  grid-template-columns: repeat(5, 1fr);

  --gts-cor-fio: rgba(0, 0, 0, 0.14);  /* → branco a 14% */
  --gts-cor-numero: #6b6b6b;           /* → cinza médio  */
  --gts-cor-titulo: #000;              /* → branco       */
  --gts-cor-texto: #4a4a4a;            /* → cinza claro  */
}

/* O template põe título e acordeão lado a lado, e a grade precisa da largura
 * inteira. A seção passa a empilhar: título em cima, cinco colunas embaixo. */
#faq [data-framer-name="Inner Container"] {
  flex-direction: column;
  align-items: stretch !important;
}

/* O bloco do título nasce com flex: 1 0 0px, que numa fila horizontal quer
 * dizer "cresce pra ocupar a largura". Virando coluna, esse zero passa a valer
 * pra ALTURA, e a largura fica por conta do align-items: o título encolhia pra
 * 1 pixel e o texto descia em coluna, letra por letra.
 *
 * Largura cheia e altura pelo conteúdo resolve os dois lados. */
#faq [data-framer-name="Inner Container"] > * {
  width: 100%;
  flex: 0 0 auto;
}

/* --- "How we work": três colunas, seção clara ---------------------------- */

#gts-como-trabalhamos {
  grid-template-columns: repeat(3, 1fr);
  padding-top: 8px;

  --gts-cor-fio: rgba(255, 255, 255, 0.16); /* → preto a 16% */
  --gts-cor-numero: #8e8e8e;                /* → cinza médio */
  --gts-cor-titulo: #fff;                   /* → preto       */
  --gts-cor-texto: #b0b0b0;                 /* → cinza escuro */
}

/* Nesta seção o numeral carrega mais peso: são três itens numa seção clara e
 * larga, e sem ele a coluna fica só com duas linhas de texto soltas no branco. */
#gts-como-trabalhamos .gts-grade-numero {
  margin-bottom: 28px;
  font-family: var(--gts-serifa);
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -1.6px;
  line-height: 1;
}

#gts-como-trabalhamos .gts-grade-titulo {
  font-size: 22px;
}

#gts-como-trabalhamos .gts-grade-texto {
  font-size: 15px;
  max-width: 34ch;
}

/* --- Telas menores -------------------------------------------------------- */
/*
 * Cinco colunas não cabem num tablet e nenhuma cabe num celular. Os pontos de
 * quebra são os do próprio template. */

@media (max-width: 1199.98px) {
  #gts-operacoes {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 0;
  }

  /* Com a grade quebrando em várias linhas, "primeiro filho" não serve mais pra
   * achar quem abre a linha: quem abre é o ímpar. */
  #gts-operacoes .gts-grade-item:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 809.98px) {
  .gts-grade {
    grid-template-columns: 1fr !important;
    gap: 36px 0;
  }

  /* "How we work" fica centrado no celular. São três itens de texto curto, e
   * centrados eles leem como três marcos de um percurso; encostados à esquerda,
   * com o fio do lado, pareciam uma lista de tópicos qualquer.
   *
   * Vale só aqui: "What we do" tem cinco itens de texto mais longo, e texto
   * longo centrado cansa de ler, porque cada linha começa num lugar diferente. */
  #gts-como-trabalhamos .gts-grade-item {
    padding: 0;
    border-left: 0;
    text-align: center;
  }

  #gts-como-trabalhamos .gts-grade-texto {
    max-width: none;
  }

  /* Em coluna única TODO item ganha o fio, inclusive o primeiro. O :first-child
   * precisa aparecer no seletor: sem ele a regra de cima, mais específica, 
   * continuava valendo e o primeiro item ficava sem fio enquanto os outros
   * tinham. Especificidade ganha de ordem, e media query não muda isso. */
  .gts-grade-item,
  .gts-grade-item:first-child,
  #gts-operacoes .gts-grade-item:nth-child(odd) {
    padding: 0 0 0 20px;
    border-left: 1px solid var(--gts-cor-fio);
  }

  #gts-como-trabalhamos .gts-grade-numero {
    font-size: 30px;
    margin-bottom: 16px;
  }
}

/* --- Seção "Where we operate" ---------------------------------------------
 *
 * Mapa-múndi de fundo com os sete países acesos, e por cima dele dois cartões,
 * um por região. O gts.js monta, aqui é só a aparência.
 *
 * O mapa é estático: nada aqui responde ao mouse. Teve uma versão com hover, e
 * ela saiu porque o mapa aqui é atmosfera e a animação disputava atenção com o
 * texto que está em cima dele.
 *
 * ATENÇÃO À COR: #solutions passa por invert(1), então TUDO que se escreve
 * aqui sai trocado na tela. As cores estão escritas ao contrário de propósito,
 * com o resultado anotado ao lado de cada uma. A regra é simples porque a
 * paleta é cinza puro: 0 vira 255 e 255 vira 0. */

#gts-mapa {
  --tinta: #000;                     /* → branco               */
  --tinta-media: #3f3f3f;            /* → cinza claro          */
  --tinta-fraca: #767676;            /* → cinza médio          */

  /* O mapa pode ser mais contrastado agora que ninguém lê texto direto em cima
   * dele: quem segura o texto é o cartão. Antes havia um véu de 45% por cima do
   * mapa inteiro pra isso, e ele saiu junto. */
  --pais: #373737;                   /* → cinza claro          */
  --terra: #e5e5e1;                  /* → quase a cor da seção */
  --fronteira: #f4f4f3;              /* → quase preto          */

  width: 100%;
  /* Âncora dos cartões, que são posicionados por cima dela. */
  position: relative;
}

/* --- O mapa --------------------------------------------------------------- */
/*
 * O mapa fica no fluxo normal e é ELE quem dá a altura do bloco. O conteúdo é
 * que flutua por cima, posicionado. O contrário (mapa posicionado, conteúdo no
 * fluxo) obrigaria o mapa a ser esticado ou cortado pra caber numa altura que
 * não é a dele, e o rabo do Chile, que vai quase até a borda de baixo, seria a
 * primeira coisa a sumir no corte. */

#gts-mapa .gts-mapa-quadro {
  position: relative;
  /* Nada aqui recebe o mouse: o mapa é figura, não controle. */
  pointer-events: none;
}

#gts-mapa .gts-mapa-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Os outros países são massa de terra, não contorno solto: num mapa do mundo
 * inteiro, 170 contornos vazios viram ruído e não leem como continente. A
 * fronteira entre eles é desenhada na cor do fundo, que é o que separa um país
 * do vizinho sem precisar de linha clara. */
#gts-mapa .gts-mapa-vizinho {
  fill: var(--terra);
  stroke: var(--fronteira);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
}

/* Os sete, sempre na mesma cor. A mesma borda escura dos vizinhos, e não um
 * contorno claro: com contorno claro, Espanha e Portugal, que são vizinhos,
 * viravam um borrão só e a Península lia como um país. */
#gts-mapa .gts-mapa-pais {
  fill: var(--pais);
  stroke: var(--fronteira);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
}

/* --- Os dois cartões ------------------------------------------------------ */

#gts-mapa .gts-mapa-regioes {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-content: center;
}

/* O cartão é vidro fosco: ele desfoca o mapa atrás em vez de deixá-lo passar
 * nítido. Sem o desfoque, o contorno dos países atravessava o cartão e brigava
 * com as linhas do texto, que foi o que se viu na primeira versão.
 *
 * Com o desfoque dá pra deixar o cartão MENOS opaco que antes e ainda ler
 * melhor: o que passa vira uma mancha de luz, não um desenho.
 *
 * A borda e o fundo têm que ser escritos ao contrário pra saírem certos na
 * tela, por causa da inversão da seção. O desfoque não: filtro de fundo não
 * tem cor, então ele não se inverte. */
#gts-mapa .gts-mapa-regiao {
  padding: 40px 40px 44px;
  background: rgba(255, 255, 255, 0.62);   /* → preto a 62%   */
  border: 1px solid rgba(0, 0, 0, 0.12);   /* → branco a 12%  */
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
}

/* Navegador sem suporte a filtro de fundo (ou com ele desligado) receberia um
 * cartão de 62%, que é transparente demais pra ler texto em cima do mapa. Aí
 * ele volta pro cartão quase opaco da versão anterior. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #gts-mapa .gts-mapa-regiao {
    background: rgba(255, 255, 255, 0.86);
  }
}

/* --- Dentro do cartão ----------------------------------------------------- */
/*
 * A tipografia é a do próprio site, e não a do navegador: serifa Sentient nos
 * números e títulos, Geist Mono nos rótulos pequenos, BDO Grotesk no corpo. Sem
 * isso o bloco sai em Times e Arial e parece recortado de outra página, que foi
 * exatamente o que aconteceu na primeira versão. */

#gts-mapa .gts-mapa-conta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 18px;
}

#gts-mapa .gts-mapa-conta-numero {
  font-family: var(--gts-serifa);
  font-size: 34px;
  font-weight: 300;
  letter-spacing: -1.4px;
  line-height: 1;
  color: var(--tinta);
}

#gts-mapa .gts-mapa-conta-rotulo {
  font-family: var(--gts-mono);
  font-size: 11px;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

#gts-mapa .gts-mapa-nome {
  margin: 0 0 22px;
  font-family: var(--gts-serifa);
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -1.2px;
  line-height: 1.1;
  color: var(--tinta);
}

/* Os países numa linha corrida, separados por ponto médio. A lista com fio
 * entre os itens parecia formulário, e o resto da página separa as coisas por
 * espaço, não por traço. */
#gts-mapa .gts-mapa-paises {
  margin: 0 0 26px;
  font-family: var(--gts-texto);
  font-size: 16px;
  letter-spacing: -0.16px;
  line-height: 1.7;
  color: var(--tinta-media);
}

#gts-mapa .gts-mapa-texto {
  margin: 0;
  max-width: 44ch;
  font-family: var(--gts-texto);
  font-size: 15px;
  letter-spacing: -0.15px;
  line-height: 1.65;
  color: var(--tinta-fraca);
}

/* --- Telas estreitas ------------------------------------------------------ */
/*
 * Abaixo de 810px, que é o ponto de quebra do próprio template, não cabe
 * cartão por cima de mapa: a coluna fica estreita, o texto ocupa a altura toda
 * e o mapa atrás vira ruído. Os dois voltam a ser empilhados. */

@media (max-width: 809.98px) {
  #gts-mapa .gts-mapa-quadro {
    margin-bottom: 40px;
  }

  #gts-mapa .gts-mapa-regioes {
    position: static;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  #gts-mapa .gts-mapa-regiao {
    padding: 32px 28px 34px;
  }
}

/* --- Seção "Careers" ------------------------------------------------------
 *
 * O template põe o texto à esquerda e uma foto à direita, dentro de um cartão
 * escuro. A foto sai no gts.js (era mais um painel de fintique do template
 * original), e sem ela o texto fica sozinho num cartão de largura inteira.
 * Centrado é o único lugar que faz sentido pra ele ali.
 *
 * Esta seção NÃO passa pelo filtro de inversão, então as cores e os valores
 * aqui são literais: o que se escreve é o que aparece. */

/* O bloco de texto tem largura fixa no template, porque dividia o cartão com a
 * foto. Agora ele é o cartão inteiro. */
#final-cta [data-framer-name="Text and Button"] {
  width: 100% !important;
  align-items: center;
  padding: 72px 40px;
}

/* A coluna de dentro usa space-between, que com a foto fora jogaria o e-mail
 * pro pé do cartão e deixaria um vão no meio. Vira centro, com respiro
 * próprio entre os blocos. */
#final-cta [data-framer-name="Text and Button"] [data-framer-name="Content"] {
  width: 100%;
  /* Linha de texto não deve passar muito disso: mais largo que isso o olho se
   * perde ao voltar pro começo da linha seguinte. */
  max-width: 640px;
  align-items: center;
  justify-content: center;
  gap: 26px;

  /* Esta coluna nasce com flex: 1 0 0px. Com a foto no lugar, quem dava altura
   * ao cartão era a foto, e essa base zero não incomodava. Sem a foto ela passa
   * a valer: a coluna virava 1 pixel de altura e o texto escapava pra fora do
   * cartão. Altura pelo conteúdo resolve. */
  flex: 0 0 auto;
  height: auto;
}

#final-cta [data-framer-name="Text Wrapper"] {
  align-items: center;
  gap: 20px;
}

/* O alinhamento do texto em si vem de dentro de cada parágrafo, e não do bloco
 * que os contém: por isso não basta centralizar os contêineres.
 *
 * A lista de tags é larga de propósito: o título desta seção é um h4, não um
 * h3, e o nível varia conforme a variante que a Framer monta. Listar todos sai
 * mais barato que descobrir qual é a cada mudança do template. */
#final-cta h1,
#final-cta h2,
#final-cta h3,
#final-cta h4,
#final-cta p {
  text-align: center !important;
}

/* A tarja "Careers" é uma fileira (quadradinho + palavra) dentro de um bloco de
 * largura cheia, e fileira não obedece text-align. Quem centraliza ela é o
 * bloco em volta, virando flex. */
#final-cta [data-framer-name="Text Wrapper"] > div:first-child {
  display: flex;
  justify-content: center;
}

/* Os dois blocos de texto nascem com largura de conteúdo; sem largura cheia o
 * text-align não tem o que centralizar. */
#final-cta [data-framer-name="Text Wrapper"] > *,
#final-cta [data-framer-name="Paragraph"] {
  width: 100%;
}

/* --- Menu do topo ---------------------------------------------------------
 *
 * Mesmo problema da ordem das seções, mesma solução: o menu é um flex row e a
 * ordem dos itens vira decisão de CSS. O que identifica cada item é o endereço
 * do link, não o rótulo, porque o rótulo sai do dicionário e muda.
 *
 * Fica na ordem em que a pessoa encontra as seções descendo a página, e o item
 * "Company" do template sai: não é seção deste site. */

/* A barra do topo nasce transparente e flutua por cima do conteúdo. Isso só
 * funciona enquanto o que passa embaixo é escuro: na seção clara "How we work"
 * o texto branco do menu sumia. Ganha fundo próprio.
 *
 * O tom é o mesmo preto do resto da página (rgb 3,3,3), e não um cinza: cinza
 * destaca a barra como uma faixa separada, que não é o que se quer. O limite
 * dela é a própria translucidez, de 8%, contra o que passa atrás.
 *
 * Vale pras três variantes de barra do template, e não só a do computador. No
 * celular ela nascia transparente: em cima do hero preto parecia certo, mas ao
 * rolar a página o menu ficava boiando por cima do conteúdo. A variante "Menu",
 * que é o painel do menu aberto, fica de fora: ela é painel, não barra.
 *
 * Aqui havia também um fio de 1px branco a 7% embaixo da barra. Saiu: sobre o
 * preto do hero ele some, mas depois da rolagem passa conteúdo claro atrás, e
 * o fio aparece como uma linha branca. Barra que muda de aparência conforme a
 * rolagem parece defeito, não acabamento. */

nav[data-framer-name^="Desktop"],
nav[data-framer-name^="Tablet"],
nav[data-framer-name^="Phone"] {
  /* O desfoque atrás da barra SAIU, e o motivo é rolagem, não visual.
   *
   * `backdrop-filter` num elemento `position: fixed` é das coisas mais caras
   * que existem numa página que rola: a cada quadro o navegador tem que ler de
   * volta a faixa inteira de tela que está atrás da barra, desfocar e compor
   * por cima. A barra tem 1265 pontos de largura e está na tela o tempo TODO,
   * então esse custo não é de uma seção, é da página inteira, o tempo inteiro.
   * Aqui ele pesava ainda mais porque o que passa atrás são seções desenhadas
   * através de `filter: invert(1)`, ou seja, camadas que já custam caro e que
   * o desfoque obrigava a serem lidas de novo.
   *
   * O que se perde é quase nada, e isso dá pra contar: o fundo abaixo é preto
   * a 92%, então só 8% do que está atrás atravessa. Desfocar 8% de um sinal é
   * invisível. A translucidez continua igual, só não é mais borrada.
   *
   * Se um dia a barra voltar a ser bem transparente, o desfoque volta a fazer
   * diferença visual, e aí vale trazer de volta sabendo o preço. */
  background-color: rgba(3, 3, 3, 0.92) !important;

  /* A variante clara da barra desenha uma borda cinza-clara embaixo, feita pra
   * fechar a barra contra uma página clara. Sobre o fundo escuro forçado acima
   * ela vira uma linha branca, e como a variante só entra depois da rolagem, a
   * linha aparecia do nada ao descer e voltar.
   *
   * A borda não é uma propriedade comum: a Framer liga data-border="true" e
   * desenha num pseudo-elemento, lendo estas variáveis, que ela escreve no
   * style do próprio nó. Zerar as variáveis apaga a borda desenhada de
   * qualquer jeito, e o !important é o que ganha do style inline. */
  --border-top-width: 0px !important;
  --border-bottom-width: 0px !important;
  --border-color: transparent !important;
}

/* --- A marca na barra -----------------------------------------------------
 *
 * O template traz a marca como imagem: um símbolo redondo e a palavra ao lado.
 * Aqui ela vira texto, "GTS", sem o símbolo.
 *
 * Texto e não um arquivo de imagem novo por três motivos: o src é o React quem
 * escreve, e trocá-lo daria briga a cada repintura; a Framer alterna entre uma
 * versão de traço claro e uma de traço escuro conforme a variante da barra, e
 * a escura sumia sobre o fundo escuro forçado aqui; e uma palavra curta em
 * texto acompanha a tipografia do site sem virar mais um arquivo pra manter.
 *
 * O símbolo redondo continua sendo o favicon, que é onde ele funciona: num
 * quadrado de 16 pixels não cabe palavra nenhuma.
 *
 * O texto do ::after entra na árvore de acessibilidade nos navegadores atuais,
 * então o link continua tendo nome pra leitor de tela. */

nav a[href="./"] {
  display: inline-flex;
  align-items: center;
  /* A marca é um link, e link é alvo de toque: sem o recuo vertical ela teria
   * 20 pixels de altura, metade do que um polegar acerta. O recuo negativo
   * devolve a posição, pra ela não descer na barra. */
  padding: 12px 0;
  margin: -12px 0;
}

/* O !important é necessário: a Framer escreve display: block no atributo style
 * da própria imagem, e style inline ganha de folha de estilo. */
nav a[href="./"] img {
  display: none !important;
}

/* O bloco em volta da imagem é posicionado e ocupa o link inteiro. Sem soltar
 * ele, o link continuaria com a largura da imagem antiga e a palavra sairia
 * deslocada dentro de um espaço grande demais. */
nav a[href="./"] > * {
  position: static !important;
  width: auto !important;
  height: auto !important;
}

/* A marca usa a mono do site, a mesma das tarjas de seção ("WHAT WE DO",
 * "WHERE WE OPERATE"), e não a serifa dos títulos nem a sans do corpo.
 *
 * Sem negrito: numa palavra de três letras maiúsculas o peso extra empasta, e
 * numa mono, onde toda letra já ocupa a mesma caixa, empasta mais ainda. Quem
 * separa a marca dos links do menu é o tamanho e o tracking, não o peso.
 *
 * Tracking aberto, ao contrário da sans e da serifa do site: é o que faz três
 * letras monoespaçadas lerem como marca em vez de sigla digitada. */
nav a[href="./"]::after {
  content: "GTS";
  font-family: var(--gts-mono);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #fff;
}

/* O menu tem duas variantes no template e a Framer troca de uma pra outra
 * conforme a rolagem. A variante clara pinta o texto de #080808, que era pra
 * cair sobre fundo claro; com o fundo escuro forçado acima, vira preto no
 * preto. Era o que acontecia ao descer a página e voltar: o menu sumia.
 *
 * A cor é forçada no galho inteiro porque cada rótulo mora num parágrafo com
 * cor própria, e parágrafo com cor não herda a do link em volta.
 *
 * O hover do botão "Get in touch", mais abaixo, continua ganhando desta
 * regra: ele é mais específico, então a ordem no arquivo não importa. */

nav[data-framer-name^="Desktop"],
nav[data-framer-name^="Tablet"],
nav[data-framer-name^="Phone"],
nav[data-framer-name^="Desktop"] :is(a, p, h1, h2, h3, span),
nav[data-framer-name^="Tablet"] :is(a, p, h1, h2, h3, span),
nav[data-framer-name^="Phone"] :is(a, p, h1, h2, h3, span) {
  color: #fff !important;
}

[data-framer-name="Links"] > *:has(a[href="./customers"]) { order: 1; } /* About us */
[data-framer-name="Links"] > *:has(a[href="./blog"])      { order: 2; } /* What we do */
[data-framer-name="Links"] > *:has(a[href="./pricing"])   { order: 3; } /* Where we operate */
[data-framer-name="Links"] > *:has(a[href="./product"])   { order: 4; } /* How we work */
[data-framer-name="Links"] > *:has(a[href="./company"])   { display: none; }

/* Os dois traços do hambúrguer são caixinhas pintadas, não texto, então a cor
 * forçada acima não chega neles. */
nav[data-framer-name^="Phone"] [data-framer-name="Line"],
nav[data-framer-name^="Tablet"] [data-framer-name="Line"] {
  background-color: #fff !important;
}

/* --- A seta do hero (só no celular) ---------------------------------------
 *
 * No celular o hero ocupa a tela inteira, e sem nenhum sinal no pé dá pra achar
 * que a página acabou ali. A seta é o convite pra descer.
 *
 * No computador ela não existe: lá o hero termina acima da dobra e a seção
 * seguinte já se anuncia sozinha. */

.gts-seta {
  display: none;
}

@media (max-width: 809.98px) {
  #hero {
    /* Âncora da seta, que é posicionada no pé do hero. */
    position: relative;
  }

  .gts-seta {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    /* O deslocamento de metade da largura é o que centraliza de verdade:
     * left: 50% põe a BORDA no meio, não o centro. */
    transform: translateX(-50%);
    /* O env() é a faixa que o sistema reserva embaixo, onde mora a barrinha de
     * início do iPhone. Sem ele a seta cai por baixo dela. Em tela que não tem
     * essa faixa o env() vale zero e sobram os 24px de sempre. */
    bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    z-index: 2;

    /* 44 pixels é a medida de alvo de toque, a mesma dos links do rodapé. */
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    animation: gts-seta-respira 2.4s ease-in-out infinite;
  }

  .gts-seta svg {
    display: block;
    width: 26px;
    height: 26px;
  }

  .gts-seta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 50%;
  }
}

/* O movimento é curto e lento de propósito: é um sinal, não um chamariz. O
 * translateX tem que ser repetido em cada quadro, senão a animação apaga a
 * centralização e a seta pula pro lado. */
@keyframes gts-seta-respira {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.55; }
  50%      { transform: translateX(-50%) translateY(5px); opacity: 1; }
}

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

/* --- Botão "Get in touch" -------------------------------------------------
 *
 * É o botão de conversão do template, reaproveitado. No template ele é branco
 * sólido com texto escuro, que grita chamada pra ação; aqui ele é só um atalho
 * pra seção onde está o email, então fica contorno branco e fundo transparente.
 *
 * A cor do texto vai no galho inteiro porque o rótulo mora num parágrafo lá
 * dentro, com cor própria, e não herda a do link. */

nav [data-framer-name="Primary"] {
  background: transparent !important;
  /* 1px é o traço mais fino que todo navegador desenha igual. Pra parecer mais
   * fino que isso o caminho é baixar a opacidade da cor, não a espessura:
   * abaixo de 1px o traço some em tela comum e vira hairline só em tela de
   * alta densidade, ou seja, ficaria diferente em cada máquina. */
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

nav [data-framer-name="Primary"],
nav [data-framer-name="Primary"] * {
  color: #fff !important;
}

/* --- O que o hover faz ----------------------------------------------------
 *
 * Antes ele enchia o botão de branco e escurecia o texto, que é o hover do
 * template. Fundo branco no meio de uma barra escura rouba a atenção da
 * página inteira, e a inversão de cor no meio do movimento do mouse pisca.
 *
 * Fica só o contorno fechando em branco e um crescimento de 2%. É o bastante
 * pra dizer "isto é clicável" sem virar o elemento mais claro da tela. */

nav [data-framer-name="Primary"]:hover {
  background: transparent !important;
  border-color: #fff !important;
  transform: scale(1.02);
}

/* O foco por teclado é mais forte que o do mouse de propósito: quem navega
 * por Tab não tem cursor pra confirmar onde está. */
nav [data-framer-name="Primary"]:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  nav [data-framer-name="Primary"] {
    transition: none;
  }

  /* Sem movimento sobra o contorno, que já diz o que precisa. */
  nav [data-framer-name="Primary"]:hover {
    transform: none;
  }
}

/* --- Hero -----------------------------------------------------------------
 *
 * O briefing pede fundo preto, texto branco e centralizado. O template entrega
 * o contrário: acima de 1200px ele pinta o título de #080808, quase preto, em
 * cima de uma foto escura. Texto preto sobre foto escura não se lê, e isso vale
 * pra qualquer imagem que entre aqui, então a cor é forçada mais abaixo.
 *
 * A foto de celular do template foi substituída pela Terra vista do espaço, com
 * as rotas ligando os pontos. A troca é por nome de arquivo, que é o mecanismo
 * que o projeto já usa: identidade/imagens/en/ guarda um arquivo com o mesmo
 * nome do original e ele entra no lugar. Por isso não existe caminho de imagem
 * escrito aqui.
 *
 * O preto continua como fundo: é o que aparece enquanto a foto carrega, e é o
 * que sobra nas bordas se o recorte não cobrir tudo. */

#hero { background: #000 !important; }

/* Véu preto por cima da foto, pro texto se destacar.
 *
 * O template já tinha essa camada, chapada e fraca (preto a 33%), calibrada
 * pra foto que veio com ele. Aqui ela vira degradê: pesado em cima, onde mora
 * o título, e aliviando pro fim, pra a Terra não virar uma mancha preta.
 *
 * O degradê corre no sentido de baixo: leve no alto, onde o céu da foto já é
 * quase preto e não precisa de ajuda, e fechando até quase sólido embaixo. Ele
 * termina na cor da seção seguinte, então a emenda entre as duas some.
 *
 * O peso no meio (55%) é o que decide a leitura: é onde o título cai. Medido,
 * com o título branco contra a foto já composta com o véu, dá ~13:1, contra os
 * 4,5:1 que o mínimo de acessibilidade pede. */
#hero [data-framer-name="Overlay"] {
  opacity: 1 !important;
  background-color: transparent !important;
  background-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.45) 55%,
    rgba(0, 0, 0, 0.88) 100%
  ) !important;
}

/* Texto no alto, e não no meio da tela. O padding é o que separa do menu. */
#hero [data-framer-name="Container"] { justify-content: flex-start !important; }

#hero [data-framer-name="Text Container"] {
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 150px !important;
  align-items: center !important;

  /* O recuo da esquerda era o par do filete vertical que o template desenhava
   * ali: texto alinhado à esquerda, fio antes dele, recuo pra afastar um do
   * outro. O fio saiu logo abaixo, mas o recuo ficou, e sem o fio ele só
   * empurra a coluna inteira pra direita: 24px no celular, 32px no computador,
   * contra padding-right zero do outro lado.
   *
   * Num bloco centrado isso é erro puro, e é o que se via no celular, onde
   * 24px em 375 de tela deixavam 40px de margem de um lado e 16px do outro.
   * Zerando os dois, quem dá a margem passa a ser o Container, que já tem a
   * dele e é simétrica. */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* O template desenhava um filete vertical à esquerda do texto, que é o que
 * marcava o começo da coluna quando o texto era alinhado à esquerda. Com o
 * texto centralizado o filete fica solto no meio do nada. */
#hero [data-framer-name="Text Container"]::after {
  border-left: 0 !important;
}

#hero [data-framer-name="Title Wrapper"] {
  justify-content: center !important;
  align-items: center !important;
}

#hero [data-framer-name="Text"],
#hero [data-framer-name="Title"] {
  align-items: center !important;
}

/* --- Quebra do título -----------------------------------------------------
 *
 * O título são dois pedaços no dicionário (title.01 e title.02) que o template
 * emenda num parágrafo só e deixa quebrar onde couber, o que dava quatro linhas
 * tortas. Cada pedaço vira bloco e passa a ocupar a própria linha:
 *
 *   From Brazil to the world:
 *   transforming e-commerce, one country at a time.
 *
 * A segunda linha inteira pede 1290px a 62px de fonte. Acima de 1200px de tela
 * as larguras travadas do template saem do caminho e a fonte encolhe junto com
 * a janela, pra linha continuar cabendo. Abaixo disso a fonte já é menor e a
 * segunda linha quebra sozinha, o que é aceitável: a divisão que importa, a de
 * depois dos dois pontos, continua de pé. */

#hero h1 > span {
  display: block !important;
}

@media (min-width: 1200px) {
  #hero [data-framer-name="Text Container"],
  #hero [data-framer-name="Title Wrapper"],
  #hero [data-framer-name="Text"],
  #hero [data-framer-name="Title"] {
    max-width: none !important;
    width: 100% !important;
  }

  /* O tamanho precisa ir nos spans também, e não só no h1: cada pedaço do
   * título carrega o próprio font-size, então encolher só o h1 não muda nada
   * do que aparece na tela.
   *
   * A linha comprida pede cerca de 21,3px de largura por px de fonte, e a
   * coluna do texto é ~89% da janela. 4,2vw cai em cima do limite e a linha
   * quebra; 4vw deixa folga. */
  #hero h1,
  #hero h1 > span {
    font-size: min(62px, 4vw) !important;
  }
}

/* A cor vem de uma variável da Framer que muda por breakpoint, então não dá
 * pra acertar mirando um seletor só: é o galho inteiro do texto. */
#hero [data-framer-name="Text Container"] * {
  color: #fff !important;
  text-align: center !important;
}

/* --- O hero no celular ----------------------------------------------------
 *
 * Três coisas, e todas vêm do template ter sido desenhado pra tela grande.
 *
 * 1. A ALTURA. O template pede 100vh. No celular vh é mentira: o navegador
 *    mede a tela SEM a barra de endereço, que está lá na hora que a página
 *    abre. O hero nasce mais alto que o buraco onde ele cabe, e o que está no
 *    pé dele, que é a seta, fica embaixo da barra do navegador. Era a seta
 *    cortada. svh é a mesma conta feita com a barra na tela, ou seja o menor
 *    tamanho que a janela chega a ter, então o pé do hero nunca some. Fica
 *    depois do 100vh do template de propósito: navegador que não conhece svh
 *    ignora a linha e continua com o que tinha.
 *
 * 2. O TAMANHO DO TÍTULO. 48px numa coluna de 343px quebravam a segunda
 *    frase em quatro linhas e o bloco de texto passava de 500px de altura
 *    num hero de 812. A fonte agora acompanha a largura da tela.
 *
 * 3. O RESPIRO DO ALTO. Com o título menor, 110px de recuo deixavam o bloco
 *    boiando; 88px encostam ele no menu na medida certa. */

@media (max-width: 809.98px) {
  #hero {
    height: 100svh !important;
  }

  /* O bloco de texto é centrado na vertical pelo "Hero Content" do template.
   * Centrado puro, ele fica a quase 200px da seta, e os dois param de ler
   * como uma coisa só: o título flutua no meio e a seta parece perdida no pé
   * da tela. O recuo do alto empurra o bloco pra baixo dentro da caixa
   * centrada, aproximando ele da seta. */
  #hero [data-framer-name="Text Container"] { padding-top: 200px !important; }

  /* O tamanho vai no h1 E nos spans: cada pedaço do título carrega font-size
   * próprio, então mexer só no h1 não muda o que aparece.
   *
   * O valor foi medido, não escolhido no olho. "transforming e-commerce, one"
   * é a linha mais comprida do título, e acima de ~27px ela deixa de caber na
   * coluna. Quando não cabe, o navegador quebra na única oportunidade que
   * sobra, que é o hífen de "e-commerce": o título aparecia com "transforming
   * e-" numa linha e "commerce, one" na outra, que lê como palavra partida
   * errada. Nenhuma propriedade de CSS proíbe essa quebra (word-break:
   * keep-all foi testado e não muda nada aqui), então quem resolve é o
   * tamanho.
   *
   * Por isso a medida é em vw e não em px: a coluna também cresce com a tela,
   * então a proporção entre a linha e a coluna fica igual em 360, 375, 393 ou
   * 430 de largura, e a quebra em três linhas se mantém em todos. Os limites
   * do clamp seguram as pontas: 23px pra tela minúscula e 32px pro tablet,
   * onde o título já cabe folgado. */
  #hero h1,
  #hero h1 > span {
    font-size: clamp(28px, 8.65vw, 40px) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.015em !important;
  }
}