/* mf-clientes.css — página NOSSOS CLIENTES no layout novo, desenho "V42.2" do Figma (16/10/2026).
   Versões de corte do site (735 / 1069 / 1441 / 1800): dentro de cada versão a letra e as medidas são FIXAS;
   --k = escala da versão sobre o Figma 1920 (conteúdo de 1500 px, margens de 210). Sem itálico. */

.mf-clientes{
  --mfc-tinta:#231f20; --mfc-cinza:#6e6a6b; --mfc-laranja:#f37920; --mfc-fundo:#e0e7ed;
  --k:1; --kc:.6; --mfc-cont:calc(100% - 32px);
  background:#fff;
}
@media (min-width:735px){.mf-clientes{--kc:.77;--mfc-cont:692px}}
@media (min-width:1069px){.mf-clientes{--k:.653;--kc:.7;--mfc-cont:980px}}
@media (min-width:1441px){.mf-clientes{--k:.82;--kc:.82;--mfc-cont:1230px}}
@media (min-width:1800px){.mf-clientes{--k:1;--kc:1;--mfc-cont:1500px}}

.mfc{display:block;font-family:"Futura PT",system-ui,sans-serif;color:var(--mfc-tinta)}
.mfc *{box-sizing:border-box}
.mfc-cont{width:var(--mfc-cont);margin:0 auto;position:relative}
:where(.mfc) :where(h1,h2,p,ul,figure){margin:0;padding:0}
:where(.mfc) ul{list-style:none}
.mfc-h2{font-weight:600;font-size:30px;line-height:1.12;letter-spacing:-.005em;color:var(--mfc-tinta)}
.mfc-olho{font-weight:500;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--mfc-laranja)}

/* ---------- 1. TOPO ---------- */
.mfc-topo{position:relative;overflow:hidden;background:#1d1a1b;color:#fff;height:max(464px,calc(100vw * 464 / 390));display:flex;align-items:flex-end}
.mfc-topo__foto,.mfc-topo__foto img{position:absolute;inset:0;width:100%;height:100%}
.mfc-topo__foto img{object-fit:cover;object-position:50% 0;display:block}
.mfc-topo__veu{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 53%,rgba(0,0,0,.74) 88%,rgba(0,0,0,.8) 100%)}
.mfc-topo__cont{padding:0 0 23px;z-index:1}
.mfc-topo__h1{font-weight:600;font-size:30px;line-height:1.584;letter-spacing:-.005em}
.mfc-topo__p{margin-top:0;font-size:12px;line-height:1.75;max-width:296px}
.mfc-topo__p strong{font-weight:700}

/* ---------- 2. PRESENÇA (régua + mapa) ---------- */
.mfc-pres{background:#fff;padding:64px 0 72px}
.mfc-pres__p{margin-top:16px;font-size:16px;line-height:1.5;color:var(--mfc-cinza);max-width:620px}
.mfc-regua{margin-top:32px;border-bottom:1px solid rgba(35,31,32,.14)}
.mfc-regua li{position:relative;display:flex;flex-direction:column;gap:4px;padding:20px 0 18px;border-top:1px solid rgba(35,31,32,.14)}
.mfc-regua li::before{content:"";position:absolute;left:0;top:-2px;width:72px;height:4px;background:var(--mfc-laranja)}
.mfc-regua__num{font-weight:500;font-size:36px;line-height:1;letter-spacing:-.01em;color:var(--mfc-tinta);font-variant-numeric:proportional-nums}
.mfc-regua__num span{font-weight:400;font-size:18px;letter-spacing:0;color:var(--mfc-cinza);margin-left:.1em}
.mfc-regua__rot{font-size:15px;line-height:1.35;color:var(--mfc-cinza)}
.mfc-mapa{position:relative;margin:40px auto 0;width:100%;max-width:460px;aspect-ratio:990/1227}
.mfc-mapa__svg{display:block;width:100%;height:100%;overflow:visible}
.mfc-mapa__terra{fill:#ededec;stroke:#d3d3d3;stroke-width:1px;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 8px 14px rgba(35,31,32,.16))}
.mfc-mapa__pais{fill:var(--mfc-laranja)}
.mfc-mapa__rota{fill:none;stroke:var(--mfc-tinta);stroke-opacity:.8;stroke-width:1.6px;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mfc-mapa__destino{fill:var(--mfc-tinta);stroke:#fff;stroke-width:3.5}
.mfc-mapa__halo{fill:var(--mfc-laranja);fill-opacity:.25}
.mfc-mapa__sede{fill:var(--mfc-tinta);stroke:#fff;stroke-width:4}
.mfc-mapa__etq{position:absolute;transform:translate(calc(-100% + 2px),14px);white-space:nowrap;background:var(--mfc-tinta);color:#fff;font-weight:500;font-size:12px;line-height:30px;padding:0 14px;border-radius:999px}

/* ---------- 3. FÁBRICA (foto da expedição) ---------- */
.mfc-fab{position:relative;overflow:hidden;background:#1d1a1b;color:#fff;height:max(600px,125vw);display:flex;align-items:flex-end}
.mfc-fab__foto,.mfc-fab__foto img{position:absolute;inset:0;width:100%;height:100%}
.mfc-fab__foto img{object-fit:cover;object-position:50% 50%;display:block}
.mfc-fab__veu{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 25%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.86) 100%)}
.mfc-fab__cont{padding:0 0 44px;z-index:1}
.mfc-fab__h2{font-weight:600;font-size:38px;line-height:1.14;letter-spacing:-.005em}
.mfc-fab__olho{margin-top:14px;font-weight:500;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.mfc-fab__p{margin-top:14px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.95);max-width:760px}

/* ---------- 4. CLIENTES: duas faixas andando em sentidos opostos ---------- */
.mfc-marcas{background:var(--mfc-fundo);padding:64px 0 56px;overflow:hidden}
.mfc-marcas__cab{text-align:center}
.mfc-marcas__h2{margin-top:10px;font-size:28px}
.mfc-marcas__p{margin:14px auto 0;font-size:16px;line-height:1.5;color:var(--mfc-cinza);max-width:1100px}
.mfc-filas{margin-top:36px;display:flex;flex-direction:column;gap:calc(24px * var(--kc))}
/* --n = marcas na faixa (no HTML). Vão mínimo 30 (V42.2); cresce só se n x (cartão + vão) não cobrir tela + cartão,
   e a janela nunca passa de (n-1) cartões + n vãos: a mesma marca nunca aparece duas vezes na faixa. */
.mfc-fila{--mfc-vao:max(calc(30px * var(--kc)), calc((100vw + 260px * var(--kc)) / var(--n) - 260px * var(--kc)));position:relative;overflow:hidden;width:100%;max-width:calc((var(--n) - 1) * 260px * var(--kc) + var(--n) * var(--mfc-vao) - 2px);margin:0 auto}
.mfc-fila::before,.mfc-fila::after{content:"";position:absolute;top:0;bottom:0;width:32px;z-index:1;pointer-events:none}
.mfc-fila::before{left:0;background:linear-gradient(90deg,var(--mfc-fundo),rgba(224,231,237,0))}
.mfc-fila::after{right:0;background:linear-gradient(270deg,var(--mfc-fundo),rgba(224,231,237,0))}
.mfc-fila__trilho{display:flex;width:max-content;padding:calc(18px * var(--kc)) 0;animation:mfc-anda calc(var(--n) * 4s) linear infinite}
.mfc-fila--volta .mfc-fila__trilho{animation-direction:reverse;animation-delay:calc(2s - var(--n) * 4s)} /* meio cartão defasada da de cima */
@keyframes mfc-anda{to{transform:translate3d(-50%,0,0)}}
.mfc-cartao{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:calc(260px * var(--kc));height:calc(140px * var(--kc));margin-right:var(--mfc-vao);background:#fff;border-radius:calc(22px * var(--kc));box-shadow:0 calc(8px * var(--kc)) calc(24px * var(--kc)) rgba(0,0,0,.06)}
.mfc-cartao img{display:block;width:calc(var(--w) * var(--kc));height:calc(var(--h) * var(--kc));object-fit:contain}
/* só anda quando a faixa está na tela (mf-clientes.js); sem JS, anda sempre */
html.mfc-js .mfc-marcas:not(.mfc-ativo) .mfc-fila__trilho{animation-play-state:paused}
/* As 2 faixas andam SEMPRE, mesmo com as animações do Windows desligadas (pedido de 16/10): nada de versão parada.
   A trava abaixo protege contra regras globais do tipo "animation-duration:.01ms!important". */
@media (prefers-reduced-motion:reduce){
  .mfc-fila .mfc-fila__trilho{animation-name:mfc-anda!important;animation-duration:calc(var(--n) * 4s)!important;animation-iteration-count:infinite!important;animation-timing-function:linear!important}
}

/* ---------- TABLET (735–1068) ---------- */
@media (min-width:735px){
  .mfc-topo{height:640px;align-items:center}
  .mfc-topo__foto img{object-position:68% 45%}
  .mfc-topo__veu{background:linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.62) 34%,rgba(0,0,0,.24) 62%,rgba(0,0,0,0) 80%)}
  .mfc-topo__cont{padding:60px 0 0}
  .mfc-topo__h1{font-size:64px;line-height:1.08}
  .mfc-topo__p{margin-top:18px;font-size:18px;line-height:1.5;max-width:430px}
  .mfc-pres{padding:96px 0 104px}
  .mfc-h2{font-size:40px}
  .mfc-pres__p{margin-top:20px;font-size:18px;max-width:560px}
  .mfc-regua{margin-top:40px;max-width:560px}
  .mfc-regua li{flex-direction:row;align-items:baseline;gap:0;padding:26px 0 24px}
  .mfc-regua li::before{width:80px}
  .mfc-regua__num{flex:0 0 280px;font-size:40px}
  .mfc-regua__num span{font-size:20px}
  .mfc-regua__rot{font-size:17px}
  .mfc-mapa{margin-top:56px;max-width:560px}
  .mfc-mapa__etq{font-size:14px;line-height:36px;padding:0 18px;transform:translate(calc(-100% + 2px),16px)}
  .mfc-fab{height:640px;align-items:center}
  .mfc-fab__veu{background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.66) 34%,rgba(0,0,0,.30) 60%,rgba(0,0,0,0) 80%)}
  .mfc-fab__cont{padding:0}
  .mfc-fab__h2{font-size:60px}
  .mfc-fab__olho{margin-top:18px;font-size:15px}
  .mfc-fab__p{margin-top:16px;font-size:18px;max-width:520px}
  .mfc-marcas{padding:96px 0 80px}
  .mfc-marcas__h2{font-size:40px;margin-top:14px}
  .mfc-marcas__p{margin-top:18px;font-size:18px;max-width:600px}
  .mfc-filas{margin-top:48px}
  .mfc-fila::before,.mfc-fila::after{width:120px}
}

/* ---------- COMPUTADOR (≥1069): medidas do Figma 1920 × --k ---------- */
@media (min-width:1069px){
  .mfc-topo{height:min(calc(1080px * var(--k)),100svh);min-height:600px}
  .mfc-topo__foto img{object-position:50% 50%}
  .mfc-topo__veu{background:linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.60) 26%,rgba(0,0,0,.22) 46%,rgba(0,0,0,0) 62%)}
  .mfc-topo__cont{padding:0 0 calc(10px * var(--k))}
  .mfc-topo__h1{font-size:calc(100px * var(--k));line-height:1.445}
  .mfc-topo__p{margin-top:0;font-size:max(17px,calc(28px * var(--k)));max-width:calc(600px * var(--k))}

  .mfc-pres{padding:calc(120px * var(--k)) 0 calc(206px * var(--k))}
  .mfc-pres__grade{display:grid;grid-template-columns:calc(700px * var(--k)) 1fr calc(750px * var(--k));align-items:start}
  .mfc-pres__txt{padding-top:calc(123px * var(--k))}
  .mfc-h2{font-size:calc(64px * var(--k))}
  .mfc-pres__p{margin-top:calc(37px * var(--k));font-size:max(16px,calc(24px * var(--k)));max-width:calc(640px * var(--k))}
  .mfc-regua{margin-top:calc(62px * var(--k));max-width:none}
  .mfc-regua li{height:calc(116px * var(--k));padding:calc(28px * var(--k)) 0 0}
  .mfc-regua li::before{width:calc(96px * var(--k))}
  .mfc-regua__num{flex:0 0 calc(345px * var(--k));font-size:calc(52px * var(--k))}
  .mfc-regua__num span{font-size:max(15px,calc(24px * var(--k)))}
  .mfc-regua__rot{font-size:max(15px,calc(22px * var(--k)))}
  .mfc-mapa{grid-column:3;margin:0;max-width:none;width:calc(750px * var(--k))}
  .mfc-mapa__rota{stroke-width:calc(2.4px * var(--k))}
  .mfc-mapa__etq{font-size:max(13px,calc(18px * var(--k)));line-height:calc(44px * var(--k));padding:0 calc(22px * var(--k));transform:translate(calc(-100% + 2px),calc(18px * var(--k)))}

  .mfc-fab{height:calc(1090px * var(--k));min-height:600px}
  .mfc-fab__veu{background:linear-gradient(90deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.71) 30%,rgba(0,0,0,.43) 48%,rgba(0,0,0,.11) 60%,rgba(0,0,0,0) 66%)}
  .mfc-fab__cont{padding:calc(10px * var(--k)) 0 0}
  .mfc-fab__h2{font-size:calc(100px * var(--k));line-height:1.44}
  .mfc-fab__olho{margin-top:calc(10px * var(--k));font-size:max(13px,calc(17px * var(--k)))}
  .mfc-fab__p{margin-top:calc(44px * var(--k));font-size:max(16px,calc(26px * var(--k)));max-width:calc(760px * var(--k))}

  .mfc-marcas{padding:calc(130px * var(--k)) 0 calc(72px * var(--k))}
  .mfc-olho{font-size:max(14px,calc(20px * var(--k)))}
  .mfc-marcas__h2{margin-top:calc(12px * var(--k));font-size:calc(56px * var(--k))}
  .mfc-marcas__p{margin-top:calc(24px * var(--k));font-size:max(16px,calc(24px * var(--k)));max-width:calc(1100px * var(--k))}
  .mfc-filas{margin-top:calc(85px * var(--k))}
  .mfc-fila::before,.mfc-fila::after{width:calc(340px * var(--k))}
}