/* Camada de modernização (referência: Dayos / refero "AI for Business").
   Carregada depois de style.css; remover este arquivo devolve o visual anterior.
   Animações só rodam com html.motion (adicionada no <head> quando o visitante
   não pede movimento reduzido); sem JS, todo o conteúdo aparece normalmente. */

:root{
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --orange-ink:#c65300;
  --navy:#0d1420;
  interpolate-size:allow-keywords;
}

/* ---------- Tipografia ---------- */
body{font-family:"Archivo",Arial,Helvetica,sans-serif}
h1,h2,h3{font-stretch:90%;letter-spacing:-.025em}
h1{font-weight:800;letter-spacing:-.03em}
h3{letter-spacing:-.012em}
.button{font-stretch:95%}
.eyebrow{font-stretch:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Números em display condensado: a assinatura tipográfica do Dayos */
.brazil-grid strong,.stats strong{font-stretch:62%;font-weight:800;line-height:.9;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.brazil-grid strong{font-size:clamp(48px,4.6vw,64px);margin-bottom:14px}
.brazil-grid strong small{font-size:.4em;font-stretch:90%;font-weight:700;letter-spacing:-.01em;margin-left:.08em}
.stats strong{font-size:clamp(88px,9.4vw,136px);margin-bottom:10px}
.stats strong span{font-size:.5em;letter-spacing:0}
data.count{display:inline-block}

/* ---------- Cabeçalho: pílula flutuante ao rolar ---------- */
.site-header{max-width:none;padding:0;display:block;border-bottom:0;position:relative;z-index:30}
.site-header .nav{max-width:1244px;margin:auto;padding:25px 32px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid #e9e9e6}
.site-header.is-pinned .nav{position:fixed;top:12px;left:50%;width:min(1180px,calc(100% - 32px));transform:translateX(-50%);padding:9px 9px 9px 26px;background:rgb(255 255 255 / .95);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border:1px solid #e4e3df;border-radius:48px}
.site-header.is-pinned .brand small{display:none}
.site-header.is-pinned .official-logo{width:138px}
.site-header.is-pinned .button.small{border-radius:40px}
@media(max-width:540px){.site-header .nav{padding:20px}}

/* ---------- Faixa em letreiro contínuo ---------- */
.marquee{overflow:hidden;background:var(--paper);padding:26px 0 24px;border-block:1px solid #ecebe8}
.marquee-track{display:flex;width:max-content}
.marquee-group{display:flex;align-items:center;flex:none;gap:clamp(20px,2.6vw,40px);padding-right:clamp(20px,2.6vw,40px)}
.marquee span{font-stretch:62%;font-weight:800;font-size:clamp(34px,4.6vw,64px);line-height:.9;letter-spacing:-.005em;white-space:nowrap;color:var(--ink)}
.marquee i{font-style:normal;color:var(--orange);font-size:clamp(20px,2.4vw,34px);line-height:1}

/* ---------- Botões e links: seta que "dispara" no hover ---------- */
.button{transition:background .25s,transform .35s var(--ease)}
.arrow{display:inline-flex;overflow:hidden;line-height:1.1;vertical-align:-.08em}
.arrow>span{display:inline-block}
@keyframes arrow-swap{0%{transform:none}38%{transform:translate(115%,-115%)}38.01%{transform:translate(-115%,115%)}100%{transform:none}}
.text-link{transition:text-underline-offset .35s var(--ease),text-decoration-color .25s}
.text-link:hover{text-underline-offset:3px;text-decoration-color:var(--orange)}

/* ---------- FAQ: abre suave, ícone + vira − ---------- */
.faq summary{transition:color .2s}
.faq summary:hover{color:var(--orange-ink)}
.faq summary:after,.faq details[open] summary:after{content:'';flex:none;width:16px;height:16px;margin-top:5px;background:linear-gradient(currentColor,currentColor) center/16px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 16px no-repeat;transition:transform .45s var(--ease),background-size .45s var(--ease)}
.faq details[open] summary:after{background-size:16px 2px,2px 0;transform:rotate(180deg)}
details::details-content{block-size:0;overflow:hidden;transition:block-size .5s var(--ease),content-visibility .5s allow-discrete}
details[open]::details-content{block-size:auto}

/* ======================================================================
   Movimento (apenas com html.motion e sem preferência por movimento reduzido)
   ====================================================================== */
@media (prefers-reduced-motion:no-preference){

  /* Seta dos botões */
  .button:hover .arrow>span,.text-link:hover .arrow>span,.button:focus-visible .arrow>span,.text-link:focus-visible .arrow>span{animation:arrow-swap .55s var(--ease)}

  /* Letreiro */
  .marquee-track{animation:marquee 42s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}

  /* Títulos: palavras sobem por trás de uma máscara */
  .motion .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em 0 .14em;margin:-.06em 0 -.14em}
  .motion .wi{display:inline-block;will-change:transform}
  .motion:not(.is-loaded) h1 .wi,.motion .split:not(.is-in) .wi{transform:translateY(112%)}
  .motion.is-loaded h1 .wi{animation:word-rise 1s var(--ease) backwards;animation-delay:calc(120ms + var(--i) * 38ms)}
  .motion .split.is-in .wi{animation:word-rise .9s var(--ease) backwards;animation-delay:calc(var(--i) * 26ms)}

  /* Abertura do hero, em uma única sequência */
  .motion:not(.is-loaded) .hero-copy>:not(h1),
  .motion:not(.is-loaded) .hero-art>*,
  .motion:not(.is-loaded) .whatsapp,
  .motion:not(.is-loaded) .mobile-cta{opacity:0}
  .motion.is-loaded .hero .eyebrow{animation:rise .8s var(--ease) backwards}
  .motion.is-loaded .hero .lead{animation:rise .9s var(--ease) .5s backwards}
  .motion.is-loaded .hero .button{animation:rise .9s var(--ease) .62s backwards}
  .motion.is-loaded .hero .micro{animation:rise .9s var(--ease) .72s backwards}
  .motion.is-loaded .hero-art img{animation:curtain 1.25s var(--ease) .18s backwards,settle 1.8s var(--ease) .18s backwards}
  .motion.is-loaded .orange-frame{animation:frame-in 1.1s var(--ease) .6s backwards}
  .motion.is-loaded .floating{animation:slide-in 1s var(--ease) .95s backwards}
  .motion.is-loaded .whatsapp{animation:pop .7s var(--ease-back) 1.35s backwards}
  .motion.is-loaded .mobile-cta{animation:dock .8s var(--ease) 1.1s backwards}

  /* Grupos (cards, recursos, números): entram em cascata */
  .motion .stagger:not(.is-in)>*{opacity:0}
  .motion .stagger.is-in>*{animation:rise .9s var(--ease) backwards;animation-delay:calc(var(--i) * 90ms)}
  .motion .features.is-in>*{animation-delay:calc(var(--i) * 70ms)}
  .motion .features.is-in .feature-check{animation:pop .6s var(--ease-back) backwards;animation-delay:calc(var(--i) * 70ms + 180ms)}

  /* Linha amarela dos indicadores se desenha da esquerda para a direita */
  .motion .brazil-grid article{position:relative;border-top-color:transparent}
  .motion .brazil-grid article:before{content:'';position:absolute;top:-2px;left:0;right:0;height:2px;background:var(--yellow);transform-origin:left;transform:scaleX(0)}
  .motion .brazil-grid.is-in article:before{transform:none;transition:transform 1.2s var(--ease) calc(var(--i) * 120ms + 100ms)}

  /* Passos do diagnóstico acendem em sequência */
  .motion .steps b{position:relative}
  .motion .steps b:after{content:'';position:absolute;inset:-1px;border-radius:50%;border:2px solid var(--yellow);opacity:0;pointer-events:none}
  .motion .steps.is-in li{animation-delay:calc(var(--i) * 240ms)}
  .motion .steps.is-in b:after{animation:ring 1.2s var(--ease) both;animation-delay:calc(var(--i) * 240ms + 200ms)}

  /* Imagens: revelação tipo cortina */
  .motion .curtain:not(.is-in){clip-path:inset(100% 0 0 0)}
  .motion .curtain.is-in{animation:curtain 1.3s var(--ease) backwards}
  .motion .curtain.is-in img{animation:settle 1.8s var(--ease) backwards}
  .motion .fade:not(.is-in){opacity:0}
  .motion .fade.is-in{animation:fade 1.2s var(--ease) backwards}

  /* Vídeo cresce conforme entra na tela (scroll-driven, onde houver suporte) */
  @supports (animation-timeline:view()){
    .video-band video{animation:video-grow linear both;animation-timeline:view();animation-range:entry 0% cover 38%}
  }

  /* Pílula do cabeçalho desce ao aparecer */
  .site-header.is-pinned .nav{animation:pill-in .6s var(--ease)}
}

@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes word-rise{from{transform:translateY(112%)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes curtain{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes settle{from{transform:scale(1.12)}to{transform:none}}
@keyframes frame-in{from{opacity:0;transform:translate(-16px,16px)}to{opacity:1;transform:none}}
@keyframes slide-in{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes dock{from{opacity:0;transform:translateY(140%)}to{opacity:1;transform:none}}
@keyframes ring{0%{opacity:0;transform:none}8%{opacity:1}100%{opacity:0;transform:scale(2.1)}}
@keyframes video-grow{from{transform:scale(.86);border-radius:56px}to{transform:none;border-radius:20px}}
@keyframes pill-in{from{transform:translate(-50%,-140%)}to{transform:translateX(-50%)}}

/* Movimento reduzido: letreiro vira faixa estática centralizada */
@media (prefers-reduced-motion:reduce){
  .marquee-track{width:auto;justify-content:center}
  .marquee-group+.marquee-group,.marquee .rep{display:none}
  .marquee-group{flex-wrap:wrap;justify-content:center;padding:0 16px;row-gap:8px}
  .marquee span{font-size:clamp(24px,4vw,48px)}
  details::details-content,.faq summary:after{transition:none}
}