/* Site publico do SendAC.
   Paleta identica a do painel: quem vem do site para o dashboard tem de
   sentir que e o mesmo produto, nao dois. */
:root{
  --petrol-950:#042725; --petrol-900:#06322F; --petrol-800:#084C48;
  --petrol-700:#0A5C57; --petrol-600:#0E756E; --petrol-500:#128D85;
  --accent:#2DD4BF;
  --tinta:#16211F; --tinta-2:#3F4C4B; --tinta-3:#5C6B6B;
  --linha:#E5EBEA; --papel:#FFFFFF; --papel-2:#F5F7F8;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--tinta);background:var(--papel);
  font:400 16px/1.65 "Inter","Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--petrol-600);text-decoration:none}
a:hover{color:var(--petrol-800)}
.env{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------------------------------------------------------- tipografia */
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:750}
h3{font-size:1.0625rem;font-weight:700;letter-spacing:-.01em}
.olho{
  font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--petrol-500);margin:0 0 14px;
}
.lead{font-size:clamp(1.02rem,1.9vw,1.2rem);color:var(--tinta-2);margin:20px 0 0;max-width:62ch}
.secao{padding:96px 0}
.secao-escura{background:var(--petrol-950);color:#EAF2F1}
.secao-escura h2{color:#fff}
.secao-escura .olho{color:var(--accent)}
.secao-cinza{background:var(--papel-2)}
.cabeca{max-width:64ch;margin-bottom:56px}

/* --------------------------------------------------------------- botoes */
.bt{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 22px;border-radius:9px;font-weight:650;font-size:.9375rem;
  border:1.5px solid transparent;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.bt:hover{transform:translateY(-1px)}
.bt-cheio{background:var(--petrol-700);color:#fff}
.bt-cheio:hover{background:var(--petrol-600);color:#fff}
.bt-vazio{border-color:var(--linha);color:var(--tinta)}
.bt-vazio:hover{border-color:var(--petrol-500);color:var(--tinta)}
.secao-escura .bt-vazio{border-color:rgba(255,255,255,.28);color:#fff}
.secao-escura .bt-vazio:hover{border-color:var(--accent);color:#fff}
.bt-accent{background:var(--accent);color:var(--petrol-950)}
.bt-accent:hover{background:#5EE7D6;color:var(--petrol-950)}

/* ------------------------------------------------------------ navegacao */
.topo{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--linha);
}
.topo .env{display:flex;align-items:center;gap:28px;height:68px}
.marca{font-size:1.3rem;font-weight:800;letter-spacing:-.03em;color:var(--petrol-900)}
.marca span{color:var(--petrol-500)}
.menu{display:flex;gap:26px;margin-left:auto}
.menu a{font-size:.9rem;font-weight:550;color:var(--tinta-2)}
.menu a:hover{color:var(--petrol-700)}
.topo .bt{padding:10px 18px}
.abre-menu{display:none;border:0;background:none;padding:8px;margin-left:auto;cursor:pointer}
.abre-menu span{display:block;width:22px;height:2px;background:var(--tinta);margin:4px 0;border-radius:2px}

/* ----------------------------------------------------------------- hero */
.hero{padding:104px 0 88px;position:relative;overflow:hidden}
.hero::before{
  /* a "corrente alternada" do nome, desenhada em gradiente e nao em
     imagem: o site inteiro tem de caber em dois arquivos */
  content:"";position:absolute;inset:0 0 auto;height:460px;z-index:-1;
  background:
    radial-gradient(60rem 26rem at 78% -8%, rgba(45,212,191,.16), transparent 62%),
    radial-gradient(48rem 22rem at 8% 0%, rgba(10,92,87,.10), transparent 60%);
}
.hero .bts{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.selo{
  display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 8px;
  background:var(--papel);border:1px solid var(--linha);border-radius:999px;
  font-size:.8125rem;color:var(--tinta-2);font-weight:550;margin-bottom:26px;
}
.selo b{
  background:var(--petrol-700);color:#fff;border-radius:999px;
  padding:2px 9px;font-size:.6875rem;font-weight:700;letter-spacing:.04em;
}

/* --------------------------------------------------------------- numeros */
.faixa-num{border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);background:var(--papel-2)}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linha)}
.num{background:var(--papel-2);padding:34px 24px;text-align:center}
.num .v{font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:800;letter-spacing:-.03em;color:var(--petrol-800);line-height:1.1}
.num .k{font-size:.8125rem;color:var(--tinta-3);margin-top:8px;font-weight:550}
.rodape-num{text-align:center;padding:16px 24px 0;font-size:.8125rem;color:var(--tinta-3)}

/* ---------------------------------------------------------------- grades */
.grade{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.cartao{
  background:var(--papel);border:1px solid var(--linha);border-radius:14px;padding:28px;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.cartao:hover{border-color:#CFDBDA;box-shadow:0 8px 28px rgba(4,39,37,.07);transform:translateY(-2px)}
.cartao p{color:var(--tinta-2);font-size:.9375rem;margin:10px 0 0}
.icone{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:rgba(14,117,110,.10);color:var(--petrol-700);margin-bottom:18px;
}
.icone svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.secao-escura .cartao{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
.secao-escura .cartao:hover{border-color:rgba(45,212,191,.42);box-shadow:none}
.secao-escura .cartao p{color:#B9CCCA}
.secao-escura .icone{background:rgba(45,212,191,.14);color:var(--accent)}

/* ------------------------------------------------------------ como funciona */
.fluxo{display:grid;grid-template-columns:repeat(3,1fr);column-gap:22px;row-gap:40px;counter-reset:passo}
.passo{position:relative;padding-top:26px;border-top:2px solid var(--linha)}
.passo::before{
  counter-increment:passo;content:counter(passo,decimal-leading-zero);
  position:absolute;top:-13px;left:0;background:var(--papel);padding-right:12px;
  font-size:.75rem;font-weight:800;letter-spacing:.1em;color:var(--petrol-500);
}
.passo{border-top-color:var(--petrol-600)}
.passo p{color:var(--tinta-2);font-size:.9375rem;margin:9px 0 0}

/* ---------------------------------------------------------------- regras */
.regra{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.10)}
.regra:last-child{border-bottom:0}
.regra .n{
  flex:0 0 34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:rgba(45,212,191,.14);color:var(--accent);font-weight:800;font-size:.8125rem;
}
.regra h3{color:#fff;font-size:1rem}
.regra p{margin:5px 0 0;color:#AFC4C2;font-size:.9375rem}

/* ----------------------------------------------------------------- stack */
.pilha{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.pilha li{
  list-style:none;padding:9px 16px;border:1px solid var(--linha);border-radius:999px;
  background:var(--papel);font-size:.875rem;font-weight:550;color:var(--tinta-2);
}
.pilha li b{color:var(--petrol-700);font-weight:700}

/* ------------------------------------------------------------------- cta */
.cta{
  background:linear-gradient(135deg,var(--petrol-800),var(--petrol-600));
  border-radius:20px;padding:64px 48px;text-align:center;color:#fff;
}
.cta h2{color:#fff}
.cta p{color:#CFEAE7;max-width:56ch;margin:16px auto 0}
.cta .bts{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ---------------------------------------------------------------- rodape */
.rodape{border-top:1px solid var(--linha);padding:52px 0 40px;color:var(--tinta-3);font-size:.875rem}
.rodape .env{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.rodape nav{display:flex;gap:22px;flex-wrap:wrap}

/* ------------------------------------------------------------ responsivo */
@media (max-width:980px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .nums{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  /* A quebra manual do titulo e para a tela larga: no celular ela deixa
     uma palavra sozinha no meio da frase. */
  .so-largo{display:none}
  .secao{padding:68px 0}
  .hero{padding:64px 0 56px}
  .g2,.g3,.fluxo{grid-template-columns:1fr}
  .menu{
    display:none;position:absolute;top:68px;left:0;right:0;background:var(--papel);
    flex-direction:column;gap:0;padding:8px 24px 18px;border-bottom:1px solid var(--linha);
  }
  .menu.aberto{display:flex}
  .menu a{padding:12px 0;border-bottom:1px solid var(--linha)}
  .abre-menu{display:block}
  .topo .bt{margin-left:12px}
  .cta{padding:44px 24px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* =================================================== topo em verde petroleo
   Pedido do Rafael, 23/09/2026. O hero escuro faz duas coisas: da o peso
   institucional que faltava e resolve o contraste dos logos -- o amarelo
   do ClickHouse e do Linux some no branco e brilha aqui. */
.hero{
  background:var(--petrol-950);color:#EAF2F1;padding:84px 0 92px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.hero::before{
  background:
    radial-gradient(52rem 24rem at 82% 8%, rgba(45,212,191,.20), transparent 62%),
    radial-gradient(40rem 20rem at 6% 94%, rgba(18,141,133,.22), transparent 64%);
}
.hero h1{color:#fff}
.hero .lead{color:#B9CCCA}
.hero .selo{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#CFE0DE;
}
.hero .selo b{background:var(--accent);color:var(--petrol-950)}
.hero-grade{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}

/* ------------------------------------------------------------- o foguete */
.foguete{
  margin:0;display:flex;align-items:center;gap:26px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:18px;padding:30px 32px;
}
.fg-arte{width:96px;height:120px;flex-shrink:0}
/* Subida curta e lenta. Animacao discreta e assinatura de coisa bem feita;
   animacao chamativa e o contrario. */
.fg-nave{animation:subir 3.4s ease-in-out infinite}
.fg-rastro{animation:chama 3.4s ease-in-out infinite;transform-origin:60px 112px}
@keyframes subir{0%,100%{transform:translateY(3px)}50%{transform:translateY(-5px)}}
@keyframes chama{0%,100%{transform:scaleY(.82);opacity:.75}50%{transform:scaleY(1.15);opacity:1}}
@media (prefers-reduced-motion:reduce){.fg-nave,.fg-rastro{animation:none}}
.foguete figcaption{min-width:0}
.fg-num{
  font-size:clamp(2.6rem,6vw,3.5rem);font-weight:800;letter-spacing:-.04em;
  line-height:1;color:#fff;
}
.fg-un{font-size:1.05rem;font-weight:650;color:var(--accent);margin-top:2px}
.fg-tempo{font-size:.9375rem;color:#B9CCCA;margin-top:10px}
.fg-tempo strong{color:#fff;font-weight:700}

/* ----------------------------------------------------------- tecnologia */
.tec{margin-top:64px;padding-top:52px;border-top:1px solid rgba(255,255,255,.12)}
.tec-titulo{color:#fff;font-size:1.35rem;font-weight:700;margin:0 0 34px;letter-spacing:-.015em}
.tec-grade{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 40px}
.tec-item{display:flex;gap:18px;align-items:flex-start}
.tec-logo{
  width:38px;height:38px;flex-shrink:0;margin-top:2px;
  fill:currentColor;   /* a cor da marca vem do style inline de cada item */
}
.tec-item h4{margin:0 0 6px;font-size:1.0625rem;font-weight:700;color:#fff;letter-spacing:-.01em}
.tec-item p{margin:0;color:#AFC4C2;font-size:.9125rem;line-height:1.6}

@media (max-width:860px){
  .hero-grade{grid-template-columns:1fr;gap:38px}
  .tec-grade{grid-template-columns:1fr;gap:26px}
}
@media (max-width:520px){
  .foguete{flex-direction:column;text-align:center;gap:14px;padding:26px 22px}
}

/* A barra tambem em verde petroleo: o topo da pagina tem de ser UM bloco
   escuro, nao uma faixa branca colada num hero escuro. */
.topo{background:var(--petrol-950);border-bottom-color:rgba(255,255,255,.09)}
.topo .marca{color:#fff}
.topo .marca span{color:var(--accent)}
.menu a{color:#B9CCCA}
.menu a:hover{color:#fff}
.abre-menu span{background:#fff}
.topo .bt-cheio{background:var(--accent);color:var(--petrol-950)}
.topo .bt-cheio:hover{background:#5EE7D6;color:var(--petrol-950)}
/* Botao secundario no escuro: sem isto ele herda a borda clara e o texto
   escuro do tema claro, e some no fundo. */
.hero .bt-vazio,.topo .bt-vazio{border-color:rgba(255,255,255,.30);color:#fff}
.hero .bt-vazio:hover,.topo .bt-vazio:hover{border-color:var(--accent);color:#fff}
/* O hero encosta na barra: a borda entre os dois some. */
.hero{border-top:0}
@media (max-width:760px){
  .menu{background:var(--petrol-900);border-bottom-color:rgba(255,255,255,.12)}
  .menu a{border-bottom-color:rgba(255,255,255,.10)}
}

/* O cartao do foguete ganha presenca: e o unico numero da dobra. */
.foguete{padding:38px 36px;gap:30px}
.fg-arte{width:118px;height:148px}
.fg-tempo{white-space:nowrap}
@media (max-width:420px){.fg-tempo{white-space:normal}}

/* Foguete 70% menor, a pedido do Rafael. Ele deixou de ser ilustracao e
   passou a ser marca ao lado do numero -- o numero e que carrega a
   mensagem, e o desenho grande competia com ele. Com 36px, a folga do
   cartao e o vao tambem encolhem, senao sobra buraco em volta. */
.fg-arte{width:36px;height:45px}
.foguete{padding:26px 30px;gap:18px}
@media (max-width:520px){
  /* Nesse tamanho nao ha motivo para empilhar: cabe do lado. */
  .foguete{flex-direction:row;text-align:left;gap:16px;padding:22px 20px}
}
/* Alinhado com o numero, nao com o meio do bloco: solto no meio ele
   parecia sobra de diagramacao. */
.foguete{align-items:flex-start}
.fg-arte{margin-top:2px}

/* ----------------------------------------------- fila de marcas no hero
   "Do mesmo tamanho" nao e a mesma caixa: o GO e uma palavra larga e
   baixa, o Tux e alto e estreito. Em caixa igual o GO viraria um fiapo
   ao lado do elefante. As medidas abaixo vem da area real de cada
   contorno, medida no navegador e igualada pela media geometrica --
   e assim que fila de logo se monta. */
.marcas{margin-top:26px}
.marcas-fila{
  display:flex;align-items:center;gap:30px;flex-wrap:wrap;
  padding:18px 4px 0;
}
.mk{fill:currentColor;flex-shrink:0;opacity:.92;transition:opacity .15s ease}
.mk:hover{opacity:1}
.marcas-txt{
  margin:16px 0 0;font-size:.8125rem;line-height:1.6;color:#8FA8A6;max-width:40ch;
}
.mk-go{width:43.2px;height:16.2px}
.mk-postgresql{width:26.0px;height:26.9px}
.mk-clickhouse{width:28.0px;height:24.9px}
.mk-linux{width:24.0px;height:29.1px}
/* Foguete e marcas sao UM item do grid do hero. Soltos, o grid de duas
   colunas mandava o segundo para a linha de baixo. */
.hero-lado{display:flex;flex-direction:column}

/* ------------------------------------------------ fundo do hero
   A arte fica em fundo.svg -- trocar por uma foto e substituir o
   arquivo, sem tocar em codigo. Aceita .jpg/.png: basta apontar o
   url() abaixo para o novo nome. */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero-fundo{
  position:absolute;inset:0;z-index:-2;
  /* A foto vem do Rafael. fundo.svg continua no diretorio como reserva.
     O enquadramento puxa para a esquerda porque e la que estao os
     envelopes saindo do rack -- o lado direito da foto tem pessoas, e
     elas ficariam atras do cartao do foguete. */
  background:#042725 url("fundo.jpg") 28% center/cover no-repeat;
}
/* A mascara: verde petroleo a 80%, deixando 20% da arte aparecer. */
.hero-mascara{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,
    rgba(4,39,37,.90) 0%, rgba(6,50,47,.80) 46%, rgba(4,39,37,.72) 100%);
}
/* Os brilhos do ::before continuam por cima da mascara, dando o
   acabamento -- mas agora nao competem com a arte. */
.hero::before{z-index:-1;opacity:.75}
.hero-grade{position:relative;z-index:1}

/* Eu tinha fechado a mascara para ganhar contraste; o Rafael viu e
   preferiu a foto mais presente. Fica a dele -- a imagem e escolha de
   marca, nao calculo meu. Os 80% originais voltam.

   O que ficou do ajuste e so a cor da legenda dos logos: ela media
   4,19:1 sobre a foto, abaixo do minimo para texto pequeno, e clarear
   o texto nao muda em nada o visual aprovado. */
.marcas-txt{color:#C3D6D4}

/* Marcas clicaveis, levando ao site oficial de cada tecnologia.
   Abre em aba nova: quem clica ali esta conferindo a stack, nao
   saindo do site -- mandar embora seria perder a visita. O rel
   noopener impede que a pagina de destino alcance esta pela
   window.opener. */
.mk-link{display:inline-flex;line-height:0;border-radius:6px}
.mk-link:hover .mk{opacity:1;transform:translateY(-2px)}
.mk{transition:opacity .15s ease,transform .15s ease}
.mk-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* O cartao do foguete estava esticado pela coluna do grid e sobrava
   vazio a direita do texto. Agora a coluna inteira -- cartao e bloco
   das marcas -- tem uma largura so, e os dois se alinham pela borda.
   O conteudo do cartao fica centrado dentro dela. */
.hero-lado{width:min(100%,364px)}
.foguete{justify-content:center;padding:26px 24px}
.marcas-fila{justify-content:space-between;gap:12px;padding-left:0;padding-right:0}
.marcas-txt{max-width:none}
@media (max-width:860px){
  /* Em coluna unica nao ha motivo para estreitar. */
  .hero-lado{width:100%}
  .marcas-fila{justify-content:flex-start;gap:30px}
}

/* --------------------------------------------------- fluxo da mensagem
   Diagrama em SVG, nao imagem: escala em qualquer tela sem borrar, pesa
   poucos KB e reaproveita as marcas ja embutidas na pagina. */
.fluxo-caixa{
  /* Abaixo de ~760px o diagrama nao cabe legivel. Rolagem horizontal
     propria e a saida certa: encolher ate caber deixaria a letra
     menor que o minimo legivel. */
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
}
.fluxo-svg{display:block;width:100%;min-width:720px;height:auto}
.fx-cx rect{fill:rgba(255,255,255,.05);stroke:rgba(45,212,191,.30);stroke-width:1.5}
.fx-t{fill:#fff;font-size:17px;font-weight:700;letter-spacing:-.01em}
.fx-s{fill:#9FB8B6;font-size:13px}
.fx-linha{opacity:.85}
.fluxo-nota{
  margin:22px 0 0;font-size:.875rem;color:#9FB8B6;max-width:70ch;
}
/* A ida acende devagar, como corrente percorrendo o circuito. Discreta
   de proposito: e diagrama tecnico, nao animacao de abertura. */
@media (prefers-reduced-motion:no-preference){
  .fx-linha path{stroke-dasharray:1000;stroke-dashoffset:1000;
    animation:tracar 2.4s ease forwards}
  .fx-linha path:nth-child(2){animation-delay:.18s}
  .fx-linha path:nth-child(3){animation-delay:.36s}
  .fx-linha path:nth-child(4){animation-delay:.54s}
  .fx-linha path:nth-child(5){animation-delay:.72s}
  .fx-linha path:nth-child(6){animation-delay:.9s}
  @keyframes tracar{to{stroke-dashoffset:0}}
}

/* Coluna 20% mais estreita, a pedido do Rafael: 364 -> 291px.
   A folga do cartao acompanha, senao o conteudo encosta na borda. */
.hero-lado{width:min(100%,291px)}
.foguete{padding:24px 18px;gap:14px}

/* Caddy entrou na fila, ao lado do Go: agora sao cinco na mesma largura
   de 291px. As medidas foram refeitas -- a area alvo muda quando muda o
   numero de marcas, senao a fila desequilibra. */
.mk-go{width:38.3px;height:14.3px}
.mk-caddy{width:23.9px;height:23.0px}
.mk-postgresql{width:23.0px;height:23.9px}
.mk-clickhouse{width:24.9px;height:22.1px}
.mk-linux{width:21.3px;height:25.8px}
.marcas-fila{gap:8px}

/* ------------------------------------------------------------- a fibra
   Pulso de luz percorrendo a borda inferior do banner, da direita para
   a esquerda. O fio fica sempre aceso, fraco; o que viaja e o brilho. */
.fibra{
  position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;
  overflow:hidden;                      /* o pulso nao vaza pelas laterais */
  /* De fora a fora: o fio chega nas duas bordas da tela. A esmaecida
     antiga comia 12% de cada lado e fazia a linha parecer curta. */
  background:linear-gradient(90deg,
    rgba(45,212,191,.18) 0%, rgba(45,212,191,.26) 50%,
    rgba(45,212,191,.18) 100%);
}
.fibra-luz{
  position:absolute;top:-1px;bottom:-1px;left:100%;width:26%;
  background:linear-gradient(90deg,
    transparent 0%, rgba(45,212,191,.55) 35%,
    #DFFFF9 50%, rgba(45,212,191,.55) 65%, transparent 100%);
  /* o halo e o que vende a fibra: a luz vaza do fio, nao so corre nele */
  box-shadow:0 0 16px 3px rgba(45,212,191,.55);
  animation:fibra 3.93s linear infinite;
}
/* Viaja em pouco mais de um terco do ciclo e espera o resto fora da
   tela: pulso continuo vira letreiro de loja; espacado vira sinal. */
/* Ritmo afinado pelo Rafael, em tres passos: a luz 10% mais rapida
   (1,90s -> 1,72s de travessia), depois a espera de 3,28s para 2,78s,
   e enfim para 2,20s.

   A travessia nunca mais mudou -- so a parada. Mas o keyframe subiu a
   cada vez (34,5% -> 38,26% -> 43.95%) porque ele e uma FRACAO do ciclo,
   e o ciclo encolheu junto com a espera. O mesmo 1,72s vale mais por
   cento de um ciclo menor. Quem for mexer nisso depois: mude a espera
   e recalcule a fracao, nunca a fracao sozinha. */
@keyframes fibra{
  0%     {transform:translateX(0)}
  43.95% {transform:translateX(-485%)}
  100%   {transform:translateX(-485%)}
}
@media (prefers-reduced-motion:reduce){
  .fibra-luz{animation:none;display:none}
}