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

:root {
  /* unidade de escala dos painéis: vale 1vw quando o viewport é 16:9,
     e encolhe proporcionalmente quando a altura visível é menor
     (barra do navegador, taskbar) — assim o conteúdo nunca vaza pra baixo.
     Use --u no lugar de vw para tudo que vive dentro de um painel. */
  --u: min(1vw, calc(100svh / 56.25));
  --sans: 'Poppins', system-ui, -apple-system, sans-serif;
  --hand: 'Caveat', cursive;
  --cream: #F2E8D6;
  --orange: #F4671F;
  --lime: #C6F135;
  --gold: #C0912E;
  --navy: #1C3A5E;
  --pg-dark: #1C5A41;
  --pg-ink: #143C2E;
  --pg-light: #D9EFA6;
}

html {
  scroll-behavior: smooth;
  /* scroll trava de painel em painel */
  scroll-snap-type: y mandatory;
}

body {
  font-family: var(--sans);
  background: #fff;
}

/* ============ painéis: ocupam exatamente a área visível ============ */
.panel {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always; /* impede pular painéis num fling só */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* recorte da arte por painel — o viewport é mais baixo que 16:9,
   então cada painel define de onde sai a faixa cortada */
#universo { background-position: center top; }      /* corte embaixo */
#oceano { background-position: center; }            /* corte cima + baixo */
#pre-historia { background-position: center bottom; } /* corte em cima */
#grecia { background-position: center; }            /* corte cima + baixo */
#industrial { background-position: center top; }    /* corte embaixo */
#moderno { background-position: center bottom; }    /* corte em cima */

.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.content {
  position: absolute;
  z-index: 1;
}

/* ============ botões base ============ */
.btn-row {
  display: flex;
  align-items: center;
  gap: calc(1.2 * var(--u));
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: calc(0.7 * var(--u));
  text-decoration: none;
  font-weight: 500;
  font-size: calc(1 * var(--u));
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.arr {
  font-size: 0.95em;
}

/* botões de agendamento (Cal.com) — âncoras sem href precisam do cursor */
.cal-trigger {
  cursor: pointer;
}

/* ============ 1. UNIVERSO — hero ============ */
/* =====================================================================
   AJUSTE DA HERO — mexa só nos números abaixo. Cada elemento tem
   tamanho (*-tam) e posição própria (*-x desloca pra direita se positivo,
   *-y desce se positivo; ambos em unidades --u ≈ 1% da largura da tela).

   Bloco inteiro:
   --hero-x / --hero-y = posição do bloco na tela (%; 45 = quase no meio)
   --hero-larg         = largura do bloco (% da tela)

   Logo:    --logo-tam (% da largura do bloco) + --logo-x / --logo-y
   Legenda: --legenda-tam (tamanho do texto) + --legenda-dist (distância
            vertical da logo) + --legenda-x / --legenda-y
   Botões:  --botoes-tam (escala; 1 = normal, 1.2 = 20% maior) +
            --botoes-dist (distância da legenda) + --botoes-x / --botoes-y
   ===================================================================== */
.hero {
  --hero-x: 7;
  --hero-y: 45;
  --hero-larg: 33;

  --logo-tam: 100;
  --logo-x: 2;
  --logo-y: 0;

  --legenda-tam: 1.5;
  --legenda-dist: 1.6;
  --legenda-x: -1.5;
  --legenda-y: -6;

  --botoes-tam: 1.1;
  --botoes-dist: 2;
  --botoes-x: -1.5;
  --botoes-y: -6;

  left: calc(var(--hero-x) * 1%);
  top: calc(var(--hero-y) * 1%);
  transform: translateY(-50%);
  width: calc(var(--hero-larg) * 1%);
}

.hero-logo {
  /* o PNG da marca tem margens transparentes; as margens negativas compensam */
  display: block;
  width: calc(var(--logo-tam) * 1%);
  max-width: none;
  height: auto;
  margin: -9% 0 -7% -9.5%;
  translate: calc(var(--logo-x) * var(--u)) calc(var(--logo-y) * var(--u));
}

.hero-sub {
  margin-top: calc(var(--legenda-dist) * var(--u));
  font-weight: 300;
  font-size: calc(var(--legenda-tam) * var(--u));
  line-height: 1.5;
  color: #fff;
  text-align: center; /* centralizada no bloco da hero */
  translate: calc(var(--legenda-x) * var(--u)) calc(var(--legenda-y) * var(--u));
}

.hero-sub strong {
  font-weight: 700; /* gap / fix / grow em destaque */
}

.hero .btn-row {
  margin-top: calc(var(--botoes-dist) * var(--u));
  justify-content: center; /* botões centralizados no bloco da hero */
  translate: calc(var(--botoes-x) * var(--u)) calc(var(--botoes-y) * var(--u));
  scale: var(--botoes-tam);
  transform-origin: 50% 0;
}

.btn-cream-solid,
.btn-cream-outline {
  border-radius: 999px;
  padding: calc(1.05 * var(--u)) calc(1.9 * var(--u));
}

.btn-cream-solid {
  background: #fff;
  color: #182743;
  font-weight: 600;
}

.btn-cream-outline {
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  /* fundo sólido na cor do céu da arte — sem estrelas vazando dentro do botão */
  background: #152142;
}

.btn-cream-outline:hover {
  background: #1e2c55;
}

/* =====================================================================
   AJUSTE DO MASCOTE — mexa só nos números abaixo.
   --mascote-tam = tamanho (unidades --u)
   --mascote-x   = distância da borda DIREITA da tela (% da tela)
   --mascote-y   = distância do topo (% da tela)
   --flut-amp    = amplitude da flutuação (--u; maior = flutua mais longe)
   --flut-dur    = duração de um ciclo de flutuação (segundos)
   --mascote-tilt = inclinação base (graus; negativo tomba pra esquerda)
   ===================================================================== */
.hero-mascote {
  --mascote-tam: 18;
  --mascote-x: 16;
  --mascote-y: 30;
  --flut-amp: 1.1;
  --flut-dur: 7;
  --mascote-tilt: -8;

  position: absolute;
  z-index: 1;
  right: calc(var(--mascote-x) * 1%);
  top: calc(var(--mascote-y) * 1%);
  width: calc(var(--mascote-tam) * var(--u));
  height: auto;
  animation: mascote-flutua calc(var(--flut-dur) * 1s) ease-in-out infinite;
}

/* deriva suave em Y com leve balanço em torno da inclinação base */
@keyframes mascote-flutua {
  0%   { transform: translate(0, 0) rotate(calc((var(--mascote-tilt) - 2.5) * 1deg)); }
  50%  { transform: translate(calc(0.5 * var(--u)), calc(-1 * var(--flut-amp) * var(--u))) rotate(calc((var(--mascote-tilt) + 2) * 1deg)); }
  100% { transform: translate(0, 0) rotate(calc((var(--mascote-tilt) - 2.5) * 1deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mascote { animation: none; transform: rotate(calc(var(--mascote-tilt) * 1deg)); }
}

/* =====================================================================
   AJUSTE DOS PLANETAS — mexa só nos números abaixo. Para cada planeta:
   --tam   = tamanho (unidades --u)
   --x     = distância da borda DIREITA da tela (% da tela)
   --y     = distância do topo (% da tela)
   --amp   = amplitude da flutuação (--u; todos bem menores que o mascote)
   --dur   = duração de um ciclo (durações diferentes = nunca sincronizam)
   --delay = defasagem do ciclo (negativo começa no meio do movimento)
   ===================================================================== */
.planeta-saturno { --tam: 14;  --x: 3;  --y: 20; --amp: 0.5;  --dur: 13s; --delay: 0s; }
.planeta-terra   { --tam: 9;   --x: 29; --y: 62; --amp: 0.45; --dur: 17s; --delay: -6s; }
.planeta-azul    { --tam: 5; --x: 35; --y: 14; --amp: 0.4;  --dur: 11s; --delay: -3s; }
.planeta-roxo    { --tam: 7;   --x: 6;  --y: 62; --amp: 0.45; --dur: 15s; --delay: -9s; }

.planeta {
  position: absolute;
  z-index: 1; /* mesmo nível do mascote, mas antes no HTML = fica atrás */
  right: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--tam) * var(--u));
  height: auto;
  animation: planeta-flutua var(--dur) ease-in-out infinite;
  animation-delay: var(--delay);
}

/* só sobe e desce, sem rotação — flutuação mais delicada que a do mascote */
@keyframes planeta-flutua {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(-1 * var(--amp) * var(--u))); }
}

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

/* =====================================================================
   AJUSTE DO COMETA — mexa só nos números abaixo.
   --tam = tamanho (--u) | --x = dist. da borda direita (%) | --y = topo (%)
   --amp = distância da deriva (--u) | --dur = duração do vai-e-vem
   Ele desliza devagar ao longo da própria trajetória (diagonal da cauda).
   ===================================================================== */
.cometa {
  --tam: 11;
  --x: 55;
  --y: 6;
  --amp: 0.9;
  --dur: 19s;

  position: absolute;
  z-index: 1;
  right: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--tam) * var(--u));
  height: auto;
  animation: cometa-deriva var(--dur) ease-in-out infinite alternate;
}

/* deriva no eixo do voo: baixo-esquerda <-> cima-direita, bem devagar */
@keyframes cometa-deriva {
  from { transform: translate(calc(var(--amp) * var(--u)), calc(-0.65 * var(--amp) * var(--u))); }
  to   { transform: translate(calc(-1 * var(--amp) * var(--u)), calc(0.65 * var(--amp) * var(--u))); }
}

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

/* ---- carrossel infinito de clientes (marquee) ---- */
.clients {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: calc(2.2 * var(--u));
}

.clients-label {
  text-align: center;
  font-size: calc(0.75 * var(--u));
  font-weight: 600;
  letter-spacing: 0.32em;
  color: rgba(255, 255, 255, 0.32);
  margin-bottom: calc(1.2 * var(--u));
}

.marquee {
  overflow: hidden;
  /* fade nas bordas laterais */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}

.marquee-track {
  /* a esteira é movida pelo assets/js/marquee.js (velocidade lá).
     ATENÇÃO: sem will-change/translateZ aqui de propósito — promover a
     esteira a camada de compositor faz o Chrome despejar os tiles fora
     da tela e as logos passam a entrar invisíveis pela direita */
  display: flex;
  width: max-content;
}

/* 4 conjuntos idênticos; o JS faz o wrap na metade da esteira (2 conjuntos).
   Precisa de 2 conjuntos por metade porque 1 conjunto (~86% da tela, já que
   tudo escala com --u) é mais estreito que o viewport — com 1 só, aparecia
   um vazio atrás da última logo antes do wrap. */
.marquee-set {
  display: flex;
  align-items: center;
  flex: none;
  gap: calc(6 * var(--u));
  padding-right: calc(6 * var(--u));
}

/* =====================================================================
   AJUSTE DAS LOGOS DO CARROSSEL — mexa só nos números abaixo.
   *-tam  = TAMANHO da logo (maior número = logo maior)
   *-alt  = ALTURA/posição vertical (positivo desce, negativo sobe, 0 = centro)
   Os valores são em unidades da tela (--u ≈ 1% da largura da janela).
   ===================================================================== */
.marquee-set {
  --key2enable-tam: 6;   --key2enable-alt: -0.2;
  --clara-tam: 4.2;        --clara-alt: 0;
  --tarsi-tam: 5;        --tarsi-alt: -0.2;
  --hubble-tam: 4.8;       --hubble-alt: 0;
  --gedaii-tam: 3.2;       --gedaii-alt: 0;
}

.marquee-set a {
  display: block; /* o link abraça a logo sem espaço fantasma */
}

.marquee-set img {
  width: auto;
  opacity: 0.55;
  transition: opacity 0.25s ease;
}

.marquee-set img[src*="key2enable"] {
  height: calc(var(--key2enable-tam) * var(--u));
  transform: translateY(calc(var(--key2enable-alt) * var(--u)));
}

.marquee-set img[src*="clara-senior"] {
  height: calc(var(--clara-tam) * var(--u));
  transform: translateY(calc(var(--clara-alt) * var(--u)));
}

.marquee-set img[src*="tarsi-ai"] {
  height: calc(var(--tarsi-tam) * var(--u));
  transform: translateY(calc(var(--tarsi-alt) * var(--u)));
}

.marquee-set img[src*="hubble"] {
  height: calc(var(--hubble-tam) * var(--u));
  transform: translateY(calc(var(--hubble-alt) * var(--u)));
}

.marquee-set img[src*="gedaii"] {
  height: calc(var(--gedaii-tam) * var(--u));
  transform: translateY(calc(var(--gedaii-alt) * var(--u)));
}

.marquee-set img:hover {
  opacity: 1;
}

/* ============ 2. OCEANO ============ */
/* =====================================================================
   AJUSTE DO MASCOTE MERGULHADOR — mexa só nos números abaixo.
   --mergulhador-tam  = tamanho (unidades --u)
   --mergulhador-x    = distância da borda ESQUERDA da tela (% da tela)
   --mergulhador-y    = distância do topo (% da tela)
   --mergulhador-amp  = amplitude do boiar (--u)
   --mergulhador-dur  = duração de um ciclo (segundos)
   --mergulhador-tilt = inclinação base (graus; positivo tomba pra direita)
   ===================================================================== */
.oceano-mascote {
  --mergulhador-tam: 18;
  --mergulhador-x: 18;
  --mergulhador-y: 32;
  --mergulhador-amp: 1.3;
  --mergulhador-dur: 8;
  --mergulhador-tilt: 6;

  position: absolute;
  z-index: 1;
  left: calc(var(--mergulhador-x) * 1%);
  top: calc(var(--mergulhador-y) * 1%);
  width: calc(var(--mergulhador-tam) * var(--u));
  height: auto;
  /* reusa a animação do mascote da hero com os próprios valores */
  --mascote-tilt: var(--mergulhador-tilt);
  --flut-amp: var(--mergulhador-amp);
  animation: mascote-flutua calc(var(--mergulhador-dur) * 1s) ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .oceano-mascote { animation: none; transform: rotate(calc(var(--mergulhador-tilt) * 1deg)); }
}

/* =====================================================================
   AJUSTE DO OCEANO — mexa só nos números abaixo.
   --oceano-x    = posição horizontal do bloco (% da tela, da esquerda)
   --oceano-y    = posição vertical do bloco (% do topo; maior = desce)
   --oceano-larg = largura do bloco (% da tela; muda onde o texto quebra)
   --oceano-tam  = escala do conjunto INTEIRO (1 = normal, 1.1 = 10% maior,
                   0.9 = 10% menor — título, itens, frases e botões juntos)
   ===================================================================== */
.ocean {
  --oceano-x: 56.5;
  --oceano-y: 16;
  --oceano-larg: 31.5;
  --oceano-tam: 1;

  left: calc(var(--oceano-x) * 1%);
  top: calc(var(--oceano-y) * 1%);
  width: calc(var(--oceano-larg) * 1%);
  scale: var(--oceano-tam);
  transform-origin: 50% 0; /* escala a partir do topo, sem sair do lugar */
}

.ocean-title {
  font-size: calc(3.3 * var(--u));
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 60, 90, 0.25);
}

.ocean-title span {
  color: var(--lime);
}

.ocean-cards {
  list-style: none;
  margin-top: calc(1.8 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(1.5 * var(--u));
}

/* itens sem caixa, como na referência: só o tile do ícone + texto */
.ocean-cards li {
  display: flex;
  align-items: center;
  gap: calc(1.3 * var(--u));
}

.o-ico {
  flex: none;
  width: calc(3.2 * var(--u));
  height: calc(3.2 * var(--u));
  border-radius: calc(0.65 * var(--u)); /* quadrado arredondado */
  display: grid;
  place-items: center;
  background: rgba(10, 72, 88, 0.55); /* teal escuro translúcido */
  color: var(--lime);
}

.o-ico svg {
  width: 50%;
  height: 50%;
}

.ocean-cards p {
  font-size: calc(1.05 * var(--u));
  line-height: 1.4;
  color: rgba(205, 232, 240, 0.78); /* 2ª linha mais apagada */
}

.ocean-cards strong {
  display: block;
  font-weight: 700;
  color: #fff;
}

.ocean-caps {
  margin-top: calc(1.7 * var(--u));
  font-size: calc(1.5 * var(--u));
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: #fff;
}

.ocean-hand {
  margin-top: calc(0.5 * var(--u));
  font-family: var(--hand);
  font-weight: 700;
  font-size: calc(2 * var(--u));
  color: var(--lime);
  text-shadow: 0 1px 10px rgba(0, 80, 100, 0.35);
}

.ocean-hand .u {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: calc(0.35 * var(--u));
}

.ocean .btn-row {
  margin-top: calc(1.6 * var(--u));
}

.btn-lime,
.btn-teal-outline {
  border-radius: calc(0.6 * var(--u));
  padding: calc(1 * var(--u)) calc(1.6 * var(--u));
  font-weight: 700;
  font-size: calc(0.95 * var(--u));
  letter-spacing: 0.08em;
}

.btn-lime {
  background: var(--lime);
  color: #123B4F;
  box-shadow: 0 6px 18px rgba(30, 90, 60, 0.25);
}

.btn-teal-outline {
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(10, 60, 78, 0.35);
  color: #fff;
}

/* ============ 3. PRÉ-HISTÓRIA — how it works ============ */
/* =====================================================================
   AJUSTE DO PAINEL 3 (bloco esquerdo) — mexa só nos números abaixo.
   (o título-imagem tem painel próprio logo abaixo: AJUSTE DO TÍTULO)

   Bloco inteiro: --ph-x / --ph-y (posição % na tela) + --ph-larg (largura %)
   Legenda "Diagnose first...": --tag-tam (texto) + --tag-dist (distância
       do título) + --tag-x / --tag-y (deslocamento fino em --u)
   Botões: --botoes3-tam (escala; 1 = normal) + --botoes3-dist (distância
       da legenda) + --botoes3-x / --botoes3-y (deslocamento fino em --u)
   ===================================================================== */
.ph-left {
  --ph-x: 7.5;
  --ph-y: 14;
  --ph-larg: 27;

  --tag-tam: 1.6;
  --tag-dist: 1.6;
  --tag-x: 4.6;
  --tag-y: -1;

  --botoes3-tam: 1.1;
  --botoes3-dist: 1.8;
  --botoes3-x: 3.2;
  --botoes3-y: -1;

  left: calc(var(--ph-x) * 1%);
  top: calc(var(--ph-y) * 1%);
  width: calc(var(--ph-larg) * 1%);
}

/* =====================================================================
   AJUSTE DO TÍTULO "How it works" (imagem de lettering) — números abaixo.
   --titulo-larg = largura da arte (--u)
   --titulo-x    = desloca horizontal (--u; positivo direita)
   --titulo-y    = desloca vertical (--u; positivo desce)
   ===================================================================== */
.ph-title-img {
  --titulo-larg: 26;
  --titulo-x: 3;
  --titulo-y: 0;

  display: block;
  width: calc(var(--titulo-larg) * var(--u));
  height: auto;
  translate: calc(var(--titulo-x) * var(--u)) calc(var(--titulo-y) * var(--u));
}

.ph-tag {
  margin-top: calc(var(--tag-dist) * var(--u));
  font-size: calc(var(--tag-tam) * var(--u));
  font-weight: 600;
  color: var(--pg-dark);
  translate: calc(var(--tag-x) * var(--u)) calc(var(--tag-y) * var(--u));
}

.ph-left .btn-row {
  margin-top: calc(var(--botoes3-dist) * var(--u));
  translate: calc(var(--botoes3-x) * var(--u)) calc(var(--botoes3-y) * var(--u));
  scale: var(--botoes3-tam);
  transform-origin: 0 0;
}

.btn-green-solid,
.btn-white-outline {
  border-radius: calc(0.7 * var(--u));
  padding: calc(1 * var(--u)) calc(1.6 * var(--u));
  font-weight: 600;
  font-size: calc(1 * var(--u));
}

.btn-green-solid {
  background: var(--pg-light);
  color: var(--pg-ink);
  box-shadow: 0 6px 18px rgba(40, 100, 70, 0.18);
}

.btn-white-outline {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(160, 175, 160, 0.6);
  color: var(--pg-ink);
}

.btn-green-solid svg,
.btn-white-outline svg {
  width: calc(1.1 * var(--u));
  height: calc(1.1 * var(--u));
}

.ph-div {
  position: absolute;
  z-index: 1;
  left: 39.5%;
  top: 15%;
  height: 37%;
  width: 1.5px;
  background: rgba(255, 255, 255, 0.75);
}

/* =====================================================================
   AJUSTE DA SEÇÃO DOS STEPS (bloco direito do painel 3) — números abaixo.
   --phr-x / --phr-y = posição do bloco (% da tela)
   --phr-larg        = largura do bloco (% da tela)
   --phr-tam         = escala do conjunto INTEIRO (steps + frase; 1 = normal)
   ===================================================================== */
.ph-right {
  --phr-x: 43;
  --phr-y: 15.5;
  --phr-larg: 51;
  --phr-tam: 1.05;

  left: calc(var(--phr-x) * 1%);
  top: calc(var(--phr-y) * 1%);
  width: calc(var(--phr-larg) * 1%);
  scale: var(--phr-tam);
  transform-origin: 50% 0;
}

.ph-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: calc(1.2 * var(--u));
}

.ph-step {
  position: relative;
  text-align: center;
}

/* =====================================================================
   AJUSTE DOS STEPS (ícones/números do painel 3) — números abaixo.
   --ico-tam   = tamanho dos ícones (--u)
   --num-tam   = diâmetro dos círculos numerados (--u)
   --num-fonte = tamanho do número dentro do círculo (--u)
   ===================================================================== */
.ph-steps {
  --ico-tam: 3.9;
  --num-tam: 3.6;
  --num-fonte: 1.5;
}

.ph-ico {
  height: calc((var(--ico-tam) + 0.6) * var(--u));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: calc(0.9 * var(--u));
  color: #16382C;
}

.ph-ico svg {
  width: calc(var(--ico-tam) * var(--u));
  height: calc(var(--ico-tam) * var(--u));
}

.ph-num {
  position: relative;
  z-index: 1;
  width: calc(var(--num-tam) * var(--u));
  height: calc(var(--num-tam) * var(--u));
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pg-light);
  color: var(--pg-ink);
  font-weight: 700;
  font-size: calc(var(--num-fonte) * var(--u));
  box-shadow: 0 3px 10px rgba(40, 100, 70, 0.18);
}

/* linha tracejada entre os círculos: traços longos, como na referência */
.ph-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc((var(--ico-tam) + 0.6 + 0.9 + var(--num-tam) / 2) * var(--u));
  left: calc(50% + (var(--num-tam) / 2 + 0.6) * var(--u));
  /* do círculo atual até o próximo (100% da coluna + gap - círculo - folgas) */
  width: calc(100% - var(--num-tam) * var(--u));
  height: 2.5px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, 0.9) 0 calc(0.7 * var(--u)),
    transparent calc(0.7 * var(--u)) calc(1.25 * var(--u)));
}

.ph-step h4 {
  margin-top: calc(1 * var(--u));
  font-size: calc(1.2 * var(--u));
  font-weight: 700;
  color: var(--pg-ink);
}

.ph-step p {
  margin-top: calc(0.5 * var(--u));
  font-size: calc(0.92 * var(--u));
  line-height: 1.4;
  color: #1F4D3F;
}

/* frase final: sem caixa, sem ícone — só texto centralizado */
.ph-card {
  margin-top: calc(2.6 * var(--u));
}

.ph-card-text {
  text-align: center;
}

.ph-card-text .strong {
  font-size: calc(1.25 * var(--u));
  font-weight: 700;
  color: var(--pg-ink);
}

.ph-card-text .script {
  font-family: var(--hand);
  font-weight: 700;
  font-size: calc(1.8 * var(--u));
  color: #2E7D4F;
}

/* =====================================================================
   AJUSTE DOS BOTÕES-IMAGEM DO PAINEL GREGO
   --gbtn-tam = altura dos botões (--u) | gap no .greek-btns abaixo
   ===================================================================== */
.greek-btns {
  --gbtn-tam: 3.9;
  --gbtn-y: 0.6; /* desce os botões (--u; negativo sobe) */
  gap: calc(1.4 * var(--u));
  translate: 0 calc(var(--gbtn-y) * var(--u));
}

.btn-png {
  display: block;
  cursor: pointer;
  transition: transform 0.22s ease, filter 0.22s ease;
}

.btn-png img {
  display: block;
  height: calc(var(--gbtn-tam) * var(--u));
  width: auto;
}

/* hover: levanta com brilho dourado, cada botão independente */
.btn-png:hover {
  transform: translateY(-3px) scale(1.03);
  filter: brightness(1.07) drop-shadow(0 8px 18px rgba(192, 145, 46, 0.45));
}

/* ============ 4. GRÉCIA ============ */
.greek-panel::before {
  background: linear-gradient(90deg, rgba(255, 248, 235, 0.88) 0%, rgba(255, 248, 235, 0.5) 38%, rgba(255, 248, 235, 0) 62%);
}

.greek {
  left: 8.5%;
  top: 12%;
  width: 45%;
  text-align: center;
}

.greek-ornament {
  width: 62%;
  margin: 0 auto calc(2 * var(--u));
  color: var(--gold);
}

.greek-title {
  font-size: calc(3.3 * var(--u));
  font-weight: 700;
  color: var(--navy);
}

.greek-title .slash {
  color: var(--gold);
  font-weight: 500;
}

.greek-sub {
  margin-top: calc(1 * var(--u));
  font-size: calc(1.05 * var(--u));
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.6;
  color: #20456B;
}

.greek-sub .gold {
  color: var(--gold);
}

.greek-cols {
  margin-top: calc(2.4 * var(--u));
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.gcol {
  flex: 1;
  padding: 0 calc(1.4 * var(--u));
}

.gdiv {
  flex: none; /* não deixa o flex esmagar o divisor */
  width: 1.5px; /* >1px pra nunca sumir em zoom/subpixel */
  background: linear-gradient(to bottom, rgba(192, 145, 46, 0), rgba(192, 145, 46, 0.6), rgba(192, 145, 46, 0));
}

.g-ico {
  width: calc(4 * var(--u));
  height: calc(4 * var(--u));
  margin: 0 auto calc(0.9 * var(--u));
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(192, 145, 46, 0.8);
  background: rgba(255, 246, 225, 0.6);
  color: #B98A2E;
}

.g-ico svg {
  width: 50%;
  height: 50%;
}

.gcol h3 {
  font-size: calc(1.3 * var(--u));
  font-weight: 700;
  color: var(--navy);
  margin-bottom: calc(0.5 * var(--u));
}

.gcol p {
  font-size: calc(0.95 * var(--u));
  line-height: 1.45;
  color: #2A4A6B;
}

.greek-btns {
  margin-top: calc(2.6 * var(--u));
  justify-content: center;
  gap: calc(1.8 * var(--u));
}

.btn-navy-gold,
.btn-gold-outline {
  border-radius: calc(0.4 * var(--u));
  padding: calc(1.05 * var(--u)) calc(2.1 * var(--u));
  font-weight: 600;
  font-size: calc(0.95 * var(--u));
  letter-spacing: 0.18em;
}

.btn-navy-gold {
  background: #132C4A;
  color: #E8C767;
  border: 1px solid #C9A23A;
  outline: 1px solid rgba(201, 162, 58, 0.45);
  outline-offset: 3px;
}

.btn-navy-gold .leaf {
  width: calc(1.1 * var(--u));
  height: calc(1.1 * var(--u));
}

.btn-gold-outline {
  background: rgba(255, 250, 238, 0.65);
  border: 1px solid #C9A23A;
  color: var(--navy);
}

/* ============ 5. INDUSTRIAL ============ */
.factory-panel::before {
  background: linear-gradient(90deg, rgba(8, 7, 10, 0.78) 0%, rgba(8, 7, 10, 0.5) 36%, rgba(8, 7, 10, 0.12) 60%, rgba(8, 7, 10, 0) 74%);
}

/* =====================================================================
   AJUSTE DO PAINEL INDUSTRIAL — mexa só nos números abaixo.
   --fab-x / --fab-y = posição do bloco do TÍTULO (% da tela)
   --fab-larg        = largura do bloco do título (%)
   --cards-larg      = largura dos CARDS + frase (% da TELA; eles se
                       centralizam sozinhos no painel, independente do título)
   ===================================================================== */
.factory {
  --fab-x: 8.5;
  --fab-y: 15;
  --fab-larg: 68;
  --cards-larg: 78;
  --cards-desce: 3.4; /* distância dos cards abaixo do título (--u) */

  left: calc(var(--fab-x) * 1%);
  top: calc(var(--fab-y) * 1%);
  width: calc(var(--fab-larg) * 1%);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: calc(1 * var(--u));
  font-size: calc(0.95 * var(--u));
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--orange);
}

.eyebrow .dash {
  width: calc(3 * var(--u));
  height: 2px;
  background: var(--orange);
  opacity: 0.9;
}

.factory-title {
  margin-top: calc(1.3 * var(--u));
  font-size: calc(3.3 * var(--u));
  font-weight: 700;
  line-height: 1.08;
  color: #fff;
}

.factory-title span {
  color: var(--orange);
}

.factory-sub {
  margin-top: calc(1.2 * var(--u));
  font-size: calc(1.08 * var(--u));
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

/* cards como placas de especificação de máquina: aço quente com
   fio de latão, tag gravada nomeando o sistema que resolve o gargalo */
.factory-cards {
  margin-top: calc(var(--cards-desce) * var(--u));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(1.3 * var(--u));
}

/* cards e frase saem do bloco do título e se centralizam na TELA */
.factory-cards,
.factory-base {
  width: calc(var(--cards-larg) / var(--fab-larg) * 100%);
  margin-left: calc((50 - var(--cards-larg) / 2 - var(--fab-x)) / var(--fab-larg) * 100%);
}

.factory-cards article {
  padding: calc(1.4 * var(--u)) calc(1.3 * var(--u));
  border-radius: calc(0.7 * var(--u));
  background: rgba(16, 12, 9, 0.62);
  border: 1px solid rgba(201, 156, 85, 0.3);
  /* fio interno de placa usinada */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.factory-cards article:hover {
  transform: translateY(-3px);
  border-color: rgba(201, 156, 85, 0.65);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 14px 34px rgba(0, 0, 0, 0.4);
}

/* rótulo do produto: pequeno, espaçado, com fio que se dissolve — delicado */
.f-tag {
  display: flex;
  align-items: center;
  gap: calc(0.8 * var(--u));
  font-size: calc(0.72 * var(--u));
  font-weight: 600;
  letter-spacing: 0.28em;
  white-space: nowrap;
  color: #E8C387;
  transition: color 0.25s ease;
}

.f-tag::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(232, 195, 135, 0.5), rgba(232, 195, 135, 0));
}

.factory-cards article:hover .f-tag {
  color: #F6D9A8;
}

.factory-cards h3 {
  margin-top: calc(1.2 * var(--u));
  font-size: calc(1.05 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  /* reserva 2 linhas: as linhas laranja e descrições alinham entre os cards */
  min-height: calc(2.75 * var(--u));
}

.factory-cards .rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--orange), rgba(244, 103, 31, 0));
  margin: calc(0.8 * var(--u)) 0 calc(0.9 * var(--u));
}

.factory-cards article p {
  font-size: calc(0.88 * var(--u));
  line-height: 1.5;
  color: rgba(255, 238, 225, 0.85);
}

/* linha do fabricante gravada na base — sem caixa, sem logo */
.factory-base {
  margin-top: calc(2 * var(--u));
}

.base-rule {
  height: 1.5px;
  background: linear-gradient(90deg, rgba(201, 156, 85, 0), rgba(201, 156, 85, 0.55) 12%, rgba(201, 156, 85, 0.55) 88%, rgba(201, 156, 85, 0));
}

.factory-base p {
  /* pílula escura pra frase ler bem sobre o chão claro da arte,
     centralizada em relação à TELA (compensa o bloco ficar à esquerda) */
  width: fit-content;
  margin: calc(1.1 * var(--u)) auto 0;
  display: flex;
  align-items: center;
  gap: calc(0.7 * var(--u));
  padding: calc(0.7 * var(--u)) calc(1.6 * var(--u));
  border-radius: 999px;
  background: rgba(12, 9, 7, 0.55);
  border: 1px solid rgba(201, 156, 85, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: calc(1.05 * var(--u));
  color: rgba(255, 245, 236, 0.95);
}

.factory-base .spark {
  flex: none;
  width: calc(1.3 * var(--u));
  height: calc(1.3 * var(--u));
  color: var(--orange);
}

.factory-base .orange {
  color: var(--orange);
  font-weight: 600;
}

/* ============ 6. MODERNO — CTA ============ */
/* =====================================================================
   AJUSTE DO BOTÃO FINAL (book a call em imagem) — números abaixo.
   --cta-tam = altura do botão (--u)
   --cta-x   = posição horizontal do CENTRO do botão (% da tela; 50 = meio)
   --cta-y   = distância do fundo do painel (% da tela; maior = mais alto)
   ===================================================================== */
.cta-img {
  --cta-tam: 7;
  --cta-x: 50;
  --cta-y: 42;

  position: absolute;
  z-index: 1;
  left: calc(var(--cta-x) * 1%);
  bottom: calc(var(--cta-y) * 1%);
  translate: -50% 0;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.cta-img img {
  display: block;
  height: calc(var(--cta-tam) * var(--u));
  width: auto;
}

.cta-img:hover {
  transform: translateY(-4px) scale(1.03);
  filter: brightness(1.05) drop-shadow(0 12px 28px rgba(20, 60, 120, 0.35));
}

/* ============ navbar ============ */
/* (UI fixa por cima dos painéis — dimensões em px de propósito,
   não usa a unidade --u dos painéis) */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: 64px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 30px;
  background: #fff;
  border-bottom: 1px solid rgba(10, 20, 40, 0.08);
  /* folga extra além de -100%: evita a linhazinha de 1px que o
     arredondamento de subpixel deixa aparecer quando recolhida */
  transform: translateY(calc(-100% - 4px));
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.nav.show {
  transform: translateY(0);
  box-shadow: 0 4px 24px rgba(10, 20, 40, 0.08);
}

.nav-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: none;
  height: 100%;
  overflow: hidden; /* recorta as margens transparentes do PNG */
}

.nav-logo img {
  /* lockup horizontal 500x300 com margens transparentes:
     altura maior que a barra deixa a marca visível com ~28px */
  height: 84px;
  width: auto;
  display: block;
}

.nav .logo-light {
  display: none;
}

/* links centralizados de verdade (independente da largura de logo e CTA) */
.nav-links {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-links a {
  position: relative;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 999px;
  color: rgba(16, 24, 40, 0.85);
  transition: color 0.25s ease, background 0.25s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: #101828; /* linha preta na nav branca */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s ease;
  /* mantém a linha na própria camada de composição — sem isso ela
     re-rasteriza ao fim da animação e "afina" de repente */
  will-change: transform;
}

.nav-links a:hover {
  color: #101828;
  background: rgba(16, 24, 40, 0.05);
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-cta {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 9px 18px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  transition: transform 0.2s ease, background 0.3s ease, color 0.3s ease;
}

.nav-cta:hover {
  transform: translateY(-1px);
}

.nav-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(10, 20, 40, 0.18);
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #1a2333;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.nav-toggle svg {
  width: 18px;
  height: 18px;
}

.nav-toggle .ico-sun {
  display: none;
}

/* ---- modo noturno (afeta a navbar) ---- */
body.night .nav {
  background: #000;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.night .nav.show {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

body.night .nav .logo-dark {
  display: none;
}

body.night .nav .logo-light {
  display: block;
}

body.night .nav-links a {
  color: rgba(255, 255, 255, 0.82);
}

body.night .nav-links a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

body.night .nav-links a::after {
  background: #fff; /* linha branca na nav preta */
}

body.night .nav-cta {
  background: #fff;
  color: #000;
}

body.night .nav-toggle {
  color: #F2E8D6;
  border-color: rgba(255, 255, 255, 0.28);
}

body.night .nav-toggle .ico-moon {
  display: none;
}

body.night .nav-toggle .ico-sun {
  display: block;
}

/* ---- recolher manual + setinha pra expandir ---- */
.nav-expand {
  position: fixed;
  top: 0;
  right: 24px; /* alinhada com o botão de recolher, no canto direito */
  z-index: 9;
  transform: translateY(calc(-100% - 4px));
  width: 44px;
  height: 22px;
  border: 1px solid rgba(10, 20, 40, 0.12);
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: #fff;
  color: #101828;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    background 0.3s ease, color 0.3s ease;
}

.nav-expand.show {
  transform: translateY(0);
  box-shadow: 0 4px 14px rgba(10, 20, 40, 0.12);
}

.nav-expand svg {
  width: 16px;
  height: 16px;
}

body.night .nav-expand {
  background: #000;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}