/* ============================================================
   NexoFlow — Animações, Reveal & Breakpoints responsivos
   ============================================================ */

/* ============================================================
   Keyframes — Scroll Reveal
   ============================================================ */
@keyframes fade{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
@keyframes tab-up{
  from{opacity:0;transform:translateY(16px)}
  to  {opacity:1;transform:none}
}
@keyframes tab-slide-in{
  from{opacity:0;transform:translateX(30px) scale(.98)}
  to  {opacity:1;transform:none}
}
@keyframes tab-funnel-in{
  from{opacity:0;transform:translateX(-32px)}
  to  {opacity:1;transform:none}
}
@keyframes tab-val-pop{
  0%  {opacity:0;transform:scale(.72) translateY(8px)}
  65% {transform:scale(1.07)}
  100%{opacity:1;transform:none}
}
@keyframes ping{
  0%{transform:scale(1);opacity:.45}
  70%{transform:scale(1.5);opacity:0}
  100%{opacity:0}
}

/* ============================================================
   Keyframes — Hero page-load entrance
   ============================================================ */
@keyframes ha-fade-up{
  from{opacity:0;transform:translateY(32px)}
  to{opacity:1;transform:none}
}
@keyframes ha-fade-in{
  from{opacity:0}
  to{opacity:1}
}
@keyframes ha-slide-right{
  from{opacity:0;transform:translateX(52px) scale(.98)}
  to{opacity:1;transform:none}
}
@keyframes ha-pop{
  0%  {opacity:0;transform:scale(.8) translate(4px,4px)}
  65% {transform:scale(1.06)}
  100%{opacity:1;transform:none}
}
@keyframes ha-bar-grow{
  from{transform:scaleY(0)}
  to  {transform:scaleY(1)}
}
@keyframes ha-card-in{
  from{opacity:0;transform:translateY(16px)}
  to  {opacity:1;transform:none}
}
@keyframes ha-donut-spin{
  from{transform:rotate(-90deg) scale(.7);opacity:0}
  to  {transform:rotate(0deg) scale(1);opacity:1}
}
@keyframes ha-blob{
  0%,100%{transform:translateY(0) scale(1)}
  50%    {transform:translateY(-22px) scale(1.05)}
}
@keyframes ha-header{
  from{opacity:0;transform:translateY(-20px)}
  to  {opacity:1;transform:none}
}

/* ============================================================
   Header — desliza de cima na carga (sempre visível, dispara 1x)
   ============================================================ */
.site-header{animation:ha-header .5s cubic-bezier(.2,.7,.3,1) both}

/* ============================================================
   Blobs — flutuação contínua (CSS animation, não IntersectionObserver)
   ============================================================ */
.hero .blob.b1{animation:ha-blob  9s ease-in-out infinite}
.hero .blob.b2{animation:ha-blob 12s ease-in-out 2.5s infinite}

/* ============================================================
   Hero-A: direção de reveal por coluna
   (triggered pelo IntersectionObserver ao entrar no viewport)
   ============================================================ */

/* Coluna da esquerda: fade-up (padrão --rv) */
/* Coluna da direita: desliza da direita */
.hero-a .hero-grid > div:last-child.reveal{
  --rv: translateX(52px) scale(.98);
}

/* ---- Sub-animações do dashboard (ativadas quando o pai recebe .in) ---- */

/* KPIs: surgem de baixo em cascata */
.hero-a .kpi{
  opacity:0; transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.2,.7,.3,1),
             transform .5s cubic-bezier(.2,.7,.3,1);
}
.hero-a .reveal.in .kpi             { opacity:1; transform:none }
.hero-a .reveal.in .kpi:nth-child(1){ transition-delay:.20s }
.hero-a .reveal.in .kpi:nth-child(2){ transition-delay:.31s }
.hero-a .reveal.in .kpi:nth-child(3){ transition-delay:.42s }

/* Barras do gráfico: crescem do fundo */
.hero-a .bars .bar{
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .42s cubic-bezier(.2,.7,.3,1);
}
.hero-a .reveal.in .bars .bar            { transform:scaleY(1) }
.hero-a .reveal.in .bars .bar:nth-child(1){ transition-delay:.38s }
.hero-a .reveal.in .bars .bar:nth-child(2){ transition-delay:.45s }
.hero-a .reveal.in .bars .bar:nth-child(3){ transition-delay:.52s }
.hero-a .reveal.in .bars .bar:nth-child(4){ transition-delay:.59s }
.hero-a .reveal.in .bars .bar:nth-child(5){ transition-delay:.66s }
.hero-a .reveal.in .bars .bar:nth-child(6){ transition-delay:.73s }

/* Donut: escala e aparece */
.hero-a .donut{
  opacity:0; transform:scale(.65);
  transition:opacity .55s .48s cubic-bezier(.2,.7,.3,1),
             transform .55s .48s cubic-bezier(.2,.7,.3,1);
}
.hero-a .reveal.in .donut{ opacity:1; transform:none }

/* Float cards: pop com bounce */
.hero-a .float-card{
  opacity:0; transform:scale(.78) translateY(8px);
  transition:opacity .42s cubic-bezier(.3,1.15,.4,1),
             transform .42s cubic-bezier(.3,1.15,.4,1);
}
.hero-a .reveal.in .float-card:nth-child(2){ opacity:1; transform:none; transition-delay:.52s }
.hero-a .reveal.in .float-card:nth-child(3){ opacity:1; transform:none; transition-delay:.72s }

/* ============================================================
   Scroll Reveal — base usa custom prop para transform,
   cada seção redefine --rv sem tocar no HTML.
   ============================================================ */
.reveal{
  --rv: translateY(28px);          /* default: sobe */
  opacity:0;
  transform:var(--rv);
  transition:opacity .72s cubic-bezier(.2,.7,.3,1),
             transform .72s cubic-bezier(.2,.7,.3,1);
}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.09s}
.reveal.d2{transition-delay:.18s}
.reveal.d3{transition-delay:.27s}

/* ============================================================
   Animações por seção — redefinição de --rv e extras
   ============================================================ */

/* HIGHLIGHTS: cartões crescem do centro */
.hl-card.reveal{
  --rv: scale(.93) translateY(20px);
}

/* ABOUT: coluna de texto vem da esquerda, visual da direita */
.about-grid > div:first-child .reveal{
  --rv: translateX(-48px);
}
.about-visual.reveal{
  --rv: translateX(48px);
}

/* FEATURES: cartões escalam do fundo */
.feature.reveal{
  --rv: scale(.95) translateY(18px);
}

/* MÓDULOS: abas deslizam da esquerda */
.tabs.reveal{
  --rv: translateX(-36px);
}

/* BENEFÍCIOS: banda inteira cresce de dentro */
.benefits-band.reveal{
  --rv: scale(.96) translateY(24px);
}

/* PRICING: cartões escalam; featured fica maior */
.plan.reveal{
  --rv: scale(.93) translateY(20px);
}
.plan.featured.reveal{
  --rv: scale(.96) translateY(16px);
}

/* CASOS DE USO: flip sutil vindo de baixo */
.usecase.reveal{
  --rv: perspective(700px) rotateX(9deg) translateY(18px);
  transform-origin: top center;
}

/* BLOG — cartões de post escalam */
.post.reveal{
  --rv: scale(.95) translateY(16px);
}

/* BLOG destaque (blog-feature) vem da esquerda */
.blog-feature.reveal{
  --rv: translateX(-40px);
}

/* CTA BAND: escala do centro */
.cta-band.reveal{
  --rv: scale(.96) translateY(22px);
}

/* CONTATO: texto da esquerda, formulário da direita */
.contact-grid > div:first-child .reveal{
  --rv: translateX(-48px);
}
.form-card.reveal{
  --rv: translateX(48px);
}

/* TABELA DE PREÇOS */
.ptable-wrap.reveal{
  --rv: scale(.97) translateY(20px);
}

/* ============================================================
   Delays adicionais para cascata mais expressiva
   ============================================================ */
.reveal.d4{transition-delay:.36s}
.reveal.d5{transition-delay:.45s}

/* Highlights: cada card entra mais tarde que o anterior */
.highlights .hl-card.reveal{transition-duration:.65s}
.highlights .hl-card.reveal.d1{transition-delay:.12s}
.highlights .hl-card.reveal.d2{transition-delay:.24s}

/* Features: atraso escalonado mais generoso */
.features .feature.reveal.d1{transition-delay:.13s}
.features .feature.reveal.d2{transition-delay:.26s}

/* Use cases: atraso escalonado */
.usecases .usecase.reveal.d1{transition-delay:.14s}
.usecases .usecase.reveal.d2{transition-delay:.28s}

/* Plan cards: atraso natural */
.plan-grid .plan.reveal.d1{transition-delay:.14s}
.plan-grid .plan.reveal.d2{transition-delay:.28s}

/* Blog posts */
.blog-grid .post.reveal.d1{transition-delay:.12s}
.blog-grid .post.reveal.d2{transition-delay:.24s}

/* ============================================================
   Benefícios — números grandes, títulos e parágrafos
   animam via transition ativada pelo pai recebendo .in
   ============================================================ */
.benefit .big,
.benefit h4,
.benefit p{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .65s cubic-bezier(.2,.7,.3,1),
             transform .65s cubic-bezier(.2,.7,.3,1);
}
/* Ativa quando benefits-band recebe .in */
.benefits-band.in .benefit .big,
.benefits-band.in .benefit h4,
.benefits-band.in .benefit p{opacity:1;transform:none}

.benefits-band.in .benefit:nth-child(1) .big{transition-delay:.10s}
.benefits-band.in .benefit:nth-child(2) .big{transition-delay:.24s}
.benefits-band.in .benefit:nth-child(3) .big{transition-delay:.38s}
.benefits-band.in .benefit:nth-child(1) h4 {transition-delay:.18s}
.benefits-band.in .benefit:nth-child(2) h4 {transition-delay:.32s}
.benefits-band.in .benefit:nth-child(3) h4 {transition-delay:.46s}
.benefits-band.in .benefit:nth-child(1) p  {transition-delay:.24s}
.benefits-band.in .benefit:nth-child(2) p  {transition-delay:.38s}
.benefits-band.in .benefit:nth-child(3) p  {transition-delay:.52s}

/* ============================================================
   About — story-card anima separadamente dentro da coluna
   ============================================================ */
.story-card{
  opacity:0;
  transform:scale(.96) translateY(16px);
  transition:opacity .7s .20s cubic-bezier(.2,.7,.3,1),
             transform .7s .20s cubic-bezier(.2,.7,.3,1);
}
.about-visual.reveal.in .story-card{opacity:1;transform:none}

/* Stats dentro do story-card */
.story-stats .ss{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1);
}
.about-visual.reveal.in .story-stats .ss:nth-child(1){opacity:1;transform:none;transition-delay:.38s}
.about-visual.reveal.in .story-stats .ss:nth-child(2){opacity:1;transform:none;transition-delay:.48s}
.about-visual.reveal.in .story-stats .ss:nth-child(3){opacity:1;transform:none;transition-delay:.58s}
.about-visual.reveal.in .story-stats .ss:nth-child(4){opacity:1;transform:none;transition-delay:.68s}

/* Eyebrows em seção escura (benefits, cta-band) mantêm fade-up */
.benefits-band .eyebrow,
.cta-band .eyebrow{
  display:inline-flex;
}

/* Respeita preferência do usuário por movimento reduzido */
@media(prefers-reduced-motion:reduce){
  /* Revela tudo imediatamente */
  .reveal{opacity:1;transform:none;transition:none}
  /* Para sub-elementos com transições próprias */
  .hero-a .kpi,
  .hero-a .bars .bar,
  .hero-a .donut,
  .hero-a .float-card,
  .benefit .big,.benefit h4,.benefit p,
  .story-card,.story-stats .ss{
    opacity:1!important;transform:none!important;transition:none!important;
  }
  /* Animações dos tabs — conteúdo e visuais */
  .tab-panel.active .m-eyebrow,
  .tab-panel.active .module-card h3,
  .tab-panel.active .m-desc,
  .tab-panel.active .m-list li,
  .tab-panel.active .module-visual,
  .tab-panel.active .mini-card,
  .tab-panel.active .mc-val,
  .tab-panel.active .bars .bar,
  .tab-panel.active .kanban .col,
  .tab-panel.active .kanban .col .tk,
  .tab-panel.active .funnel .fr{
    animation:none!important;opacity:1!important;transform:none!important;
  }
  /* Para CSS animations */
  .site-header,.wa-btn .ping,.hero .blob{animation:none!important}
  *{transition-duration:.01ms!important}
}

/* ---------- Responsivo ---------- */
@media(max-width:980px){
  :root{ --gut: 20px }
  .nav-links{display:none}
  .nav-toggle{display:block;margin-left:auto}
  /* Mobile header: mostra só logo + lang-switch + hamburger */
  .nav-cta .btn-outline{display:none}
  .nav-cta .btn-cta{display:none}
  .hero-a .hero-grid,.hero-c .hero-grid,.about-grid,
  .module-card,.contact-grid,.blog-feature{grid-template-columns:1fr;gap:40px}
  .highlights,.benefits-grid,.usecases,.plan-grid,.blog-grid,.features{grid-template-columns:1fr}
  .hero-c .hero-base{flex-direction:column;align-items:flex-start}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .benefits-band,.cta-band,.module-card{padding:40px 24px}
  .ptable-wrap{overflow-x:auto}
  .ptable{min-width:680px}
  .float-card{display:none}

  /* Dashboard hero: oculta sidebar azul e corrige grid interno */
  .dash-side{display:none}
  .dash-body{grid-template-columns:1fr;min-height:auto}
  .dash-charts{grid-template-columns:1fr}
  .kpi .val{font-size:18px}
  .kpi .lab{font-size:10px}
  .bars{height:80px}

  /* Em mobile, translateX pode causar overflow horizontal —
     troca por translateY para todos os reveals direcionais */
  .about-grid > div:first-child .reveal,
  .about-visual.reveal,
  .contact-grid > div:first-child .reveal,
  .form-card.reveal,
  .blog-feature.reveal,
  .hero-a .hero-grid > div:last-child.reveal{ --rv: translateY(28px) }
}
@media(max-width:768px){
  :root{ --gut: 18px }
  .section{ padding:80px 0 }
  .section-title{ font-size:clamp(26px,6vw,38px) }
  .plan-grid{ grid-template-columns:1fr }
}
@media(max-width:560px){
  :root{ --gut: 16px }
  .section{ padding:64px 0 }
  .section-tight{ padding:52px 0 }
  .form-row{ grid-template-columns:1fr }
  .footer-grid{ grid-template-columns:1fr }
  .benefits-band,.cta-band{ padding:36px 20px }
  .module-card{ padding:28px 20px }
  .story-card{ padding:28px 22px }
  .form-card{ padding:26px 20px }

  /* Dashboard: oculta no mobile pequeno — texto e CTA têm prioridade */
  .hero-a .hero-grid > div:last-child{display:none}

  /* Botões do hero empilhados e full-width */
  .hero-a .hero-actions{flex-direction:column;align-items:stretch}
  .hero-a .hero-actions .btn{width:100%;text-align:center;justify-content:center}

  /* Garante que hero-sub não excede container */
  .hero-sub{max-width:100%}

  /* Tabs: botões compactos no mobile */
  .tabs{gap:4px}
  .tab{padding:8px 12px;font-size:13.5px}
  .tab .ti{display:none}
}