/* V4: camada de movimento da página, depois de tema-claro.css e hero-sequencia.css.
   Entradas das seções ao rolar (movimento.js marca os elementos com
   data-reveal e adiciona .is-in), microinterações de botão, card, FAQ e ficha.
   Tudo usa translate/scale separados de transform, para não brigar com os
   efeitos de hover que já existem em styles.css. */
:root{--ease-out:cubic-bezier(.16,.8,.24,1);interpolate-size:allow-keywords}

/* Cabeçalho: ganha sombra quando a página sai do topo. */
.header{transition:box-shadow .4s,background-color .4s}
.header.is-scrolled{box-shadow:0 12px 30px -24px #151a2280}

/* Entradas ao rolar. Só valem com a classe .js-reveal no <html>, que
   movimento.js põe quando há IntersectionObserver e movimento permitido. */
.js-reveal [data-reveal]{opacity:0;translate:0 34px;transition:opacity .9s var(--ease-out) var(--d,0s),translate 1s var(--ease-out) var(--d,0s)}
.js-reveal [data-reveal].is-in{opacity:1;translate:0 0}
.js-reveal .product-card[data-reveal]{transition:opacity .9s var(--ease-out) var(--d,0s),translate 1s var(--ease-out) var(--d,0s),transform .35s var(--ease-out),border-color .25s,box-shadow .35s}
/* A foto é descoberta por uma cortina azul que recolhe para a direita. Cortina
   e não clip-path: um alvo recortado por inteiro não conta como visível para o
   IntersectionObserver nem para o carregamento lazy da imagem. */
.js-reveal [data-reveal=wipe]{opacity:1;translate:none;overflow:hidden}
.js-reveal [data-reveal=wipe]:after{content:'';position:absolute;inset:0;z-index:2;background:var(--royal);transform-origin:right;transition:transform 1.2s cubic-bezier(.7,0,.2,1) var(--d,0s)}
.js-reveal [data-reveal=wipe].is-in:after{transform:scaleX(0)}
.js-reveal [data-reveal=wipe] img{scale:1.12;transition:scale 1.8s var(--ease-out) var(--d,0s)}
.js-reveal [data-reveal=wipe].is-in img{scale:1}
/* O marca-texto lime dos títulos se pinta da esquerda para a direita. */
.js-reveal [data-reveal] .lime{background-size:0 100%;background-repeat:no-repeat;transition:background-size .9s cubic-bezier(.6,0,.2,1) calc(var(--d,0s) + .35s)}
.js-reveal [data-reveal].is-in .lime{background-size:100% 100%}

/* Botões: a seta anda na direção dela e o clique afunda de leve. */
.button span,.text-link span,.product-button span,.header-contact span{display:inline-block;transition:transform .35s var(--ease-out)}
.button:hover span,.text-link:hover span,.product-button:hover span,.header-contact:hover span{transform:translate(3px,-3px)}
.button{transition:background-color .25s,transform .35s var(--ease-out)}
.button:active{transform:translateY(-1px) scale(.985)}
.product-button{transition:background-color .25s,color .25s,border-color .25s}

/* Cards: sobem com sombra longa e a foto aproxima devagar. */
.product-card:hover{box-shadow:0 26px 50px -30px #151a2255}
.product-image img{transition:transform .9s var(--ease-out)}
.product-image:hover img{transform:scale(1.05)}
.product-image .image-expand{transition:transform .35s var(--ease-out)}
.product-image:hover .image-expand{transform:scale(1.2)}

/* Benefícios: a linha azul do topo se desenha quando o bloco entra. */
.js-reveal .benefits-grid article{border-top-color:transparent;background:linear-gradient(var(--royal),var(--royal)) top left/0 2px no-repeat border-box;transition:opacity .9s var(--ease-out) var(--d,0s),translate 1s var(--ease-out) var(--d,0s),background-size 1.1s cubic-bezier(.7,0,.2,1) calc(var(--d,0s) + .15s)}
.js-reveal .benefits-grid article.is-in{background-size:100% 2px}

/* FAQ: abre e fecha deslizando onde o navegador permite (::details-content). */
summary span{transition:transform .35s var(--ease-out)}
summary:hover{color:var(--royal-ink)}
details::details-content{block-size:0;overflow:clip;transition:block-size .45s var(--ease-out),content-visibility .45s allow-discrete}
details[open]::details-content{block-size:auto}
details p{transition:opacity .4s,translate .45s var(--ease-out);opacity:0;translate:0 -6px}
details[open] p{opacity:1;translate:0 0}

/* Fichas e foto ampliada: entram subindo, saem descendo. */
@keyframes gb-dialog-in{from{opacity:0;translate:0 26px;scale:.97}}
@keyframes gb-dialog-out{to{opacity:0;translate:0 18px;scale:.98}}
@keyframes gb-fade-in{from{opacity:0}}
@keyframes gb-fade-out{to{opacity:0}}
dialog[open]{animation:gb-dialog-in .5s var(--ease-out)}
dialog[open]::backdrop{animation:gb-fade-in .4s ease}
dialog.closing{animation:gb-dialog-out .28s ease-in forwards}
dialog.closing::backdrop{animation:gb-fade-out .28s ease-in forwards}
.dialog-info dl>div{animation:gb-rise .6s var(--ease-out) backwards}
.dialog-info dl>div:nth-child(1){animation-delay:.12s}.dialog-info dl>div:nth-child(2){animation-delay:.16s}.dialog-info dl>div:nth-child(3){animation-delay:.2s}.dialog-info dl>div:nth-child(4){animation-delay:.24s}.dialog-info dl>div:nth-child(5){animation-delay:.28s}.dialog-info dl>div:nth-child(6){animation-delay:.32s}.dialog-info dl>div:nth-child(7){animation-delay:.36s}.dialog-info dl>div:nth-child(8){animation-delay:.4s}

/* Menu do celular: desce em vez de aparecer de uma vez. */
@keyframes gb-drop{from{opacity:0;translate:0 -10px}}
.mobile-nav:not([hidden]){animation:gb-drop .35s var(--ease-out)}

@media(prefers-reduced-motion:reduce){
  :root{interpolate-size:numeric-only}
  details p{opacity:1;translate:none}
}

/* Faixa lime em loop: duas cópias iguais lado a lado andam meia largura e
   recomeçam sem emenda. A segunda cópia é aria-hidden, então o leitor de tela
   ouve as informações uma vez só. Para no hover; movimento.js
   calcula a duração pela largura, para a velocidade ser a mesma em toda tela. */
.ticker{position:relative;display:block;overflow:hidden;padding:0;min-height:0}
.ticker-track{display:flex;width:max-content;animation:gb-ticker var(--ticker-time,70s) linear infinite}
.ticker-group{display:flex;align-items:center;flex:none;margin:0;padding:17px 0;color:inherit}
.ticker-group>span{padding:0 30px;white-space:nowrap}
.ticker-group>.ticker-star{padding:0}
@keyframes gb-ticker{to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}
@media(max-width:760px){.ticker-group{padding:14px 0}.ticker-group>span{padding:0 20px}}
@media(prefers-reduced-motion:reduce){
  .ticker-track{width:auto}
  .ticker-group{flex:1 1 auto;min-width:0;flex-wrap:wrap;justify-content:center;row-gap:6px;padding:16px 20px}
  .ticker-group>span{padding:0 14px}
  .ticker-group[aria-hidden]{display:none}
}
/* O separador da faixa é um raio em SVG (o emoji ⚡ viria colorido). */
.ticker-star{display:flex;align-items:center}
.ticker-star svg{display:block;width:auto;height:.8em}