/* ============================================================
   FLASH — Iceberg do Crescimento
   Entra entre a secao #problema e a #mecanismo (Programa de
   Aceleracao). Nada fora desse trecho e tocado.
   SVG + CSS + GSAP ScrollTrigger: sem WebGL, sem GLB, sem npm.
   Cores e tipografia vem dos tokens que o site ja usa.
   ============================================================ */

.fi {
  --fi-blue: #1F6FFF;
  --fi-blue-2: #4D8FFF;
  --fi-cyan: #4FD8FF;
  --fi-deep: #062468;
  --fi-ink: #EEF3FA;
  --fi-body: #C2CCDA;
  --fi-muted: #8592A3;
  --fi-line: rgba(255, 255, 255, .10);

  position: relative;
  background: var(--bg-0, #0A0A0A);
  /* o comprimento do scroll e definido aqui; o JS le este valor */
  --fi-scroll: 380vh;
}

/* A barra fixa do site (.sticky-cta) fica a meia altura da tela e, no
   mobile, passa por cima do iceberg, dos rotulos e do painel final.
   Ela recua enquanto a secao esta em tela e volta ao normal depois --
   o comportamento dela no resto da pagina nao muda. */
/* No celular e no tablet a barra fixa nao existe: ela cruzava o iceberg
   e a logica de sumir/voltar so criava piscada. Fora do fluxo mesmo, sem
   reservar espaco. No desktop segue como o site define. */
@media (max-width: 860px) {
  #allomni-root .sticky-cta { display: none !important; }
}

/* A secao comeca no MESMO preto da anterior e vira agua ao longo dos
   primeiros ~420px. E o que faltava para a entrada nao parecer um corte:
   antes o preto da secao de cima encostava no preto do oceano e a unica
   pista de que algo mudou era a manchete aparecendo do nada. */
.fi {
  background:
    linear-gradient(180deg, var(--bg-0, #0A0A0A) 0px, rgba(10, 10, 10, 0) 420px),
    linear-gradient(180deg, #080C16, #080C16);
}

/* ---------------------------- PALCO ---------------------------- */
.fi__stage {
  position: relative; height: 100vh; overflow: hidden;
  display: grid; place-items: center; isolation: isolate;
}
/* Luz de superficie no topo do palco: da a leitura de "entramos na agua"
   logo na primeira dobra, em vez de uma faixa escura morta. Fica sob o
   conteudo (z-index 1) e some no mergulho, junto com os raios. */
.fi__aurora {
  position: absolute; left: 0; right: 0; top: 0; height: 42%; z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(130% 120% at 50% 8%, rgba(31, 111, 255, .18), transparent 64%),
    radial-gradient(80% 60% at 50% 26%, rgba(79, 216, 255, .07), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 52%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 52%, transparent 100%);
}

/* Oceano: quanto mais fundo, mais escuro e mais azul.
   O topo era #0A0A0A -- exatamente o preto da pagina. Como o palco fica
   PINADO, esse preto ocupava o quinto de cima da tela durante toda a
   experiencia, e a entrada da secao nao tinha nenhum sinal visual: preto
   encostando em preto. Agora o topo ja e agua (azul-noite) e o azul chega
   mais cedo. */
.fi__ocean {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, #0A0A0A 0%, #080C16 7%, #0A1122 20%,
              #0B1730 38%, #0A1D42 58%, #0A2352 78%, #0B2A63 100%);
}
.fi__deep {
  position: absolute; inset: 0; z-index: 0; opacity: 0;
  background: linear-gradient(180deg, #08163A 0%, #061334 46%, #04102A 100%);
}
/* feixes de luz que so existem perto da superficie */
.fi__rays {
  position: absolute; inset: -10% -20% auto; height: 70%; z-index: 1;
  background:
    linear-gradient(94deg, transparent 46%, rgba(79, 216, 255, .045) 50%, transparent 54%),
    linear-gradient(86deg, transparent 60%, rgba(31, 111, 255, .045) 64%, transparent 68%),
    linear-gradient(97deg, transparent 28%, rgba(31, 111, 255, .035) 32%, transparent 36%);
  /* o corte reto no topo lia como faixa; agora nasce esmaecido */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  filter: blur(3px); pointer-events: none;
}

/* --------------------------- ICEBERG --------------------------- */
.fi__berg {
  position: relative; z-index: 3;
  width: min(560px, 64vw);
  will-change: transform;
}
.fi__berg svg { width: 100%; height: auto; display: block; overflow: visible; }
/* o iceberg fica na frente da vida marinha: peixe passa ATRAS do gelo */
.fi__berg > svg { position: relative; z-index: 1; }

/* facetas: o traco fino da o ar de wireframe/dado, sem virar cartoon */
.fi__facet { stroke: rgba(255, 255, 255, .13); stroke-width: 1; }
.fi__edge { stroke: rgba(160, 205, 255, .30); stroke-width: 1.2; fill: none; }
/* O contorno inteiro num traco so, por cima das zonas: e o que impede a
   leitura de "quatro pecas empilhadas". Um pouco mais forte que as
   facetas internas, justamente para o olho seguir a borda de ponta a
   ponta sem tropecar nas costuras. */
.fi__edge--out {
  stroke: rgba(186, 222, 255, .42); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}

/* Grupo que so existe no celular: linha da agua e letras dentro do
   desenho. No desktop esse papel e dos rotulos laterais. */
.fi__mob { display: none; }
.fi__mobk {
  text-anchor: middle; fill: #FFFFFF; fill-opacity: .92;
  font-family: var(--font-display, Montserrat, sans-serif);
  font-weight: 800; font-size: 62px; letter-spacing: 2px;
  paint-order: stroke; stroke: rgba(2, 10, 30, .45); stroke-width: 5px;
}

/* cada camada escurece conforme desce e acende quando e a vez dela */
.fi__zone { transition: none; }
.fi__zone rect, .fi__zone path, .fi__zone polygon { transition: none; }

/* ------------------------ LINHA DA AGUA ------------------------ */
/* viaja junto com o iceberg: quem desce e a camera */
.fi__water {
  position: absolute; left: 50%; width: 100vw; height: 2px;
  transform: translateX(-50%); z-index: 4; pointer-events: none;
}
.fi__water::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(79, 216, 255, .75) 22%,
              rgba(140, 220, 255, .95) 50%, rgba(79, 216, 255, .75) 78%, transparent);
  box-shadow: 0 0 18px rgba(79, 216, 255, .45);
}
/* refracao imediata: a luz batendo logo abaixo da linha */
.fi__water::after {
  content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 92px;
  background: linear-gradient(180deg, rgba(79, 216, 255, .16), rgba(79, 216, 255, .04) 55%, transparent);
}
/* A quebra seca preto -> azul acontecia exatamente na linha. A bruma abre
   isso em ~600px: acima, o escuro clareia de leve; abaixo, o azul entra e
   se aprofunda. A linha continua nitida; o que muda e o entorno. */
.fi__haze {
  position: absolute; left: 50%; width: 240vw; height: 0;
  transform: translateX(-50%); pointer-events: none; z-index: 0;
}
.fi__haze::before {                       /* ar logo acima da agua */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 300px;
  background:
    radial-gradient(60% 100% at 50% 100%, rgba(31, 111, 255, .16), transparent 72%),
    linear-gradient(180deg, transparent, rgba(10, 22, 46, .55) 62%, rgba(12, 34, 72, .8));
}
.fi__haze::after {                        /* agua abrindo em profundidade */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 460px;
  background:
    radial-gradient(52% 100% at 50% 0%, rgba(79, 216, 255, .14), transparent 70%),
    linear-gradient(180deg, rgba(15, 52, 108, .85), rgba(8, 28, 68, .5) 45%, transparent);
}
/* "SUPERFICIE" e um marco da narrativa, nao uma legenda apagada: ganha
   corpo, fundo proprio e sombra para nao se dissolver na linha da agua */
.fi__waterlbl {
  position: absolute; left: 22%; transform: translate(-50%, -165%);
  font: 700 13px/1 var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: .28em; text-transform: uppercase;
  color: #EAF7FF; white-space: nowrap;
  padding: 8px 17px; border-radius: 999px;
  background: rgba(6, 16, 34, .78);
  border: 1px solid rgba(120, 205, 255, .48);
  box-shadow: 0 0 22px rgba(79, 216, 255, .28);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
}


/* =================== FROTA · OS E-COMMERCES ==================== */
/* Ancorada na mesma altura da linha da agua (top: 9.38%, mais abaixo),
   dentro do .fi__berg. Height 0: a caixa e so um eixo, cada barco se
   pendura nela por `bottom`, e o casco afunda 6px na agua. */
.fi__fleet {
  position: absolute; left: 50%; width: 100vw; height: 0;
  transform: translateX(-50%); z-index: 5; pointer-events: none;
}
.fi__boat {
  position: absolute; bottom: -7px; left: calc(50% + var(--x));
  transform-origin: 50% 100%;
  animation: fi-boia 7.5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.fi__boat svg { display: block; width: calc(var(--s, 1) * 72px); height: auto; }
/* o barco da narrativa: um pouco mais presente que os outros */
.fi__boat--voce svg { filter: drop-shadow(0 0 16px rgba(79, 216, 255, .32)); }

/* Callout. Sem seta vermelha: uma linha guia fina sobe do mastro ate uma
   capsula com status. O ponto pulsa devagar -- e um alerta, nao um enfeite. */
.fi__flag {
  position: absolute; left: 50%; bottom: calc(100% + 34px);
  transform: translateX(-50%);
  display: grid; gap: 3px; justify-items: center; white-space: nowrap;
  padding: 9px 15px 10px; border-radius: 12px;
  background: rgba(6, 16, 34, .82);
  border: 1px solid rgba(120, 205, 255, .38);
  box-shadow: 0 0 26px rgba(31, 111, 255, .28);
}
.fi__flag::after {                       /* linha guia ate o mastro */
  content: ""; position: absolute; top: 100%; left: 50%; width: 1px; height: 34px;
  background: linear-gradient(180deg, rgba(120, 205, 255, .55), rgba(120, 205, 255, 0));
}
.fi__flag b {
  font: 700 clamp(11px, .9vw, 13px)/1 var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: .18em; text-transform: uppercase; color: #EAF7FF;
}
.fi__flag i {
  display: flex; align-items: center; gap: 6px; font-style: normal;
  font: 600 clamp(10px, .8vw, 12px)/1 var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: .12em; text-transform: uppercase; color: #9FD8F5;
}
.fi__flag i::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #4FD8FF; box-shadow: 0 0 8px rgba(79, 216, 255, .9);
  animation: fi-pulso 2.4s ease-in-out infinite;
}

@keyframes fi-boia {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%      { transform: translateY(-4px) rotate(1.2deg); }
}
@keyframes fi-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ==================== VIDA MARINHA (silhuetas) ================= */
/* Nao ha gatilho: cada elemento mora numa profundidade fixa do iceberg,
   entao entra em cena quando a camera chega la. Quanto mais fundo, menos
   opacidade e mais desfoque -- e assim que a agua se comporta. */
.fi__life { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fi__life > i {
  position: absolute; left: calc(50% + var(--x)); display: block;
  color: #7FB4EE; opacity: var(--o, .2);
  animation: fi-nada var(--dur, 60s) linear infinite;
  animation-delay: var(--d, 0s);
}
.fi__life > i svg { display: block; height: auto; }

/* As profundidades ficam no CSS, nao no style inline: o celular precisa
   redefinir duas delas, e um valor inline nao se deixa sobrescrever por
   media query sem !important. */
.fi__life > i:nth-child(1) { top: 23.5%; }
.fi__life > i:nth-child(2) { top: 27%; }
.fi__life > i:nth-child(3) { top: 41%; }
.fi__life > i:nth-child(4) { top: 50%; }
.fi__life > i:nth-child(5) { top: 64%; }
.fi__life > i:nth-child(6) { top: 72%; }
.fi__life > i:nth-child(7) { top: 84%; }
.fi__fish  svg { width: calc(var(--s, 1) * 44px); }
.fi__shoal svg { width: calc(var(--s, 1) * 220px); }
.fi__whale svg { width: calc(var(--s, 1) * 320px); }
.fi__shoal { filter: blur(.6px); }
.fi__whale { filter: blur(2.5px); color: #24457A; }

@keyframes fi-nada {
  from { transform: translateX(calc(var(--dir, 1) * -12vw)) scaleX(var(--dir, 1)); }
  to   { transform: translateX(calc(var(--dir, 1) * 12vw))  scaleX(var(--dir, 1)); }
}

/* ------------------- INDICADORES DA SUPERFICIE ------------------ */
.fi__surface {
  position: absolute; left: 50%; transform: translateX(-50%);
  z-index: 5; width: min(1060px, 92vw); text-align: center;
}
.fi__eyebrow {
  font: 700 clamp(11px, .9vw, 13px)/1 var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: .24em; text-transform: uppercase; color: var(--fi-muted);
  margin: 0 0 clamp(19px, 2.5vh, 30px);
}
.fi__results {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin: 0 0 clamp(23px, 3vh, 36px);
}
.fi__results span {
  font: 700 clamp(12px, .95vw, 13.5px)/1 var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: .16em; text-transform: uppercase; color: #DCE8FF;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(31, 111, 255, .38); background: rgba(31, 111, 255, .10);
}
.fi__kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.fi__kpi {
  padding: 14px 16px; border-radius: 12px; text-align: left;
  background: rgba(18, 22, 29, .72); border: 1px solid var(--fi-line);
  backdrop-filter: blur(6px);
}
.fi__kpi b {
  display: block; font: 700 11px/1 var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: .16em; text-transform: uppercase; color: var(--fi-muted);
}
.fi__kpi span {
  display: block; margin-top: 6px;
  font: 700 clamp(14px, 1.05vw, 16px)/1.25 var(--font-display, Montserrat, sans-serif); color: var(--fi-ink);
}

/* Ancoragem vertical. Os percentuais saem direto do viewBox 0 0 600 1600
   do SVG, entao rotulo, linha da agua e faceta sempre coincidem. Com as
   costuras inclinadas, o centro de cada zona e a media das duas alturas:
   agua y=150 -> 9.38% | E ~292 -> 18.25% | C ~611 -> 38.2%
   A ~981 -> 61.3% | P ~1376 -> 86.0% */
/* frota e linha da agua compartilham a MESMA ancora vertical: e a mesma
   superficie, entao um valor so serve os dois */
.fi__water, .fi__fleet, .fi__haze { top: 9.38%; }
/* folga real entre o bloco de metricas e a ponta do iceberg */
.fi__surface { bottom: calc(100% + clamp(30px, 5vh, 74px)); }
.fi__lyr[data-k="E"] { top: 18.25%; transform: translateY(-50%); }
.fi__lyr[data-k="C"] { top: 38.2%; transform: translateY(-50%); }
.fi__lyr[data-k="A"] { top: 61.3%; transform: translateY(-50%); }
.fi__lyr[data-k="P"] { top: 86.0%; transform: translateY(-50%); }

/* No desktop os trilhos nao existem e o .fi__body some da arvore de
   layout (display:contents), entao a composicao de la fica exatamente
   como estava antes desta rodada. */
.fi__rail { display: none; }
.fi__body { display: contents; }

/* --------------------- CAMADAS DO PACE ------------------------- */
/* rotulos alternam os lados: evita parede de texto de um lado so */
.fi__lyr {
  position: absolute; z-index: 5;
  width: min(360px, calc(50vw - min(280px, 32vw) - clamp(20px, 3vw, 52px) - 22px));
  opacity: 0; will-change: transform, opacity;
}
.fi__lyr--r { left: 100%; margin-left: clamp(20px, 3vw, 52px); text-align: left; }
.fi__lyr--l { right: 100%; margin-right: clamp(20px, 3vw, 52px); text-align: right; }
.fi__lyr-k {
  display: inline-grid; place-items: center; width: 48px; height: 48px;
  border-radius: 13px; margin-bottom: 14px;
  font: 800 23px/1 var(--font-display, Montserrat, sans-serif); color: #fff;
  background: linear-gradient(140deg, var(--fi-blue), var(--fi-deep));
  box-shadow: 0 10px 26px -10px rgba(31, 111, 255, .8);
}
.fi__lyr h3 {
  margin: 0 0 9px;
  font: 800 clamp(26px, 2.5vw, 38px)/1.08 var(--font-display, Montserrat, sans-serif);
  letter-spacing: -.02em; color: var(--fi-ink);
  text-shadow: 0 1px 2px rgba(2, 8, 22, .5), 0 3px 16px rgba(2, 8, 22, .45);
}
.fi__lyr p {
  margin: 0 0 12px;
  font: 400 clamp(15px, 1.15vw, 18px)/1.5 var(--font-body, Montserrat, sans-serif); color: var(--fi-body);
  text-shadow: 0 1px 10px rgba(2, 8, 22, .55);
}
.fi__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fi__lyr--l .fi__tags { justify-content: flex-end; }
.fi__tags span {
  font: 600 11.5px/1 var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: .1em; text-transform: uppercase; color: #B9CBE6;
  padding: 7px 11px; border-radius: 9px;
  border: 1px solid var(--fi-line); background: rgba(255, 255, 255, .04);
}

/* ---------------------------- TEXTO ---------------------------- */
.fi__hud {
  position: absolute; top: clamp(132px, 17vh, 200px); left: 50%;
  transform: translateX(-50%); z-index: 6;
  width: min(880px, 92vw); text-align: center; pointer-events: none;
}
.fi__say { position: absolute; inset: 0; opacity: 0; }
.fi__say h2 {
  margin: 0 0 clamp(16px, 2.2vh, 26px);
  font: 800 clamp(34px, 4.1vw, 64px)/1.05 var(--font-display, Montserrat, sans-serif);
  letter-spacing: -.03em; color: var(--fi-ink);
  /* Nas fases fundas a manchete disputa com gelo, facetas e peixes. Tres
     sombras curtas e escuras (nao uma sombra pesada) abrem um halo de
     poucos pixels em volta das letras: separa do fundo sem virar
     contorno visivel. */
  text-shadow: 0 1px 2px rgba(2, 8, 22, .55),
               0 3px 14px rgba(2, 8, 22, .5),
               0 0 36px rgba(4, 16, 40, .45);
}
.fi__say h2 em { font-style: normal; color: var(--fi-blue-2); }
.fi__say p {
  margin: 0 auto; max-width: 46ch;
  font: 400 clamp(16px, 1.35vw, 20px)/1.55 var(--font-body, Montserrat, sans-serif);
  color: var(--fi-body);
  text-shadow: 0 1px 12px rgba(2, 8, 22, .6);
}

/* ------------------------- FECHAMENTO -------------------------- */
/* no fecho este bloco vai para a direita, ao lado do iceberg: por isso
   a largura e de meia tela, e nao dos 880px de antes */
.fi__end {
  position: absolute; left: 50%; bottom: clamp(40px, 7vh, 82px);
  transform: translateX(-50%); z-index: 7;
  width: min(760px, 52vw); text-align: center; opacity: 0;
}
.fi__pace { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-bottom: clamp(20px, 2.6vh, 28px); }
.fi__pace i {
  font-style: normal;
  font: 700 clamp(13.5px, 1.25vw, 17px)/1 var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: .14em; text-transform: uppercase; color: #DCE8FF;
  padding: clamp(10px, 1.3vh, 13px) clamp(13px, 1.4vw, 19px); border-radius: 9px;
  border: 1px solid rgba(31, 111, 255, .45); background: rgba(31, 111, 255, .12);
}
.fi__pace u { text-decoration: none; color: var(--fi-muted); align-self: center; }
.fi__end p {
  margin: 0 auto clamp(18px, 2.4vh, 26px); max-width: 58ch;
  text-shadow: 0 1px 12px rgba(2, 8, 22, .6);
  font: 400 clamp(16px, 1.35vw, 20px)/1.62 var(--font-body, Montserrat, sans-serif);
  color: var(--fi-body);
}
.fi__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: clamp(15px, 1.6vh, 19px) clamp(26px, 2.4vw, 34px);
  border-radius: 12px; text-decoration: none;
  font: 700 clamp(15px, 1.15vw, 17px)/1 var(--font-body, Montserrat, sans-serif); color: #fff;
  background: linear-gradient(90deg, #0838A0, #1F6FFF);
  box-shadow: 0 12px 32px -10px rgba(31, 111, 255, .65);
  transition: transform .22s ease, box-shadow .22s ease;
}
.fi__cta:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(31, 111, 255, .8); }

/* particulas: poucas, so para dar volume ao meio aquatico */
.fi__motes { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .5; }
.fi__motes i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(160, 210, 255, .5);
}

/* ============ CELULAR / TABLET (ate 860px) ==================== */
/* Duas fases, mesma cena: primeiro uma intro CENTRALIZADA (metricas +
   ponta do iceberg + linha da agua) e, ao passar da superficie, o MESMO
   iceberg desliza para a coluna da esquerda e as camadas seguem a
   direita. Scroll normal o tempo todo -- sem pin, scrub ou viewport
   travada.                                                          */
@media (max-width: 860px) {
  .fi {
    --fi-scroll: auto;
    --fi-rail: clamp(112px, 34vw, 144px);   /* 34% da largura: o gelo precisa ler como massa, nao como fio */
    --fi-pad: 20px;
    --fi-gap: 26px;
  }
  .fi__stage {
    height: auto; display: block;
    /* o cabecalho fixo tem ~60px: a manchete precisa nascer abaixo dele */
    padding: clamp(96px, 12vh, 124px) 0 calc(56px + env(safe-area-inset-bottom, 0px));
  }
  .fi__rays, .fi__motes { display: none; }
  .fi__deep { opacity: .45; }
  .fi__mob { display: none; }

  /* CAUSA DA "TELA PRETA": no desktop os tres .fi__say ficam empilhados
     em position:absolute e so um aparece por fase. Como no celular eles
     viram static, os tres passavam a ocupar espaco -- tres headlines
     concorrentes e uma faixa morta entre elas. Sem mergulho, as legendas
     de mergulho nao tem o que legendar. */
  .fi__say[data-say="dive"], .fi__say[data-say="deep"] { display: none; }

  /* ---------------- FASE 1 · intro centralizada ---------------- */
  /* .fi__ocean e .fi__deep sao absolutos: no empilhamento eles pintam
     DEPOIS de qualquer irmao sem position, entao um `position: static`
     aqui joga a manchete para tras da agua -- o texto existe, some da
     tela. O .fi__berg ja era relative e por isso escapava. */
  .fi__hud {
    position: relative; inset: auto; z-index: 6; transform: none; width: auto;
    margin: 0 0 clamp(30px, 4.6vh, 44px); text-align: center;
    padding: 0 var(--fi-pad);
  }
  .fi__say { position: static; opacity: 1; }

  .fi__berg {
    width: 100%; margin: 0; transform: none !important;
    display: flex; flex-direction: column; align-items: stretch;
  }
  .fi__berg > svg { display: none; }        /* o desenho inteiro sai */

  .fi__surface {
    order: 1; position: static; transform: none; width: auto; margin: 0;
    padding: 0 var(--fi-pad); text-align: center;
  }
  .fi__results { justify-content: center; gap: 8px; margin-bottom: clamp(22px, 3vh, 30px); }
  .fi__kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .fi__kpi { text-align: left; }

  /* A frota vira um bloco no fluxo, entre os KPIs e a ponta: e o barco
     que apresenta a metafora antes de o iceberg aparecer. */
  /* Ponta e barco dividem a MESMA faixa de superficie: o gelo entrando
     pela esquerda, o e-commerce navegando na direita. A frota vem depois
     da ponta no fluxo e sobe com margem negativa ate a base dela -- assim
     o casco encosta na linha da agua sem depender de posicao absoluta,
     que exigiria saber onde a agua caiu. */
  .fi__fleet {
    order: 3; position: static; transform: none; width: auto; height: auto;
    display: flex; justify-content: flex-end; align-items: flex-end;
    gap: 34px; margin: -104px 0 0; min-height: 104px;
    padding: 0 clamp(12px, 5vw, 36px) 0 var(--fi-pad);
  }
  .fi__boat { position: relative; top: 6px; }   /* casco cruzando a agua */
  .fi__boat { position: static; bottom: auto; left: auto; }
  .fi__boat svg { width: calc(var(--s, 1) * 64px); }
  /* so o barco da narrativa. Os outros tres sao densidade de cena e, num
     celular, densidade vira poluicao. */
  .fi__fleet .fi__boat:not(.fi__boat--voce) { display: none; }
  /* a capsula e mais larga que o barco: presa a margem direita ela cabe
     em 360px, e a linha guia desce ate o mastro em vez de ao centro */
  /* a capsula subia ate quase encostar na etiqueta SUPERFICIE: agora ela
     sobe mais e encolhe um pouco, e a linha guia cobre a diferenca */
  .fi__flag {
    left: auto; right: 0; transform: none;
    bottom: calc(100% + 48px); padding: 8px 13px 9px; gap: 2px;
  }
  .fi__flag::after { left: auto; right: 30px; height: 48px; }
  .fi__flag b { font-size: 12px; letter-spacing: .12em; }
  .fi__flag i { font-size: 12.5px; letter-spacing: .06em; gap: 5px; }

  /* A ponta ja abre na coluna da esquerda, na largura das camadas que vem
     abaixo: e a mesma peca do inicio ao fim, cortada pela borda, e a
     descida so continua o que a abertura ja mostrou. */
  .fi__rail--tip {
    order: 2; width: var(--fi-rail);
    margin: clamp(46px, 6.5vh, 72px) 0 0;
  }

  .fi__water {
    order: 4; position: relative; left: 0; transform: none; width: 100%;
    margin: 0;   /* encosta na ponta e na 1a camada: coluna sem fresta */
  }
  /* a legenda fica logo a direita da coluna do gelo, entre ele e o barco */
  .fi__waterlbl { left: var(--fi-rail); transform: translate(8px, -175%); }

  /* a bruma existe, mas mais curta: a tela e menor e o degrade precisa
     caber entre o barco e a primeira camada */
  .fi__haze { width: 100%; top: auto; order: 4; margin: 0; height: 0; }
  .fi__haze::before { height: 170px; }
  /* As duas brumas se encontram no topo do ::after, e ali estava o
     risco horizontal que atravessava a tela em cima de "O QUE MEDIMOS":
     o ::before TERMINA em rgba(12,34,72,.8) e o ::after COMECAVA em
     rgba(15,52,108,.85) -- mais claro e mais azul, sem transicao entre
     os dois. Duas cores diferentes encostando desenham uma linha.
     Comecando o ::after na mesma cor em que o ::before acaba, a
     passagem vira degrade continuo. So no celular: no desktop a secao
     e animada por scroll e a composicao e outra. */
  .fi__haze::after {
    height: 240px;
    background:
      radial-gradient(52% 100% at 50% 0%, rgba(79, 216, 255, .14), transparent 70%),
      linear-gradient(180deg, rgba(12, 34, 72, .8), rgba(10, 30, 64, .5) 45%, transparent);
  }

  /* vida marinha: duas silhuetas em toda a secao, e so */
  .fi__life > i:not([data-m]) { display: none; }
  /* No desktop o .fi__berg e so o desenho; no celular ele carrega tambem as
     metricas e as quatro etapas, entao a mesma % cai muito mais alto -- o
     peixe raso aparecia ACIMA da linha da agua. */
  .fi__life > i:nth-child(1) { top: 36%; --x: -24%; }
  .fi__life > i:nth-child(5) { top: 66%; }
  .fi__fish svg  { width: calc(var(--s, 1) * 40px); }
  .fi__shoal svg { width: calc(var(--s, 1) * 150px); }

  /* ---------------- coluna de gelo, continua ------------------- */
  /* Cada fatia tem a altura EXATA da sua proporcao (faixa de y / 200 da
     janela). E isso que faz uma encostar na outra: se a linha fosse mais
     alta que a fatia, o recorte sobraria e abriria fresta; se fosse mais
     baixa, cortaria a costura no meio. Por isso a altura mora aqui e a
     linha inteira e obrigada a acompanhar. */
  .fi__rail { display: block; overflow: hidden; }
  .fi__rail svg { display: block; width: 100%; height: 100%; }
  .fi__rail--tip { height: calc(var(--fi-rail) * 0.95); }
  .fi__lyr[data-k="E"] { min-height: calc(var(--fi-rail) * 1.380); }
  .fi__lyr[data-k="C"] { min-height: calc(var(--fi-rail) * 1.855); }
  .fi__lyr[data-k="A"] { min-height: calc(var(--fi-rail) * 1.805); }
  .fi__lyr[data-k="P"] { min-height: calc(var(--fi-rail) * 2.100); }

  /* O respiro e a linha divisoria moram no TEXTO, nao na linha inteira:
     assim as fatias do iceberg se encostam e a coluna da esquerda fica
     continua da ponta ate a base, como um corte vertical unico. */
  .fi__lyr {
    order: 5; position: static; opacity: 1; width: auto; margin: 0; padding: 0;
    display: grid; grid-template-columns: var(--fi-rail) 1fr; column-gap: 16px;
    align-items: stretch; text-align: left;
    background: none; border: 0; box-shadow: none;
  }
  /* mesma especificidade da ancoragem desktop, senao o translateY(-50%)
     sobrevive e a etapa sobe meia altura */
  .fi__lyr[data-k] { top: auto; transform: none; }
  .fi__lyr--l, .fi__lyr--r { margin: 0; }
  .fi__lyr--l, .fi__lyr--l .fi__tags { text-align: left; }
  .fi__lyr--l .fi__tags { justify-content: flex-start; }
  .fi__body {
    display: block; align-self: center; border: 0;
    padding: 20px var(--fi-pad) 20px 0;
  }
  .fi__lyr-k { width: 36px; height: 36px; font-size: 17px; margin-bottom: 9px; }

  .fi__end {
    position: relative; inset: auto; z-index: 6; transform: none; opacity: 1; width: auto;
    order: 6;
    margin: clamp(26px, 3.6vh, 38px) 0 0; padding: 0 var(--fi-pad); text-align: left;
  }

  /* ------------------------ tipografia ------------------------- */
  .fi__say h2 { font-size: clamp(28px, 7.4vw, 36px); margin-bottom: 14px; }
  .fi__say p { font-size: 17px; line-height: 1.55; }
  .fi__eyebrow { font-size: 12px; letter-spacing: .16em; margin-bottom: 16px; }
  .fi__results span { font-size: 12px; letter-spacing: .1em; padding: 7px 11px; }
  .fi__kpi { padding: 10px 12px; }
  .fi__kpi b { font-size: 12px; letter-spacing: .08em; }
  .fi__kpi span { font-size: 14.5px; }
  .fi__lyr h3 { font-size: 21px; margin-bottom: 7px; }
  .fi__lyr p { font-size: 15px; margin-bottom: 12px; }
  .fi__tags { gap: 6px; }
  .fi__tags span { font-size: 12.5px; letter-spacing: .04em; padding: 7px 10px; border-radius: 9px; }
  /* PACE em UMA linha. "ESCALA" caindo sozinha para baixo quebrava a
     leitura da sequencia, que e o ponto do bloco. nowrap + escala por vw:
     encolhe junto com a tela em vez de embrulhar. */
  /* Antes: nowrap + escala por vw, para caber numa linha so. O preco
     era 11,1px em 390px -- pequeno demais para o bloco que nomeia os
     quatro pilares. Em duas linhas a sequencia continua legivel (as
     setas seguem la); em 11px ela nao era legivel de jeito nenhum. */
  .fi__pace {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: flex-start; gap: 4px 3px; margin-bottom: 16px;
  }
  .fi__pace i {
    font-size: clamp(12px, 3.4vw, 14px); letter-spacing: .04em;
    padding: 7px 9px; border-radius: 9px; white-space: nowrap;
  }
  .fi__pace u { font-size: clamp(11px, 3vw, 12.5px); }
  .fi__end p { font-size: 14.5px; line-height: 1.55; margin: 0 0 18px; }
  .fi__cta {
    display: flex; width: 100%; justify-content: center;
    min-height: 46px; padding: 12px 18px; font-size: 13.5px; gap: 8px;
  }

  /* entrada por classe: o estado escondido so existe sob .fi--js, posta
     depois de os gatilhos existirem. Script falhou, nada some. */
  /* Quem entra e o TEXTO. O iceberg nunca se mexe nem pisca: se a fatia
     tambem deslizasse, a coluna da esquerda abriria uma fresta a cada
     etapa e a peca deixaria de parecer inteira. */
  .fi--js .fi__lyr .fi__body, .fi--js .fi__end {
    opacity: 0; transform: translateY(16px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
  }
  .fi--js .fi__lyr.fi-in .fi__body, .fi--js .fi__end.fi-in { opacity: 1; transform: none; }
}

/* Tablet: mesma logica, proporcoes maiores */
@media (min-width: 621px) and (max-width: 860px) {
  .fi { --fi-rail: clamp(150px, 21vw, 190px); --fi-pad: 32px; --fi-gap: 34px; }
  .fi__fleet { gap: 44px; min-height: 132px; margin-top: -132px; }
  .fi__fleet .fi__boat:nth-child(1) { display: block; }   /* um barco de apoio */
  .fi__boat svg { width: calc(var(--s, 1) * 84px); }
  .fi__lyr { column-gap: 26px; }
  .fi__body { padding: 26px var(--fi-pad) 26px 0; }
  .fi__say h2 { font-size: clamp(34px, 5.4vw, 42px); }
  .fi__say p { font-size: 19px; }
  .fi__kpis { grid-template-columns: repeat(4, 1fr); }
  .fi__lyr h3 { font-size: 26px; }
  .fi__lyr p { font-size: 17.5px; }
  .fi__tags span { font-size: 12.5px; padding: 8px 12px; }
  .fi__cta { width: auto; min-width: 320px; }
}

/* telas estreitas */
@media (max-width: 380px) {
  .fi { --fi-rail: clamp(94px, 27vw, 104px); --fi-pad: 15px; --fi-gap: 22px; }
  .fi__say p { font-size: 16px; }
  .fi__body { padding: 18px var(--fi-pad) 18px 0; }
}

/* menos movimento: nada entra, tudo ja esta la */
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .fi--js .fi__lyr .fi__body, .fi--js .fi__end { opacity: 1; transform: none; transition: none; }
}

/* ================ PREFERENCIA POR MENOS MOVIMENTO ============== */
/* Sem pin, sem mergulho: a estrutura inteira aparece de uma vez e todo o
   texto continua legivel. So no desktop -- no celular a composicao ja e
   estatica, e este bloco (que estreita o iceberg para 340px) estragaria a
   coluna lateral. La basta desligar a transicao de entrada, logo abaixo. */
/* A composicao estatica: iceberg inteiro, texto todo visivel, zero
   dependencia de animacao. Vale para DOIS casos, e por isso e uma classe
   e nao uma media query: quem pediu menos movimento, e quem simplesmente
   nao recebeu o GSAP (CDN fora, script bloqueado). Antes so o primeiro
   caso era coberto -- se o GSAP falhasse, manchete, camadas e fecho
   ficavam em opacity 0 para sempre. O JS poe a classe nos dois. */
@media (min-width: 861px) {
  /* :not(.fi--forcar) deixa o parametro de inspecao passar */
  .fi--estatico { --fi-scroll: auto; }
  .fi--estatico .fi__stage { height: auto; display: block; padding: 72px 0 84px; }
  .fi--estatico .fi__rays,
  .fi--estatico .fi__motes { display: none; }
  /* Coluna unica na ordem da leitura: metricas -> barco -> iceberg ->
     linha da agua -> camadas. Sem isso a frota, que no HTML vem antes do
     bloco de metricas, aparecia acima dele. */
  .fi--estatico .fi__berg {
    display: flex; flex-direction: column; align-items: center;
    width: min(700px, 90vw); margin: 0 auto 8px; transform: none !important;
  }
  .fi--estatico .fi__berg > svg { width: min(340px, 60vw); order: 3; }
  .fi--estatico .fi__surface { order: 1; }
  .fi--estatico .fi__fleet { order: 2; }
  .fi--estatico .fi__water { order: 4; }
  .fi--estatico .fi__lyr { order: 5; }
  .fi--estatico .fi__water { position: relative; left: 0; transform: none; width: 100%; margin: 0 0 28px; }
  .fi--estatico .fi__waterlbl { position: static; transform: none; display: block; text-align: center; padding-top: 12px; }
  .fi--estatico .fi__hud,
  .fi--estatico .fi__surface { position: relative; inset: auto; z-index: 6;
    transform: none; margin: 0 auto 28px; width: min(700px, 90vw); }
  .fi--estatico .fi__say { position: static; opacity: 1; }
  .fi--estatico .fi__say + .fi__say { margin-top: 20px; }
  .fi--estatico .fi__lyr { position: static; width: min(700px, 90vw); margin: 0 auto 26px; opacity: 1; text-align: left; }
  .fi--estatico .fi__lyr--l { text-align: left; }
  .fi--estatico .fi__lyr--l .fi__tags { justify-content: flex-start; }
  .fi--estatico .fi__end { position: relative; inset: auto; z-index: 6;
    transform: none; opacity: 1; margin: 8px auto 0; }
  /* A frota estava ancorada na linha da agua, que na pilha estatica fica
     centenas de px abaixo: os barcos pousavam em cima dos KPIs. Aqui ela
     vira um bloco no fluxo, com um barco so e o callout acima dele. */
  .fi--estatico .fi__fleet {
    position: relative; inset: auto; height: auto; transform: none;
    width: min(700px, 90vw); margin: 76px auto 26px;
    display: flex; justify-content: center; align-items: flex-end;
  }
  .fi--estatico .fi__fleet .fi__boat:not(.fi__boat--voce) { display: none; }
  .fi--estatico .fi__boat { position: relative; bottom: auto; left: auto; }
  .fi--estatico .fi__cta { transition: none; }
}

/* Sem movimento nenhum quando o sistema pede: barcos, peixes e o ponto de
   alerta continuam VISIVEIS, so param. Silhueta parada ainda comunica
   profundidade; silhueta ausente nao comunica nada. */
@media (prefers-reduced-motion: reduce) {
  .fi__boat, .fi__life > i, .fi__flag i::before { animation: none !important; }
  .fi__life > i { transform: scaleX(var(--dir, 1)); }
}