/* Fixes v34 — visual bugs found by scrolling the live site at 390 / 768 / 1024 / 1440.
   Loaded last; each block names the bug it fixes. */

/* 1. "Possibilidades": the legacy 100svh pin centred a bento taller than the screen, so the
      heading overflowed ~150px upwards under the calculator. motion-v31 animates these cards
      now, so the section flows normally. */
body.motion-v31-ready .lift-section{height:auto!important;padding:96px 0 88px!important}
body.motion-v31-ready .lift-pin{position:relative!important;top:auto!important;height:auto!important;min-height:0!important;display:block!important;overflow:visible!important;padding:0!important}

/* 2. Tablet portrait: the 6-column bento left 1/3-width cards with one word per line. */
@media (min-width:768px) and (max-width:1023px){
  body.techflux-on .lift-card.tf-lead{grid-column:span 6!important}
  body.techflux-on .lift-card:not(.tf-lead){grid-column:span 3!important}
  body.techflux-on .lift-cards .tf-data-cell,body.techflux-on .lift-cards .tf-data-cell.tf-wide{grid-column:span 2!important}
}

/* 3. Big word bands: any tilt pivots on the centre of a track thousands of pixels wide, so the
      visible part sank 30–40px and the words were cut by the bottom edge. The band stays level,
      with the words centred vertically. */
.motion-marquee{position:relative;z-index:1;display:flex;align-items:center;padding:26px 0;overflow:hidden}
.motion-marquee-track{transform:none;line-height:1.15;will-change:transform}
@media (max-width:767px){.motion-marquee{padding:18px 0}}
/* 3b. The bands run on their own like a ticker. The scroll-driven offset jumped back every 600px and
      added scroll speed, which read as shaking. The track holds the phrase an even number of times,
      so moving it by -50% loops with no visible seam. The band before "Frentes" runs the other way. */
body.motion-v31-on .motion-marquee-track{animation:marquee-run 42s linear infinite}
body.motion-v31-on .motion-marquee:has(+ #frentes) .motion-marquee-track{animation-direction:reverse}
@keyframes marquee-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (max-width:767px){body.motion-v31-on .motion-marquee-track{animation-duration:30s}}
@media (prefers-reduced-motion:reduce){.motion-marquee-track{animation:none!important}}
body.no-motion .motion-marquee-track{animation:none!important}

/* 4. Companies: on a 4-column grid David's card spanned two rows over a one-row embed and left
      an empty box (stretching the embed only showed Instagram's white padding). Three columns
      fit five profiles exactly: David (2 cols) + Actus, then Atacado, Store and Moda. */
@media (min-width:900px){
  #instagram .social-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:start}
  #instagram .instagram-account.is-featured{grid-column:span 2!important;grid-row:auto!important}
}
@media (min-width:768px) and (max-width:899px){
  #instagram .instagram-account.is-featured{grid-row:auto!important}
}

/* 5. "Seu preço" folded: the open-section spacing stayed, leaving a dark gap. */
#precificacao.pricing-fold:has(#pricing-panel[hidden]){padding-top:72px;padding-bottom:56px}

/* 6. The 3D crystal sat right behind "O próximo nível começa com uma decisão" on narrow
      screens; lift it above the heading and soften it so the text always reads first. */
@media (max-width:900px){
  #perspectiva .crystal-v27{top:-16%;right:-12%;width:78%;height:78%;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent);mask-image:radial-gradient(closest-side,#000 62%,transparent)}
  #perspectiva .crystal-v27.is-live{opacity:.42}
}
@media (max-width:767px){
  #perspectiva .crystal-v27{top:-22%;right:-18%;width:96%;height:70%}
  #perspectiva .crystal-v27.is-live{opacity:.3}
}

/* 7. Phone: stacked sticky cards in "Frentes" read as text on top of text; list them. */
@media (max-width:767px){
  body.motion-v31-on .expertise-card{position:relative!important;top:auto!important}
}
/* Tablet/desktop keep the stack, but a covered card dims so the overlap reads as depth. */
.expertise-card>*{transition:opacity .2s linear}
body.motion-v31-on .expertise-card>*{opacity:calc(1 - var(--stack-dim,0) * .75)}

/* 8. Phone hero: the effect/music buttons sat on top of "Comece pelo que está travando você"
      until the bottom dock appeared; they now arrive with the dock. */
@media (max-width:767px){
  html:not(.adv-docked) .experience-controls{transform:translateY(170%);pointer-events:none}
}