/* mapa das ofertas · grupo D1 (R22, R43) · tudo escopado em .mapa-ofertas
   Estado padrão = o mapa inteiro, parado (sem JS, movimento reduzido, impressão).
   O movimento só existe com .mo--vivo (posto pelo mapa.js) e dentro de screen + no-preference;
   o JS só escreve variáveis (--k, --g, --d, --t), que só as regras de movimento leem.
   13/10/2026 (G4): sem câmera (o mapa fica sempre inteiro no quadro, que cabe na altura da tela) e o vermelho do nó aceso
   do tamanho do contorno (entra da esquerda por tempo, não pela rolagem: parado, nunca fica pela metade). */

.mapa-ofertas{--mo-red:var(--red,#DB1E2F);--mo-red-deep:var(--red-deep,#AF0421);--mo-black:var(--black,#231F20);--mo-gray:var(--gray,#E0E1E0);--mo-white:var(--white,#FFFFFF);
  --mo-sans:var(--sans,"Hanken Grotesk","Proxima Nova",system-ui,-apple-system,"Segoe UI",sans-serif);--mo-ease:var(--ease,cubic-bezier(.16,1,.3,1));--mo-g:var(--g,clamp(16px,5vw,64px));--mo-topo:var(--topo,60px);
  position:relative;background:var(--mo-white);color:var(--mo-black);font-family:var(--mo-sans)}
.mapa-ofertas *,.mapa-ofertas *::before,.mapa-ofertas *::after{box-sizing:border-box}
.mapa-ofertas .mo__palco{position:relative}
.mapa-ofertas .mo__fixo{display:grid;grid-template-columns:clamp(260px,24vw,370px) minmax(0,1fr);gap:clamp(24px,3vw,52px);align-items:center;max-width:1480px;margin:0 auto;
  padding:clamp(24px,4vh,48px) var(--mo-g) clamp(48px,8vh,96px)}
/* dentro de um .in da home (que já tem a margem lateral): sem margem dupla */
.in .mapa-ofertas .mo__fixo{padding-inline:0}

/* ---------- o lado: rótulo, título, as seis fases, a chamada ---------- */
.mapa-ofertas .mo__lado{min-width:0}
.mapa-ofertas .mo__rotulo{display:inline-block;font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mo-red);margin:0 0 18px}
.mapa-ofertas .mo__lista{list-style:none;margin:0 0 clamp(14px,2.4vh,24px);padding:0;border-top:1px solid var(--mo-black);counter-reset:none}
.mapa-ofertas .mo__lista li{position:relative;display:grid;grid-template-columns:1.9em minmax(0,1fr);align-items:baseline;padding:.5em 0 .56em;border-bottom:1px solid rgba(35,31,32,.22);
  font-size:clamp(14px,1.12vw,17px);font-weight:700;line-height:1.25;cursor:default}
.mapa-ofertas .mo__lista .mo__num{font-weight:900;color:var(--mo-red);font-variant-numeric:tabular-nums}
.mapa-ofertas .mo__lista .mo__nome{transition:transform .5s var(--mo-ease)}
.mapa-ofertas .mo__barra{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--mo-red);transform:scaleX(0);transform-origin:left center;display:none}
.mapa-ofertas .mo__dica{font-size:15px;line-height:1.4;opacity:.75;margin:0 0 18px;max-width:40ch}
.mapa-ofertas .mo__cta{display:inline-flex;align-items:center;gap:12px;max-width:100%;white-space:nowrap;padding:15px 18px;background:var(--mo-red);color:var(--mo-white);text-decoration:none;font-weight:800;font-size:clamp(12px,.95vw,13px);letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--mo-red);transition:background .3s var(--mo-ease),border-color .3s var(--mo-ease),transform .3s var(--mo-ease)}
.mapa-ofertas .mo__cta:hover{background:var(--mo-red-deep);border-color:var(--mo-red-deep);transform:translateY(-1px)}
.mapa-ofertas .mo__arr{display:inline-block;width:22px;height:2px;background:currentColor;position:relative;transition:width .35s var(--mo-ease)}
.mapa-ofertas .mo__arr::after{content:"";position:absolute;right:-1px;top:-5px;width:12px;height:12px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.mapa-ofertas .mo__cta:hover .mo__arr{width:34px}
.mapa-ofertas .mo__cta:focus-visible,.mapa-ofertas a.mo__n:focus-visible{outline:3px solid var(--mo-black);outline-offset:3px}
.mapa-ofertas .mo__conversa{display:table;margin-top:clamp(14px,2.4vh,22px);padding-bottom:4px;border-bottom:2px solid var(--mo-red);color:inherit;text-decoration:none;font-weight:800;font-size:clamp(12px,.95vw,13px);letter-spacing:.06em;text-transform:uppercase;line-height:1.35}
.mapa-ofertas .mo__conversa::after{content:"\2192";display:inline-block;margin-left:.45em;transition:transform .3s var(--mo-ease)}
.mapa-ofertas .mo__conversa:hover::after{transform:translateX(6px)}
.mapa-ofertas .mo__conversa:focus-visible{outline:3px solid var(--mo-black);outline-offset:3px}
/* o convite para conversar mora na coluna do mapa (13/10/2026): fora dela, virava uma parada só para ele, com o mapa
   cortado em cima ou os Labs cortados embaixo */

/* ---------- o quadro: 1000 × 710 unidades, os nós por cima dos fios ---------- */
.mapa-ofertas .mo__quadro{position:relative;min-width:0;display:flex;justify-content:center;align-items:center}
.mapa-ofertas .mo__mapa{position:relative;width:min(100%,1080px,calc((100svh - var(--mo-topo) - 56px) * 1000 / 710));aspect-ratio:1000/710;container-type:inline-size}
.mapa-ofertas .mo__fios{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.mapa-ofertas .mo__fio{fill:none;stroke:var(--mo-black);stroke-width:1.6;stroke-linejoin:round}
.mapa-ofertas .mo__luz,.mapa-ofertas .mo__ponta{display:none}
.mapa-ofertas .mo__fases,.mapa-ofertas .mo__itens{list-style:none;margin:0;padding:0}
.mapa-ofertas .mo__fases>li,.mapa-ofertas .mo__itens>li{margin:0;padding:0}
.mapa-ofertas .mo__fase-tit{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* os nós */
.mapa-ofertas .mo__n{position:absolute;left:calc(var(--x) * .1%);top:calc(var(--y) / 7.1 * 1%);width:calc(var(--w) * .1%);transform:translate(-50%,-50%);isolation:isolate;
  display:block;text-decoration:none;color:var(--mo-black);background:var(--mo-white);border:1.5px solid var(--mo-black);border-radius:4px;padding:.48em .7em .52em;text-align:center;
  font-size:clamp(11px,1.36cqw,16px);line-height:1.15;transition:background .25s var(--mo-ease),color .25s var(--mo-ease),border-color .25s var(--mo-ease);--mo-bw:1.5px}
.mapa-ofertas .mo__n b{display:block;font-weight:800;letter-spacing:-.005em}
.mapa-ofertas .mo__n small{display:block;font-size:max(11px,.86em);font-weight:500;opacity:.78;margin-top:.18em;line-height:1.2}
.mapa-ofertas a.mo__n:hover{background:var(--mo-black);color:var(--mo-white)}
.mapa-ofertas .mo__n--q{border:0;color:var(--mo-red);padding:.22em .35em;font-size:clamp(11px,1.46cqw,17px);background:var(--mo-white)}
.mapa-ofertas .mo__n--q b{font-weight:800}
.mapa-ofertas .mo__n--rotulo{border:0;padding:.12em .35em;font-size:clamp(11px,1.2cqw,14px)}
.mapa-ofertas .mo__n--rotulo b{font-weight:600;opacity:.8}
.mapa-ofertas .mo__n--centro{background:var(--mo-black);color:var(--mo-white);border-color:var(--mo-black);padding:.82em .9em .88em;font-size:clamp(12px,1.64cqw,19px)}
.mapa-ofertas .mo__n--centro b{font-weight:900;letter-spacing:-.01em}
.mapa-ofertas a.mo__n--centro:hover{background:var(--mo-red);border-color:var(--mo-red)}
.mapa-ofertas .mo__n--hub{border-width:2px;--mo-bw:2px}
.mapa-ofertas .mo__n--folha{font-size:clamp(11px,1.22cqw,15px);padding:.36em .55em .4em;border-width:1px;--mo-bw:1px}
.mapa-ofertas .mo__n--breve{border-style:dashed}
.mapa-ofertas .mo__n--breve em{display:block;font-style:normal;font-weight:800;font-size:max(11px,.72em);letter-spacing:.12em;text-transform:uppercase;color:var(--mo-red);margin-top:.4em}
.mapa-ofertas .mo__marco{position:absolute;left:0;top:0;transform:translate(-45%,-45%);width:1.75em;height:1.75em;display:grid;place-items:center;background:var(--mo-red);color:var(--mo-white);
  font-weight:900;font-size:.78em;line-height:1;border-radius:2px;font-variant-numeric:tabular-nums}
.mapa-ofertas .mo__bpm{display:block;width:4.2em;height:1em;margin:.3em auto 0;overflow:visible}
.mapa-ofertas .mo__bpm path{fill:none;stroke:var(--mo-red);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.mapa-ofertas a.mo__n:hover .mo__bpm path{stroke:currentColor}

/* ver uma fase: passar o mouse numa fase da lista apaga as outras (sem JS não há) */
.mapa-ofertas[data-ver] .mo__fase .mo__n,.mapa-ofertas[data-ver] .mo__base .mo__g{transition:opacity .3s var(--mo-ease)}
.mapa-ofertas[data-ver] .mo__fase:not(.is-ver) .mo__n,.mapa-ofertas[data-ver] .mo__base .mo__g:not(.is-ver){opacity:.18}
.mapa-ofertas[data-ver] .mo__lista li:not(.is-ver){opacity:.45}

/* ---------- celular: outra composição, vertical, um fio que desce ---------- */
@media (max-width:860px){
  .mapa-ofertas .mo__fixo{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:clamp(20px,3vh,32px) var(--mo-g) clamp(56px,9vh,88px)}
  .mapa-ofertas .mo__lado{display:contents}
  .mapa-ofertas .mo__rotulo{display:none}
  .mapa-ofertas .mo__dica{order:3}
  .mapa-ofertas .mo__quadro{order:4;display:block;margin-top:14px}
  .mapa-ofertas .mo__cta{order:5;align-self:flex-start;margin-top:8px}
  .mapa-ofertas .mo__conversa{order:6;align-self:flex-start}
  .mapa-ofertas .mo__lista{display:none}
  .mapa-ofertas .mo__mapa{width:100%;aspect-ratio:auto;container-type:normal}
  .mapa-ofertas .mo__fios{display:none}
  .mapa-ofertas .mo__fases>.mo__fase{position:relative;padding:0 0 30px 34px}
  .mapa-ofertas .mo__fase::before{content:"";position:absolute;left:10px;top:12px;bottom:-12px;width:2px;background:var(--mo-black)}
  .mapa-ofertas .mo__fase:last-child::before{bottom:auto;height:calc(100% - 24px)}
  .mapa-ofertas .mo__fase-tit{position:relative;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:flex;align-items:center;gap:12px;margin:0 0 14px -34px;
    font-size:21px;font-weight:900;letter-spacing:-.012em;line-height:1.15}
  .mapa-ofertas .mo__fase-tit .mo__num{position:relative;z-index:1;flex:none;width:22px;height:22px;display:grid;place-items:center;background:var(--mo-red);color:var(--mo-white);font-size:13px;border-radius:2px;
    font-variant-numeric:tabular-nums;transition:background .4s var(--mo-ease)}
  .mapa-ofertas .mo__itens{display:flex;flex-wrap:wrap;gap:10px 8px}
  .mapa-ofertas .mo__itens>li{position:relative;flex:0 0 100%}
  .mapa-ofertas .mo__itens>li.mo__li--folha{flex:0 0 auto;max-width:100%}
  .mapa-ofertas .mo__itens>li:not(.mo__li--folha)::before{content:"";position:absolute;z-index:1;left:-28px;top:.95em;width:8px;height:8px;border-radius:1px;background:var(--mo-black)}
  .mapa-ofertas .mo__itens>li.mo__li--q::before{background:var(--mo-red);top:.55em}
  .mapa-ofertas .mo__itens>li.mo__li--rotulo::before{display:none}
  .mapa-ofertas .mo__n{position:relative;left:auto;top:auto;width:auto;max-width:100%;transform:none;display:inline-block;text-align:left;font-size:16px;padding:.55em .8em .6em}
  .mapa-ofertas .mo__n small{font-size:14px}
  .mapa-ofertas .mo__n--breve em{font-size:12px}
  .mapa-ofertas .mo__n--q{padding:0;font-size:17px;margin-top:4px}
  .mapa-ofertas .mo__n--rotulo{padding:0;font-size:14px;margin:-2px 0 -2px}
  .mapa-ofertas .mo__n--centro{font-size:18px;padding:.75em .95em .8em}
  .mapa-ofertas .mo__n--folha{font-size:15px;padding:.42em .65em .45em}
  .mapa-ofertas .mo__marco{display:none}
  .mapa-ofertas .mo__bpm{margin:.3em 0 0}
}

/* ---------- o movimento: só na tela, só sem movimento reduzido, só com o JS ---------- */
@media screen and (prefers-reduced-motion:no-preference){
  /* computador: a cena presa, o mapa se monta com a rolagem */
  .mapa-ofertas.mo--largo .mo__palco{height:560svh}
  .mapa-ofertas.mo--largo .mo__fixo{position:sticky;top:0;height:100svh;padding-top:calc(var(--mo-topo) + clamp(12px,2.4vh,28px));padding-bottom:clamp(16px,3vh,32px);overflow:hidden;align-items:stretch}
  .mapa-ofertas.mo--largo .mo__lado{align-self:center}
  .mapa-ofertas.mo--largo .mo__quadro{overflow:hidden}
  .mapa-ofertas.mo--largo .mo__base .mo__fio{stroke:var(--mo-gray);stroke-dasharray:1 1;stroke-dashoffset:var(--d,1)}
  .mapa-ofertas.mo--largo .mo__luz{display:inline}
  .mapa-ofertas.mo--largo .mo__luz .mo__fio{stroke:var(--mo-black);stroke-dasharray:1 1;stroke-dashoffset:var(--d,1);transition:stroke .5s var(--mo-ease),stroke-width .5s var(--mo-ease)}
  .mapa-ofertas.mo--largo .mo__luz .mo__g.is-atual .mo__fio{stroke:var(--mo-red);stroke-width:3}
  .mapa-ofertas.mo--largo .mo__ponta{display:inline;fill:var(--mo-red);stroke:var(--mo-white);stroke-width:2.5}

  /* apagado = cinza com fundo opaco (os fios passam por baixo); aceso = a cor do mapa parado */
  .mapa-ofertas.mo--largo .mo__n{opacity:var(--g,0);transform:translate(-50%,-50%) scale(calc(.92 + var(--k,0) * .08));
    border-color:color-mix(in srgb,var(--mo-black) calc(var(--k,0) * 100%),var(--mo-gray));color:color-mix(in srgb,var(--mo-black) calc(30% + var(--k,0) * 70%),var(--mo-white))}
  .mapa-ofertas.mo--largo .mo__n--centro{background:color-mix(in srgb,var(--mo-black) calc(var(--k,0) * 100%),var(--mo-white));color:color-mix(in srgb,var(--mo-white) calc(var(--k,0) * 100%),color-mix(in srgb,var(--mo-black) 30%,var(--mo-white)))}
  .mapa-ofertas.mo--largo .mo__n--q{color:color-mix(in srgb,var(--mo-red) calc(32% + var(--k,0) * 68%),var(--mo-white))}
  .mapa-ofertas.mo--largo .mo__marco{transform:translate(-45%,-45%) scale(var(--k,0))}
  .mapa-ofertas.mo--largo .mo__bpm,.mapa-ofertas.mo--largo .mo__n--breve em{opacity:calc(.25 + var(--k,0) * .75)}
  /* a pergunta da fase que está acendendo ganha um traço vermelho embaixo */
  .mapa-ofertas.mo--largo .mo__n--q b{display:inline-block;position:relative}
  .mapa-ofertas.mo--largo .mo__n--q b::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--mo-red);transform:scaleX(0);transform-origin:left center;transition:transform .6s var(--mo-ease)}
  .mapa-ofertas.mo--largo .mo__fase.is-atual .mo__n--q b::after{transform:scaleX(var(--k,0));transition:none}
  /* a fase que está acendendo: o vermelho entra da esquerda e sai quando a fase passa. Cobre a caixa inteira, borda
     incluída (inset = a espessura da borda de cada tipo de nó), e corre por TEMPO quando o nó acende (is-acesa): parado na
     rolagem, o vermelho está todo dentro ou todo fora, nunca pela metade nem deslocado do contorno. */
  .mapa-ofertas.mo--largo .mo__n:not(.mo__n--q):not(.mo__n--rotulo)::before{content:"";position:absolute;inset:calc(-1 * var(--mo-bw,1.5px));z-index:-1;border-radius:inherit;background:var(--mo-red);
    transform:scaleX(0);transform-origin:left center;transition:transform .55s var(--mo-ease)}
  .mapa-ofertas.mo--largo .mo__fase.is-atual .mo__n.is-acesa::before{transform:none}
  .mapa-ofertas.mo--largo .mo__fase.is-atual .mo__n.is-acesa:not(.mo__n--q):not(.mo__n--rotulo){color:var(--mo-white);border-color:var(--mo-red)}
  .mapa-ofertas.mo--largo .mo__fase.is-atual .mo__n.is-acesa .mo__bpm path{stroke:var(--mo-white)}
  .mapa-ofertas.mo--largo .mo__fase.is-atual .mo__n--breve.is-acesa em{color:var(--mo-white)}
  .mapa-ofertas.mo--largo a.mo__n:hover{color:var(--mo-white)}
  .mapa-ofertas.mo--largo .mo__n--centro::after{content:"";position:absolute;inset:-2px;border:2px solid var(--mo-red);border-radius:6px;opacity:0;pointer-events:none}
  .mapa-ofertas.mo--largo .mo__n--centro.is-pulso::after{animation:mo-pulso 1.25s var(--mo-ease) 2}
  .mapa-ofertas.mo--largo .mo__bpm path{stroke-dasharray:.42 .58;animation:mo-bpm 1.7s linear infinite}
  /* a lista das fases acompanha */
  .mapa-ofertas.mo--largo .mo__lista li{color:rgba(35,31,32,.34);transition:color .45s var(--mo-ease)}
  .mapa-ofertas.mo--largo .mo__lista .mo__num{color:inherit;transition:color .45s var(--mo-ease)}
  .mapa-ofertas.mo--largo .mo__lista li.is-feito,.mapa-ofertas.mo--largo .mo__lista li.is-atual{color:var(--mo-black)}
  .mapa-ofertas.mo--largo .mo__lista li.is-feito .mo__num,.mapa-ofertas.mo--largo .mo__lista li.is-atual .mo__num{color:var(--mo-red)}
  .mapa-ofertas.mo--largo .mo__lista li.is-atual{font-weight:800}
  .mapa-ofertas.mo--largo .mo__lista li.is-atual .mo__nome{transform:translateX(6px)}
  .mapa-ofertas.mo--largo .mo__barra{display:block;transform:scaleX(var(--k,0))}
  /* quem navega pelo teclado vê tudo */
  .mapa-ofertas.mo--largo.mo--foco .mo__n{opacity:1;transform:translate(-50%,-50%);border-color:var(--mo-black);color:var(--mo-black)}
  .mapa-ofertas.mo--largo.mo--foco .mo__bpm,.mapa-ofertas.mo--largo.mo--foco .mo__n--breve em{opacity:1}
  .mapa-ofertas.mo--largo.mo--foco .mo__marco{transform:translate(-45%,-45%)}
  .mapa-ofertas.mo--largo.mo--foco .mo__n--q{color:var(--mo-red);border:0}
  .mapa-ofertas.mo--largo.mo--foco .mo__n--rotulo{color:var(--mo-black);border:0}
  .mapa-ofertas.mo--largo.mo--foco .mo__n--centro{background:var(--mo-black);color:var(--mo-white)}
  .mapa-ofertas.mo--largo.mo--foco .mo__base .mo__fio{stroke:var(--mo-black);stroke-dashoffset:0}

  /* celular: o fio vermelho desce com a leitura, cada item entra quando o fio chega nele */
  .mapa-ofertas.mo--estreito .mo__fase::before{background:var(--mo-gray)}
  .mapa-ofertas.mo--estreito .mo__fase::after{content:"";position:absolute;left:10px;top:12px;bottom:-12px;width:2px;background:var(--mo-red);transform:scaleY(var(--t,0));transform-origin:top center}
  .mapa-ofertas.mo--estreito .mo__fase:last-child::after{bottom:auto;height:calc(100% - 24px)}
  .mapa-ofertas.mo--estreito .mo__fase-tit .mo__num{background:var(--mo-gray);color:var(--mo-black)}
  .mapa-ofertas.mo--estreito .mo__fase.is-atual .mo__fase-tit .mo__num,.mapa-ofertas.mo--estreito .mo__fase.is-feito .mo__fase-tit .mo__num{background:var(--mo-red);color:var(--mo-white)}
  .mapa-ofertas.mo--estreito .mo__itens>li .mo__n{opacity:var(--k,0);transform:translateX(calc((1 - var(--k,0)) * -18px))}
  .mapa-ofertas.mo--estreito .mo__itens>li::before{transform:scale(var(--k,0))}
  .mapa-ofertas.mo--estreito .mo__n--centro::after{content:"";position:absolute;inset:-2px;border:2px solid var(--mo-red);border-radius:6px;opacity:0;pointer-events:none}
  .mapa-ofertas.mo--estreito .mo__n--centro.is-pulso::after{animation:mo-pulso 1.25s var(--mo-ease) 2}
  .mapa-ofertas.mo--estreito .mo__bpm path{stroke-dasharray:.42 .58;animation:mo-bpm 1.7s linear infinite}
  .mapa-ofertas.mo--estreito.mo--foco .mo__itens>li .mo__n{opacity:1;transform:none}
}
@keyframes mo-pulso{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(1.18,1.7)}}
@keyframes mo-bpm{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

@media print{
  .mapa-ofertas{border-top:0;break-inside:avoid}
  .mapa-ofertas .mo__fixo{padding:24px 16px}
  .mapa-ofertas .mo__cta{border:1px solid var(--mo-black)}
}