/* V151 — atalhos editoriais abaixo do hero, sem alterar o banner */
.moca-shortcuts{position:relative;isolation:isolate;background:#eaf3fd;padding:0 20px 34px;margin:0;overflow:hidden}
.moca-shortcuts[hidden]{display:none!important}
.moca-shortcuts::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:repeating-linear-gradient(90deg,#77b8ef 0 2px,transparent 2px 7px);opacity:.7}
.moca-shortcuts__inner{max-width:1380px;margin:auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,2vw,30px);align-items:start}
.moca-shortcuts__item{--c1:#a9ddff;--c2:#0876ca;--line:#7dbaf0;position:relative;min-width:0;display:flex;align-items:center;flex-direction:column;text-decoration:none!important;color:#182a42!important;outline-offset:4px;transition:transform .32s cubic-bezier(.2,.8,.2,1);animation:moca-shortcut-enter .5s both;animation-delay:var(--moca-shortcut-delay)}
.moca-shortcuts__item[data-color="amarelo"]{--c1:#fff4a4;--c2:#ffcd23;--line:#e6a900}
.moca-shortcuts__item[data-color="escuro"]{--c1:#9fc8e9;--c2:#183b60;--line:#c99b2b}
.moca-shortcuts__orb{position:relative;display:grid;place-items:center;width:min(100%,160px);aspect-ratio:1/1;margin-top:-2px;z-index:1}
.moca-shortcuts__orb::before{content:"";position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle at 35% 28%,var(--c1),var(--c2) 77%);box-shadow:inset 0 4px 10px #fff8,0 9px 16px #174a7c22;transition:filter .35s,transform .35s}
.moca-shortcuts__ring{position:absolute;inset:4%;border:2px dashed var(--line);border-radius:50%;opacity:.9;transition:transform .65s cubic-bezier(.2,.8,.2,1),border-color .25s}
.moca-shortcuts__ring::after{content:"";position:absolute;inset:7px;border:2px dotted #ffffff9e;border-radius:50%;transition:transform .65s}
.moca-shortcuts__image{position:relative;z-index:2;width:100%;height:108%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 6px 5px #17314a2d);transition:transform .4s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.moca-shortcuts__base{position:absolute;z-index:3;bottom:1%;left:22%;width:56%;height:12%;border-radius:50%;background:linear-gradient(#fff,#d5e9fa);box-shadow:0 4px 6px #20568726;transition:transform .4s}
.moca-shortcuts__stem{position:relative;height:39px;border-left:2px dotted var(--line);transition:height .3s,border-color .3s}
.moca-shortcuts__stem::after{content:"";position:absolute;bottom:-3px;left:-5px;width:8px;height:8px;border:2px solid var(--line);border-radius:50%;background:#eaf3fd;transition:background .3s}
.moca-shortcuts__card{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3px;padding:9px 12px;min-height:55px;min-width:min(100%,130px);max-width:100%;border:1px solid #d3e0ee;border-radius:13px;background:#fff;box-shadow:0 8px 13px #2b4a6820;transition:background .3s,border-color .3s,transform .3s,box-shadow .3s}
.moca-shortcuts__card strong{font-size:14px;line-height:1.2;font-weight:750;white-space:nowrap}
.moca-shortcuts__card small{font-size:11px;line-height:1.3;color:#60758e;white-space:nowrap}
.moca-shortcuts__item:hover,.moca-shortcuts__item:focus-visible{transform:translateY(-5px)}
.moca-shortcuts__item:hover .moca-shortcuts__ring,.moca-shortcuts__item:focus-visible .moca-shortcuts__ring{transform:rotate(34deg) scale(1.055)}
.moca-shortcuts__item:hover .moca-shortcuts__ring::after,.moca-shortcuts__item:focus-visible .moca-shortcuts__ring::after{transform:rotate(-60deg)}
.moca-shortcuts__item:hover .moca-shortcuts__orb::before,.moca-shortcuts__item:focus-visible .moca-shortcuts__orb::before{filter:saturate(1.18) brightness(1.04);transform:scale(1.04)}
.moca-shortcuts__item:hover .moca-shortcuts__image,.moca-shortcuts__item:focus-visible .moca-shortcuts__image{transform:translateY(-9px) scale(1.065)}
.moca-shortcuts__item:hover .moca-shortcuts__base,.moca-shortcuts__item:focus-visible .moca-shortcuts__base{transform:scale(1.08)}
.moca-shortcuts__item:hover .moca-shortcuts__stem,.moca-shortcuts__item:focus-visible .moca-shortcuts__stem{height:35px}
.moca-shortcuts__item:hover .moca-shortcuts__card,.moca-shortcuts__item:focus-visible .moca-shortcuts__card{background:#ffda36;border-color:#ffda36;box-shadow:0 10px 17px #6b5a1630;transform:translateY(-2px)}
.moca-shortcuts__item:hover .moca-shortcuts__card small,.moca-shortcuts__item:focus-visible .moca-shortcuts__card small{color:#6b561d}
@keyframes moca-shortcut-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:950px){.moca-shortcuts__inner{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px}.moca-shortcuts{padding-top:12px}.moca-shortcuts__orb{width:min(100%,155px)}}
@media(max-width:520px){.moca-shortcuts{padding:15px 10px 28px}.moca-shortcuts__inner{gap:18px 5px}.moca-shortcuts__orb{width:min(100%,118px)}.moca-shortcuts__stem{height:25px}.moca-shortcuts__card{min-width:0;width:100%;padding:8px 3px;min-height:49px;border-radius:10px}.moca-shortcuts__card strong{font-size:11px;white-space:normal}.moca-shortcuts__card small{font-size:9px;white-space:normal}}
@media(prefers-reduced-motion:reduce){.moca-shortcuts__item{animation:none}.moca-shortcuts__item,.moca-shortcuts__item *{transition:none!important}}

/* V152 — sobreposição editorial do protótipo; seção continua fora do banner no DOM. */
@media (min-width:951px){
  .moca-shortcuts{
    margin-top:-120px;
    padding-top:0;
    padding-bottom:36px;
    z-index:4;
    overflow:visible;
    background:linear-gradient(to bottom,transparent 0 63px,#eaf3fd 63px 100%);
  }
  .moca-shortcuts::before{top:63px}
  .moca-shortcuts__inner{position:relative;z-index:1}
  .moca-shortcuts__orb{width:min(100%,162px);margin-top:0}
  .moca-shortcuts__stem{height:43px}
  .moca-shortcuts__card{min-height:55px}
}
/* Aro externo fino e pontilhado como no protótipo. */
.moca-shortcuts__ring{inset:3%;border-width:2px;border-style:dashed;box-shadow:none}
.moca-shortcuts__ring::after{inset:7px;border-width:1px;border-style:dotted;opacity:.65}
.moca-shortcuts__base{bottom:0;height:11%;background:linear-gradient(180deg,#fff 8%,#d8eafa 95%)}
/* A etiqueta não altera seu alinhamento em relação ao conector no hover. */
.moca-shortcuts__item:hover .moca-shortcuts__stem,.moca-shortcuts__item:focus-visible .moca-shortcuts__stem{height:43px}
@media(max-width:950px){
  .moca-shortcuts{margin-top:0;background:#eaf3fd;overflow:hidden}
  .moca-shortcuts__item:hover .moca-shortcuts__stem,.moca-shortcuts__item:focus-visible .moca-shortcuts__stem{height:25px}
}

/* V153 — refinamento com base no CSS do protótipo 4. */
@media (min-width:951px){
  /* A fileira desce 40px em relação à V152. */
  .moca-shortcuts__item:nth-child(1){--moca-v153-offset:8px}
  .moca-shortcuts__item:nth-child(2){--moca-v153-offset:0px}
  .moca-shortcuts__item:nth-child(3){--moca-v153-offset:6px}
  .moca-shortcuts__item:nth-child(4){--moca-v153-offset:18px}
  .moca-shortcuts__item:nth-child(5){--moca-v153-offset:20px}
  .moca-shortcuts__item:nth-child(6){--moca-v153-offset:10px}
  .moca-shortcuts__orb{transform:translateY(var(--moca-v153-offset,0px))}
  /* O conector absorve a diferença de altura e mantém etiquetas alinhadas. */
  .moca-shortcuts__stem{height:calc(43px - var(--moca-v153-offset,0px))}
  .moca-shortcuts__item:hover .moca-shortcuts__stem,
  .moca-shortcuts__item:focus-visible .moca-shortcuts__stem{height:calc(43px - var(--moca-v153-offset,0px))}
}
/* Aro com traço leve; movimento do pontilhado no hover. */
.moca-shortcuts__ring{border-width:1.5px;border-style:dashed}
.moca-shortcuts__ring::after{border-width:1px}

/* V154 — detalhes do expositor conforme o protótipo. */
/* Halo externo translúcido, atrás do círculo colorido e do personagem. */
.moca-shortcuts__orb::after{
  content:"";position:absolute;z-index:0;inset:0;border-radius:50%;
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  pointer-events:none;transition:background-color .35s ease,transform .35s ease;
}
/* O círculo sólido tem aro interno translúcido e profundidade na base. */
.moca-shortcuts__orb::before{
  z-index:1;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.28),inset 0 -9px 0 rgba(4,33,63,.10),0 12px 18px -12px rgba(4,33,63,.45);
}
.moca-shortcuts__ring{z-index:2;pointer-events:none}
.moca-shortcuts__image{z-index:3}
/* Pedestal com corpo inferior e tampa elíptica independente. */
.moca-shortcuts__base{
  z-index:4;bottom:0;left:22%;width:56%;height:12px;
  border-radius:0 0 50% 50% / 0 0 100% 100%;
  background:linear-gradient(180deg,#c9dcf0,#a9c6e5);
  box-shadow:0 4px 6px rgba(32,86,135,.14);
}
.moca-shortcuts__base::before{
  content:"";position:absolute;left:-7px;right:-7px;top:-6px;height:12px;
  border-radius:50%;background:linear-gradient(180deg,#fff,#dce9f6);
  box-shadow:0 1px 0 rgba(4,33,63,.08);
}
/* O fio e seu ilhós devem aparecer à frente da plaquinha, nunca atrás dela. */
.moca-shortcuts__stem{z-index:5;flex:none;overflow:visible}
.moca-shortcuts__stem::after{z-index:6;box-sizing:border-box;bottom:-5px;left:-6px;width:10px;height:10px;background:#eaf3fd}
.moca-shortcuts__card{z-index:2}
.moca-shortcuts__item:hover .moca-shortcuts__orb::after,
.moca-shortcuts__item:focus-visible .moca-shortcuts__orb::after{
  background:rgba(255,255,255,.18);transform:scale(1.035)
}
@media(prefers-reduced-motion:reduce){.moca-shortcuts__orb::after{transition:none}}

/* V155 — plaquinhas na mesma linha e transição mais justa para a próxima seção.
   O deslocamento visual dos círculos não deve alterar a altura do conector
   no fluxo, pois isso desnivela as plaquinhas. */
@media (min-width:951px){
  .moca-shortcuts__stem,
  .moca-shortcuts__item:hover .moca-shortcuts__stem,
  .moca-shortcuts__item:focus-visible .moca-shortcuts__stem{height:43px}
  .moca-shortcuts__card{margin-top:0}
  .moca-shortcuts{padding-bottom:20px}
}

/* V156 — figura acima do pedestal e costura acompanhando a onda do hero.
   A seção permanece independente do banner; o SVG decorativo é interno a ela. */
@media (min-width:951px){
  .moca-hero:has(+ .moca-shortcuts) .moca-hero__floor{opacity:0}
  .moca-shortcuts{background:linear-gradient(to bottom,transparent 0 64px,#eaf3fd 64px 100%)}
  .moca-shortcuts::before{display:none}
  .moca-shortcuts__wave{position:absolute;top:0;left:0;width:100%;height:86px;display:block;pointer-events:none;z-index:0;overflow:visible}
  .moca-shortcuts__wave-back{fill:rgba(234,243,252,.16)}
  .moca-shortcuts__wave-front{fill:#eaf3fd}
  .moca-shortcuts__wave-stitch{fill:none;stroke:#8db8e2;stroke-width:2.2;stroke-dasharray:1 7;stroke-linecap:round;vector-effect:non-scaling-stroke}
  .moca-shortcuts__inner{z-index:1}
}
/* O corpo do pedestal fica atrás da imagem; a tampa continua em duas camadas,
   sem encobrir os pés do personagem. */
.moca-shortcuts__base{z-index:2}
.moca-shortcuts__image{z-index:4}
.moca-shortcuts__base::before{z-index:1}
@media(max-width:950px){.moca-shortcuts__wave{display:none}}

/* V157 — fade-out suave na transição final do banner, atrás dos atalhos.
   A seção permanece fora do hero; não altera a onda nem os personagens. */
@media (min-width:951px){
  .moca-shortcuts::before{
    content:"";display:block;position:absolute;left:0;right:0;
    top:-105px;height:169px;z-index:0;pointer-events:none;opacity:1;
    background:linear-gradient(to bottom,
      rgba(234,243,253,0) 0%,
      rgba(234,243,253,.045) 32%,
      rgba(234,243,253,.13) 65%,
      rgba(234,243,253,.24) 100%);
  }
  .moca-shortcuts__wave{z-index:0}
  .moca-shortcuts__inner{position:relative;z-index:1}
}

/* V159 — aproxima os atalhos do hero, mantendo toda a geometria interna
   (personagens, palanques, conectores, etiquetas e hover) da V157. */
@media (min-width:951px) {
  .moca-hero + .moca-shortcuts { margin-top:-104px; }
}

/* V160 — aproxima os expositores do banner sem mover a onda de fundo.
   O deslocamento afeta apenas a grade; hover e geometria interna permanecem. */
@media (min-width:951px) {
  .moca-hero + .moca-shortcuts .moca-shortcuts__inner { top:-26px; }
  .moca-hero + .moca-shortcuts { padding-bottom:0; }
}

/* V161 — sobe o conjunto de atalhos na transição com o hero,
   sem mudar os elementos internos, a onda, o hover ou a configuração. */
@media (min-width:951px) {
  .moca-hero + .moca-shortcuts { margin-top:-194px; }
}

/* V162 — mobile: fileira única e movimento contínuo, sem alterar desktop. */
@media (max-width:950px) {
  .moca-shortcuts { overflow:hidden; }
  .moca-shortcuts__inner {
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;
    align-items:flex-start;
    gap:18px;
    width:max-content;
    max-width:none;
    margin:0;
    padding:0 18px 0 0;
    row-gap:0;
    will-change:transform;
  }
  .moca-shortcuts__item {
    flex:0 0 132px;
    width:132px;
    min-width:132px;
  }
  .moca-shortcuts__orb { width:118px; }
  .moca-shortcuts__card { width:100%; min-width:0; }
  .moca-shortcuts__card strong { white-space:nowrap; font-size:12px; }
  .moca-shortcuts__card small { white-space:nowrap; font-size:10px; }
  .moca-shortcuts__inner[data-moca-loop="on"] {
    animation:moca-shortcuts-mobile-marquee 42s linear infinite;
  }
  .moca-shortcuts__inner[data-moca-loop="on"]:hover,
  .moca-shortcuts__inner[data-moca-loop="on"]:focus-within {
    animation-play-state:paused;
  }
}
@keyframes moca-shortcuts-mobile-marquee {
  from { transform:translate3d(0,0,0); }
  to { transform:translate3d(-50%,0,0); }
}
@media (max-width:950px) and (prefers-reduced-motion:reduce) {
  .moca-shortcuts { overflow-x:auto; }
  .moca-shortcuts__inner[data-moca-loop="on"] { animation:none; transform:none; will-change:auto; }
}

/* V164 — mobile: preserva a onda original do hero e desenha SOMENTE
   o pontilhado curvo. Não reativa o SVG com preenchimento da V163. */
@media (max-width:950px) {
  .moca-shortcuts__wave { display:none !important; }
  .moca-shortcuts { background:#eaf3fd; }
  .moca-shortcuts::before {
    content:"";
    display:block;
    position:absolute;
    left:50%;
    top:0;
    width:max(720px, 160vw);
    height:86px;
    transform:translateX(-50%);
    z-index:0;
    pointer-events:none;
    opacity:.75;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 86' preserveAspectRatio='none'%3E%3Cpath d='M0 66C180 44 330 34 520 42c170 8 260 34 470 34 190 0 330-26 450-44' fill='none' stroke='%238db8e2' stroke-width='2.2' stroke-dasharray='1 7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
  .moca-shortcuts__inner { position:relative; z-index:1; }
}

/* Mobile: atalhos mais próximos do banner e costura única, alinhada à onda.
   O traçado agora pertence ao SVG da onda do hero, não a um fundo independente. */
@media (max-width:950px) {
  .moca-hero + .moca-shortcuts {
    margin-top:-45px;
    padding-top:0;
    position:relative;
    z-index:3;
    background:linear-gradient(to bottom, transparent 0 45px, #eaf3fd 45px 100%);
  }
  .moca-hero + .moca-shortcuts::before { display:none; }
  .moca-hero + .moca-shortcuts .moca-shortcuts__inner { position:relative; z-index:1; }
}

/* V165 — mobile: somente a costura curva do SVG do hero.
   A antiga linha horizontal do ::before era o segundo tracejado.
   Subimos a fileira sem alterar a curva ou o carrossel do banner. */
@media (max-width:950px) {
  .moca-shortcuts::before,
  .moca-hero + .moca-shortcuts::before {
    content:none !important;
    display:none !important;
    background:none !important;
  }
  .moca-hero + .moca-shortcuts .moca-shortcuts__inner {
    top:-52px;
  }
  .moca-hero + .moca-shortcuts {
    padding-bottom:0;
  }
}

/* V166 — Corrige a geometria da transição mobile.
   A sobreposição é feita na própria seção, sem deslocar só o conteúdo
   (que antes deixava um vazio visual e uma linha inferior). */
@media (max-width:950px) {
  .moca-hero + .moca-shortcuts {
    margin-top:-108px;
    padding-top:14px;
    padding-bottom:10px;
    background:linear-gradient(to bottom, transparent 0 108px, #eaf3fd 108px 100%);
    border:0;
    overflow:hidden;
  }
  .moca-hero + .moca-shortcuts .moca-shortcuts__inner {
    top:auto;
    margin-top:0;
  }
  .moca-hero + .moca-shortcuts::before,
  .moca-hero + .moca-shortcuts::after {
    content:none !important;
    display:none !important;
    border:0 !important;
    background:none !important;
  }
}

/* V167 — sobe a seção inteira mais 38px no mobile, mantendo
   o tracejado SVG do hero e sem deslocar apenas os itens. */
@media (max-width:950px) {
  .moca-hero + .moca-shortcuts {
    margin-top:-146px;
    background:linear-gradient(to bottom, transparent 0 70px, #eaf3fd 70px 100%);
  }
}

/* V168 — ajuste mobile efetivo: a regra anterior dependia do seletor de
   irmão adjacente e não deslocava a seção em todos os layouts. O ID é
   aplicado diretamente à seção renderizada, sem depender do DOM do hero. */
@media (max-width:950px) {
  #moca-shortcuts {
    margin-top:-110px !important;
    padding-top:40px;
    padding-bottom:12px;
    background:linear-gradient(to bottom,transparent 0 70px,#eaf3fd 70px 100%);
  }
  #moca-shortcuts .moca-shortcuts__inner {
    gap:8px;
    top:auto;
  }
  #moca-shortcuts .moca-shortcuts__item {
    flex:0 0 124px;
    width:124px;
    min-width:124px;
  }
  #moca-shortcuts .moca-shortcuts__orb { width:116px; }
  #moca-shortcuts .moca-shortcuts__card {
    min-height:38px;
    padding:8px 5px;
    gap:0;
  }
  #moca-shortcuts .moca-shortcuts__card small { display:none; }
}


/* V169 — menor espacamento desktop e carrossel mobile arrastavel. */
@media (min-width:951px) {
  #moca-shortcuts .moca-shortcuts__inner {
    gap:clamp(6px,1.1vw,17px);
  }
}
@media (max-width:950px) {
  #moca-shortcuts {
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    touch-action:pan-x pan-y;
  }
  #moca-shortcuts::-webkit-scrollbar { display:none; }
  #moca-shortcuts .moca-shortcuts__inner,
  #moca-shortcuts .moca-shortcuts__inner[data-moca-loop="on"] {
    animation:none!important;
    transform:none!important;
    will-change:auto;
    width:max-content;
    min-width:100%;
    padding-right:16px;
  }
  #moca-shortcuts .moca-shortcuts__item {
    scroll-snap-align:start;
    scroll-snap-stop:normal;
  }
}