/* Exclusivo da home: não modifica moca-custom.css, nem os demais templates. */
body:has(.moca-hero) { background-color:transparent; }
body:has(.moca-hero) [data-moca-promo] {position:relative;z-index:35;background:transparent;color:#fff;}
.moca-promo__inner{max-width:1320px;margin:auto;min-height:40px;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:5px 12px}
.moca-promo a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:#e7f2ff;font-size:12px;font-weight:650;white-space:nowrap}
.moca-promo a:hover{color:#ffda31}.moca-promo__icon{color:#ffda31;font-size:15px}
body:has(.moca-hero) header{position:relative;z-index:40;background:transparent!important}
body:has(.moca-hero) header.moca-is-scrolled{position:sticky}
.moca-hero{--moca-backdrop-offset:260px;position:relative;isolation:isolate;min-height:560px;padding:22px 0 85px;color:#fff}
.moca-hero__background{position:absolute;inset:calc(-1 * var(--moca-backdrop-offset)) 0 0;z-index:-2;background:var(--moca-hero-slide-gradient,#082847);transition:background .45s ease}
.moca-hero__texture{position:absolute;inset:calc(-1 * var(--moca-backdrop-offset)) 0 0;z-index:-1;pointer-events:none;background-image:radial-gradient(#ffffff21 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(to bottom,transparent,#000 40%)}
.moca-hero__wrap{max-width:1320px;margin:auto;padding:0 16px;position:relative}
.moca-hero__slides{min-height:410px;position:relative}
.moca-hero__slide{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,40%) minmax(0,60%);align-items:center;gap:0;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .35s,transform .35s,visibility .35s}
.moca-hero__slide.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.moca-hero__copy{padding:20px 0;position:relative;z-index:3}
.moca-hero__badge{display:inline-flex;align-items:center;gap:9px;border:1px solid #ffda31;border-radius:10px;padding:9px 13px;color:#fff;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.moca-hero__badge i{height:8px;width:8px;border-radius:50%;background:#ffda31}
.moca-hero__copy h2{font-size:clamp(34px,4.3vw,64px);line-height:1.06;letter-spacing:-.045em;font-weight:850;margin:15px 0 12px;color:#fff}
.moca-hero__copy h2 em{display:block;font-style:normal;color:#ffda31}
.moca-hero__description{font-size:16px;line-height:1.6;color:#d5e5f7;max-width:500px}
.moca-hero__price{font-size:13px;margin:18px 0;color:#e8f2ff}.moca-hero__price strong{font-size:27px;color:#fff}
.moca-hero__ctas{display:flex;flex-wrap:wrap;gap:10px}.moca-hero__ctas a{display:inline-flex;align-items:center;justify-content:center;min-height:51px;padding:0 22px;border-radius:13px;font-weight:800;text-decoration:none;transition:transform .2s,background .2s}
.moca-hero__ctas a:hover{transform:translateY(-2px)}.moca-hero__buy{background:#ffda31;color:#082847}.moca-hero__buy:hover{background:#ffe568}.moca-hero__secondary{color:#fff;border:1px solid #9fb4cd}.moca-hero__secondary:hover{background:#ffffff1a}
.moca-hero__controls{display:flex;align-items:center;gap:14px;position:relative;z-index:4;margin-top:8px}.moca-hero__counter{font-size:13px;font-weight:850;letter-spacing:.05em}.moca-hero__dots{display:flex;align-items:center;gap:7px}.moca-hero__dots button{width:28px;height:5px;border:0;background:#ffffff50;border-radius:6px;cursor:pointer}.moca-hero__dots button.is-active{background:#ffda31;width:38px}.moca-hero__arrows{display:flex;gap:8px}.moca-hero__arrows button{display:grid;place-items:center;border:1px solid #ffffff60;border-radius:50%;width:42px;height:42px;background:#ffffff10;color:#fff;cursor:pointer}.moca-hero__arrows button:hover{background:#ffffff35}.moca-hero__arrows svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.moca-hero__floor{position:absolute;bottom:-1px;left:0;width:100%;height:72px;fill:#f3f7fc;pointer-events:none}
@media(max-width:1100px){.moca-promo__inner{overflow:auto;justify-content:flex-start;scrollbar-width:none}}
@media(prefers-reduced-motion:reduce){.moca-hero__slide,.moca-hero__background,.moca-hero__ctas a{transition:none!important}}

/* Composição principal: Funko em destaque e cards de reserva laterais. */
.moca-hero__art{position:relative;height:470px;overflow:visible;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 245px;align-items:center;gap:12px}
.moca-hero__main-art{position:relative;height:100%;min-width:0;isolation:isolate;align-self:stretch}
.moca-hero__orbit{position:absolute;left:50%;top:53%;width:min(138%,500px);aspect-ratio:1;translate:-50% -50%;border:1.5px dashed rgba(255,255,255,.28);border-radius:50%;animation:moca-orbit-spin 120s linear infinite;pointer-events:none}
.moca-hero__orbit::after{content:"";position:absolute;top:13%;right:11%;width:13px;height:13px;border-radius:50%;background:#ffd740;box-shadow:0 0 0 6px rgba(255,215,64,.2)}
@keyframes moca-orbit-spin{to{transform:rotate(360deg)}}
.moca-hero__disc{position:absolute;left:50%;top:53%;width:min(102%,380px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle at 36% 30%,#ffeb99 0%,#ffd740 52%,#f0bb12 100%);box-shadow:0 0 0 16px rgba(255,215,64,.1),0 0 0 34px rgba(255,215,64,.05)}
.moca-hero__figure{position:absolute;object-fit:contain;filter:drop-shadow(0 18px 16px rgba(0,18,40,.32))}
.moca-hero__figure--main{inset:auto auto -148px -12%;margin-inline:0;width:124%;max-width:none;height:670px;transform:none;z-index:5;animation:moca-figure-float 6s ease-in-out infinite}
@keyframes moca-figure-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
.moca-hero__side-cards{position:relative;z-index:6;display:grid;gap:14px;align-content:center}
.moca-hero__side-card{min-height:156px;display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:5px;padding:10px 9px;border:2px solid #fff;border-radius:17px;outline:1px dashed rgba(8,42,74,.42);outline-offset:-8px;background:#fff;color:#082847;text-decoration:none;box-shadow:0 9px 0 rgba(0,28,61,.12),0 14px 24px rgba(0,21,43,.14);transition:transform .2s ease,box-shadow .2s ease}
.moca-hero__side-card:hover{transform:translateY(-3px);box-shadow:0 12px 0 rgba(0,28,61,.12),0 18px 28px rgba(0,21,43,.17)}
.moca-hero__side-image{width:106px;height:132px;object-fit:contain;filter:drop-shadow(0 5px 5px rgba(0,0,0,.15))}
.moca-hero__side-info{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.moca-hero__side-info strong{font-size:15px;line-height:1.2;overflow-wrap:anywhere;font-weight:850}
.moca-hero__side-button{display:inline-flex;align-items:center;justify-content:center;min-height:33px;padding:0 12px;border-radius:9px;background:var(--moca-palette-side-button-bg,#ffda31);color:var(--moca-palette-side-button-color,#082847);font-size:12px;font-weight:850;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.moca-hero__side-card:hover .moca-hero__side-button,.moca-hero__side-card:focus-visible .moca-hero__side-button{background:var(--moca-palette-side-button-hover-bg,#ffe568)}
@media(max-width:1100px) and (min-width:768px){.moca-hero__art{grid-template-columns:minmax(0,1fr) 172px;gap:6px}.moca-hero__side-card{grid-template-columns:78px minmax(0,1fr);min-height:130px;padding:8px 6px}.moca-hero__side-image{width:78px;height:108px}.moca-hero__side-info strong{font-size:13px}.moca-hero__side-button{font-size:11px;padding:0 8px}.moca-hero__figure--main{height:465px;bottom:-55px}}
/* Mobile: arte protagonista em largura total; reservas abaixo, sem comprimir o Funko. */
@media (max-width:767px) {
  .moca-hero__slide.is-active { grid-template-rows:auto auto; }
  .moca-hero__art {
    width:100%; height:auto; min-height:0; margin-top:12px;
    grid-template-columns:minmax(0,1fr); gap:24px; align-items:stretch;
  }
  .moca-hero__main-art { height:350px; min-height:350px; width:100%; }
  .moca-hero__orbit { left:50%; top:49%; width:min(86vw,365px); }
  .moca-hero__disc { left:50%; top:49%; width:min(67vw,280px); }
  .moca-hero__figure--main {
    left:50%; right:auto; bottom:-12px; top:auto; inset-block-start:auto;
    width:100%; max-width:440px; height:390px; margin:0;
    transform:translateX(-50%); object-position:center bottom;
  }
  .moca-hero__side-cards {
    width:100%; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px; align-content:stretch;
  }
  .moca-hero__side-card {
    min-width:0; min-height:112px; grid-template-columns:44% minmax(0,1fr);
    justify-items:stretch; gap:4px; padding:9px 7px; border-radius:13px;
  }
  .moca-hero__side-image { width:100%; max-width:90px; height:91px; }
  .moca-hero__side-info { min-width:0; align-items:flex-start; justify-content:center; gap:7px; }
  .moca-hero__side-info strong { font-size:12px; line-height:1.2; text-align:left; }
  .moca-hero__side-button { min-height:29px; font-size:10px; padding:0 9px; border-radius:7px; }
  .moca-hero__discount { top:0; right:4%; width:55px; height:55px; font-size:9px; }
  .moca-hero__discount strong { font-size:17px; }
  .moca-hero__discount span { font-size:8px; }
  .moca-hero__controls { flex-wrap:nowrap; gap:9px; width:100%; min-width:0; }
  .moca-hero__counter { white-space:nowrap; flex:0 0 auto; font-size:12px; }
  .moca-hero__dots { flex:1 1 auto; min-width:0; gap:5px; }
  .moca-hero__dots button, .moca-hero__dots button.is-active { flex:1 1 0; width:auto; min-width:0; }
  .moca-hero__arrows { flex:0 0 auto; gap:6px; }
  .moca-hero__arrows button { width:36px; height:36px; }
}
@media (max-width:359px) {
  .moca-hero__main-art { height:300px; min-height:300px; }
  .moca-hero__figure--main { height:340px; }
  .moca-hero__side-card { grid-template-columns:40% minmax(0,1fr); padding:7px 5px; }
  .moca-hero__side-info strong { font-size:11px; }
}
@media(prefers-reduced-motion:reduce){.moca-hero__orbit,.moca-hero__figure,.moca-hero__sparkle{animation:none!important}}
.moca-hero__discount{position:absolute;right:13%;top:4%;z-index:7;width:100px;height:100px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;background:#ffda31;color:#071d39;transform:rotate(-9deg);box-shadow:5px 7px 0 #082747;font-size:13px;font-weight:900;text-transform:uppercase;text-align:center}
.moca-hero__discount strong{font-size:30px;letter-spacing:-.06em}.moca-hero__discount span{font-size:12px}
.moca-hero__sparkle{position:absolute;z-index:7;color:#ffda31;font-size:27px;pointer-events:none;animation:moca-twinkle 3.6s ease-in-out infinite}.moca-hero__sparkle--a{left:12%;top:12%}.moca-hero__sparkle--b{right:9%;top:34%;animation-delay:-1.2s}.moca-hero__sparkle--c{left:30%;top:70%;color:white;animation-delay:-2.4s}
@keyframes moca-twinkle{50%{transform:scale(.65) rotate(35deg);opacity:.55}}
@media(prefers-reduced-motion:reduce){.moca-hero__orbit,.moca-hero__figure,.moca-hero__sparkle{animation:none!important}}

/* V26 — altura fluida, palanques condicionais e progresso sincronizado */
/* O slide ativo participa do fluxo: descrições longas não invadem os botões
   e os controles ficam depois da maior coluna. */
.moca-hero__slides { min-height:0; }
.moca-hero__slide { position:absolute; inset:0; min-height:470px; }
.moca-hero__slide.is-active { position:relative; inset:auto; }
.moca-hero__copy { min-width:0; padding:24px 0 30px; }
.moca-hero__copy h2, .moca-hero__description { overflow-wrap:break-word; }
.moca-hero__price { margin:22px 0 20px; }
.moca-hero__ctas { margin-top:8px; }
.moca-hero__controls { margin-top:12px; }

/* A trilha é o fundo; o preenchimento amarelo cresce durante o autoplay. */
.moca-hero__dots button {
  position:relative; width:38px; height:5px; overflow:hidden;
  background:rgba(255,255,255,.35); transition:background .2s;
}
.moca-hero__dots button.is-active { width:38px; background:rgba(255,255,255,.35); }
.moca-hero__dots button.is-active::after {
  content:""; position:absolute; inset:0; background:#ffda31;
  transform:scaleX(0); transform-origin:left center;
}
.moca-hero__dots button.is-active.is-progressing::after {
  animation:moca-hero-progress var(--moca-autoplay-duration,6500ms) linear forwards;
}
.moca-hero--paused .moca-hero__dots button.is-active::after { animation-play-state:paused; }
@keyframes moca-hero-progress { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@media(max-width:767px){
  .moca-hero { min-height:0; }
  .moca-hero__slides { min-height:0; }
  .moca-hero__slide { min-height:0; }
  .moca-hero__slide.is-active { grid-template-rows:auto auto; }
  .moca-hero__copy { padding:8px 0 20px; }
  .moca-hero__copy h2 { margin-top:12px; }
  .moca-hero__price { margin:14px 0; }
  .moca-hero__controls { margin-top:14px; }
}
@media(prefers-reduced-motion:reduce){
  .moca-hero__dots button.is-active.is-progressing::after { animation:none; transform:scaleX(1); }
}

/* V28 — reveal ascendente sem oscilacao final, reiniciado a cada slide */
@keyframes moca-reveal-bounce {
  0%   { opacity:0; transform:translate3d(0,34px,0) scale(.975); }
  100% { opacity:1; transform:translate3d(0,0,0) scale(1); }
}
/* Apenas elementos do slide ativo animam: autoplay e setas funcionam sem JS extra. */
.moca-hero__slide.is-active .moca-hero__badge,
.moca-hero__slide.is-active .moca-hero__copy h2,
.moca-hero__slide.is-active .moca-hero__description,
.moca-hero__slide.is-active .moca-hero__price,
.moca-hero__slide.is-active .moca-hero__ctas {
  animation:moca-reveal-bounce 660ms cubic-bezier(.16,1,.3,1) both;
}
.moca-hero__slide.is-active .moca-hero__badge { animation-delay:30ms; }
.moca-hero__slide.is-active .moca-hero__copy h2 { animation-delay:100ms; }
.moca-hero__slide.is-active .moca-hero__description { animation-delay:185ms; }
.moca-hero__slide.is-active .moca-hero__price { animation-delay:260ms; }
.moca-hero__slide.is-active .moca-hero__ctas { animation-delay:335ms; }
/* Imagens entram com a mesma linguagem sem afetar a animação de flutuação individual. */
@keyframes moca-art-bounce {
  0% { opacity:0; translate:0 26px; scale:.94; }
  100% { opacity:1; translate:0 0; scale:1; }
}
.moca-hero__slide.is-active .moca-hero__art {
  animation:moca-art-bounce 760ms cubic-bezier(.16,1,.3,1) 150ms both;
}
@media (prefers-reduced-motion:reduce) {
  .moca-hero__slide.is-active .moca-hero__badge,
  .moca-hero__slide.is-active .moca-hero__copy h2,
  .moca-hero__slide.is-active .moca-hero__description,
  .moca-hero__slide.is-active .moca-hero__price,
  .moca-hero__slide.is-active .moca-hero__ctas,
  .moca-hero__slide.is-active .moca-hero__art { animation:none!important; opacity:1; }
}

/* V30 — SVGs originais do protótipo na tarja */
.moca-promo__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;line-height:1}
.moca-promo__icon svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.moca-promo a>span:last-child{display:inline}
.moca-promo a b{font-weight:800;color:inherit}

/* V34 — tarja mobile: somente um benefício centralizado por vez. */
@media (max-width: 767px) {
  .moca-promo__inner.moca-promo__inner--slider {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:center;
    justify-items:center;
    width:100%;
    min-height:40px;
    padding:6px 16px;
    overflow:hidden;
    scrollbar-width:none;
  }
  .moca-promo__inner--slider > a {
    grid-area:1 / 1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    width:max-content;
    max-width:100%;
    white-space:normal;
    text-align:center;
    line-height:1.35;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(7px);
    transition:opacity .32s ease,transform .32s ease,visibility .32s;
  }
  .moca-promo__inner--slider > a.is-on {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }
  .moca-promo__inner--slider .moca-promo__icon { flex-shrink:0; }
}
@media (prefers-reduced-motion:reduce) {
  .moca-promo__inner--slider > a { transition:none!important; transform:none!important; }
}

/* V40 — A tarja usa o mesmo visual nas páginas internas, sem depender do hero. */
body:not(:has(.moca-hero)) [data-moca-promo] {
  position: relative;
  z-index: 35;
  background: #082747;
  color: #fff;
}


/* V106 — Hero e faixa promocional seguem a mesma grade da página. */
.moca-hero__wrap,
.moca-promo__inner {
  box-sizing: border-box;
  max-width: calc(var(--moca-layout-max, 1220px) + 2 * var(--moca-layout-gutter, 24px));
  padding-inline: var(--moca-layout-gutter, 24px);
  margin-inline: auto;
}
@media (max-width: 767px) {
  .moca-hero__wrap { padding-inline: 16px; }
  .moca-promo__inner { padding-inline: 16px; }
}

/* V107 — a faixa de beneficios nunca pode ampliar a largura da pagina. */
[data-moca-promo], .moca-promo__inner, .moca-hero, .moca-hero__wrap { box-sizing:border-box; max-width:100%; min-width:0; }
@media (min-width:768px) and (max-width:1300px) {
  .moca-promo__inner { width:100%; overflow-x:auto; overflow-y:hidden; justify-content:flex-start; scrollbar-width:none; }
  .moca-promo__inner::-webkit-scrollbar { display:none; }
}
@media (max-width:767px) {
  .moca-promo__inner.moca-promo__inner--slider { overflow:hidden; }
  .moca-hero__wrap { width:100%; }
}


/* V108 — Corrige a regressão da V107 sem mexer na largura global da página.
   A tarja é um elemento próprio; o hero mantém seu conteúdo limitado. */
@media (min-width: 768px) {
  /* A tarja acompanha a largura visual da caixa branca do cabeçalho. */
  body:has(.moca-hero) [data-moca-promo],
  body:not(:has(.moca-hero)) [data-moca-promo] {
    box-sizing: border-box;
    width: calc(100% - 32px);
    max-width: 1270px;
    margin-inline: auto;
  }
  .moca-promo__inner {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-inline: 12px;
    gap: 12px;
  }
  /* Não deixar a faixa determinar a largura do documento. */
  .moca-promo__inner { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .moca-promo__inner::-webkit-scrollbar { display: none; }
}
/* A regra V107 max-width:100% anulava o limite editorial de V106.
   Restaura a largura interna do banner sem mudar seu fundo full-bleed. */
.moca-hero__wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--moca-layout-max, 1220px) + 2 * var(--moca-layout-gutter, 24px));
  margin-inline: auto;
  padding-inline: var(--moca-layout-gutter, 24px);
}
@media (max-width: 767px) {
  [data-moca-promo] { width: 100%; max-width: 100%; }
  .moca-promo__inner.moca-promo__inner--slider { width: 100%; max-width: 100%; }
  .moca-hero__wrap { max-width: 100%; padding-inline: 16px; }
}

/* V127 — Fundo da tarja em largura total nas paginas internas.
   A faixa mantem o conteudo alinhado ao header, mas o fundo nao termina
   nas margens laterais do container de 1270px. */
@media (min-width: 768px) {
  body:not(:has(.moca-hero)) [data-moca-promo] {
    position: relative;
    isolation: isolate;
    background: #082747;
  }
  body:not(:has(.moca-hero)) [data-moca-promo]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #082747;
    z-index: -1;
    pointer-events: none;
  }
}

/* V158 — continuidade visual do hero para os atalhos (somente fundo).
   Os componentes, alturas, scripts e estilos dos atalhos V157 ficam intactos.
   Camadas aplicadas atras do conteudo para unir o azul do banner a onda. */
@media (min-width:951px) {
  /* O fundo do Hero usa a variavel global, sem uma segunda pintura no desktop. */
  /* A textura se dissolve ao se aproximar da onda, em vez de cortar de repente. */
  .moca-hero:has(+ .moca-shortcuts) .moca-hero__texture {
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 40%,#000 74%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 40%,#000 74%,transparent 100%);
  }
  /* Uma pelicula leve, atras dos atalhos, integra a area sobreposta ao hero.
     A regra nao altera a geometria da onda nem os elementos dos expositores. */
  .moca-hero:has(+ .moca-shortcuts) + .moca-shortcuts::before {
    background:linear-gradient(180deg,
      rgba(112,181,235,0) 0%,
      rgba(112,181,235,.045) 30%,
      rgba(199,225,246,.15) 67%,
      rgba(234,243,253,.23) 100%);
  }
}

/* V159 — sobe o texto do hero sem deslocar a arte, os controles ou
   interferir nas animações de entrada que utilizam transform. */
@media (min-width:951px) {
  .moca-hero__slide.is-active .moca-hero__copy { top:-34px; }
}

/* V160 — controles acompanham a subida do texto do hero (desktop). */
@media (min-width:951px) {
  .moca-hero__controls { top:-34px; }
}

/* V161 — aproxima os controles da composição do protótipo.
   Mantém a posição aprovada do título e da arte. Apenas desktop. */
@media (min-width:951px) {
  .moca-hero__controls { top:-60px; }
}

/* V170 — reserva de geometria desktop antes da insercao dos slides pelo JS.
   Evita crescimento do hero quando o primeiro slide se torna relativo. */
@media (min-width:768px) {
  .moca-hero__slides { min-height:470px; }
}


/* Hero: acabamento da etiqueta no estilo .plate do prototipo. */
.moca-hero .moca-hero__badge {
  position:relative;
  isolation:isolate;
  width:max-content;
  max-width:calc(100% - 4px);
  border:0;
  border-radius:11px;
  background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:none;
  height:34px;
  padding:0 14px;
  font-weight:800;
  font-size:12px;
  line-height:1;
  letter-spacing:.07em;
  white-space:nowrap;
}
.moca-hero .moca-hero__badge::after {
  content:"";
  position:absolute;
  inset:0;
  border:1.6px solid #ffda31;
  border-radius:inherit;
  transform:translate(3px,3px);
  z-index:-1;
  pointer-events:none;
}
.moca-hero .moca-hero__badge i { flex:0 0 8px; }

/* Tipografia: o destaque amarelo acompanha a frase quando ha espaco.
   A quebra em telas menores acontece naturalmente, sem inserir <br>. */
.moca-hero .moca-hero__copy h2 {
  font-size:clamp(36px,4.3vw,64px);
  line-height:1.08;
  letter-spacing:-.048em;
  max-width:100%;
  text-wrap:balance;
}
.moca-hero .moca-hero__copy h2 em { display:inline; }
.moca-hero .moca-hero__description {
  font-size:clamp(15px,1.45vw,19px);
  line-height:1.48;
  max-width:560px;
}
.moca-hero .moca-hero__price { font-size:15px; line-height:1.4; }
.moca-hero .moca-hero__price strong { font-size:30px; }
.moca-hero .moca-hero__ctas a { font-size:15px; }

@media (max-width:767px) {
  .moca-hero .moca-hero__copy h2 {
    font-size:clamp(29px,7.8vw,39px);
    line-height:1.08;
    letter-spacing:-.045em;
    margin:14px 0 12px;
    text-wrap:pretty;
  }
  .moca-hero .moca-hero__badge {
    font-size:11px;
    height:34px;
    padding:0 12px;
    gap:8px;
    border-radius:10px;
  }
  .moca-hero .moca-hero__badge i { width:7px; height:7px; flex-basis:7px; }
  .moca-hero .moca-hero__description { font-size:14px; line-height:1.5; max-width:100%; }
  .moca-hero .moca-hero__price { font-size:13px; margin:16px 0 16px; }
  .moca-hero .moca-hero__price strong { font-size:23px; }
  .moca-hero .moca-hero__ctas { gap:8px; }
  .moca-hero .moca-hero__ctas a { font-size:13px; min-height:45px; padding:0 15px; border-radius:10px; }
}

/* V173 — Mobile: reserva espaço real para o contorno deslocado do badge
   e mantém a órbita inteira mesmo quando o texto ocupa mais linhas. */
@media (max-width:767px) {
  .moca-hero .moca-hero__copy {
    padding-top:12px;
    padding-left:4px;
    padding-right:4px;
  }
  .moca-hero .moca-hero__badge {
    margin:0 4px 4px 0;
    max-width:calc(100% - 7px);
    flex-shrink:0;
  }
}

/* Mobile: o pontilhado acompanha exatamente a borda real da onda. */
@media (max-width:950px) {
  .moca-hero__floor { fill:#eaf3fd; overflow:visible; }
  .moca-hero__floor-stitch { fill:none; stroke:#8db8e2; stroke-width:2; stroke-dasharray:1 7; stroke-linecap:round; vector-effect:non-scaling-stroke; }
}
@media (min-width:951px) { .moca-hero__floor-stitch { display:none; } }

/* V175 — a costura fica logo ABAIXO da onda, e não sobre sua borda.
   É o único traçado de transição no mobile. */
@media (max-width:950px) {
  .moca-hero .moca-hero__floor-stitch {
    transform:translateY(13px);
    stroke:#8db8e2;
    stroke-width:2;
    opacity:.85;
  }
}

/* Pix: manter o preenchimento original do simbolo, sem traco de contorno. */
.moca-promo__icon--pix svg{fill:currentColor!important;stroke:none!important;stroke-width:0!important}
.moca-promo__icon--pix svg path{fill:currentColor!important;stroke:none!important}

/* Performance etapa 4 — reserva de espaco mobile para o hero antes do JS.
   O slide ativo passa de absolute para relative quando montado. Sem uma
   altura reservada, a textura e as secoes seguintes saltam na primeira pintura.
   O min-height nao impede que textos maiores aumentem a altura naturalmente. */
@media (max-width:767px) {
  .moca-hero__slides { min-height:840px; }
}

/* Etapa 15 — area de toque da faixa promocional mobile (WCAG 2.5.8). */
@media (max-width:767px) {
  .moca-promo__inner.moca-promo__inner--slider { min-height:48px; }
  .moca-promo__inner.moca-promo__inner--slider > a {
    box-sizing:border-box;
    min-height:44px;
    padding:10px 8px;
  }
}

/* Paleta visual por slide: aplicada somente ao Hero e tarja, nunca aos palanques. */
.moca-hero {color:var(--moca-palette-text,#fff)}
.moca-hero .moca-hero__copy h2,.moca-hero .moca-hero__price strong {color:var(--moca-palette-text,#fff)}
.moca-hero .moca-hero__copy h2 em {color:var(--moca-palette-accent,#ffda31)}
.moca-hero .moca-hero__description,.moca-hero .moca-hero__price {color:var(--moca-palette-muted,#d5e5f7)}
.moca-hero .moca-hero__badge {color:var(--moca-palette-text,#fff);background:var(--moca-palette-badge-bg,rgba(255,255,255,.14))}
.moca-hero .moca-hero__badge::after {border-color:var(--moca-palette-accent,#ffda31)}
.moca-hero .moca-hero__badge i {background:var(--moca-palette-accent,#ffda31)}
.moca-hero .moca-hero__buy {background:var(--moca-palette-button-bg,#ffda31);color:var(--moca-palette-button-text,#082847)}
.moca-hero .moca-hero__buy:hover {background:var(--moca-palette-button-hover,#ffe568);color:var(--moca-palette-button-text,#082847)}
.moca-hero .moca-hero__secondary {color:var(--moca-palette-secondary-text,#fff);border-color:var(--moca-palette-secondary-border,#9fb4cd)}
.moca-hero .moca-hero__secondary:hover {background:var(--moca-palette-secondary-hover,rgba(255,255,255,.1))}
.moca-hero .moca-hero__sparkle {color:var(--moca-palette-svg,#ffda31)}
.moca-hero .moca-hero__orbit {border-color:var(--moca-palette-orbit,rgba(255,255,255,.28))}
.moca-hero .moca-hero__orbit::after {background:var(--moca-palette-svg,#ffda31)}
.moca-hero .moca-hero__counter,.moca-hero .moca-hero__controls {color:var(--moca-palette-controls-text,#fff)}
.moca-hero .moca-hero__controls button {color:var(--moca-palette-controls-text,#fff);border-color:var(--moca-palette-controls-border,rgba(255,255,255,.45))}
.moca-hero .moca-hero__dots button.is-active {background:var(--moca-palette-dots,rgba(255,255,255,.45))}
body:has(.moca-hero) [data-moca-promo] {color:var(--moca-palette-promo-text,#fff)}
body:has(.moca-hero) .moca-promo a {color:var(--moca-palette-promo-text,#fff)}
body:has(.moca-hero) .moca-promo a:hover {color:var(--moca-palette-accent,#ffda31)}
body:has(.moca-hero) .moca-promo__icon {color:var(--moca-palette-promo-icon,#ffda31)}

/* Disco decorativo personalizavel por slide; sem afetar os palanques. */
.moca-hero .moca-hero__disc {background:var(--moca-palette-disc,#ffda31);box-shadow:0 0 0 18px var(--moca-palette-disc-ring,rgba(255,255,255,.09)),0 0 0 36px var(--moca-palette-disc-ring,rgba(255,255,255,.09));}

@media(max-width:767px){.moca-promo__inner{min-height:34px}.moca-promo a{font-size:11px}.moca-hero{min-height:0;padding:18px 0 75px}.moca-hero__slide{grid-template-columns:minmax(0,1fr);align-content:start}.moca-hero__floor{height:35px}}