/* ============================================================
   PRAXIS HERO SYSTEM - taxonomia de heros + ritmo + count-up
   costandprofitability.com - FABLE, 06 Jul 2026
   Enfileirar DEPOIS de praxis-heroart.css (ultimo CSS praxis).
   Nao substitui nada: afina os wrappers existentes por template.
   Guardrails: hero instantaneo (compativel com cnp-hero-visible),
   reduced-motion, nunca azul, sem em-dash.
   ============================================================ */

/* ============================================================
   1. TAXONOMIA (mapa template -> variante; Cowork aplica as
      classes via mu-plugin por path/selector)

   TIER A  Pilar/Expertise  .hero-dark      = heroart dark (ja e o padrao)
   TIER B  Hub              .hub-hero       + .heroart.arc
           Insights hub     .hero-insights  + .heroart.eq
           About            .hero-about     + .heroart.eq  (aplicado)
   TIER C  Industria        .ph-hero        + .heroart.bars
           Work with us     .wwu-hero       + .heroart.bars (aplicado)
   TIER D  Produto          .pv-hero        + .heroart.eq
   PROPRIO Home (scrolly), Regionais (.cc-pf .pf-hero), Eventos (.ev-hero dark)
   ============================================================ */

/* ---------- 2. acolhimento da hero art nos wrappers claros ----------
   Todos os heros claros ganham o mesmo contrato quando recebem .heroart:
   conteudo acima da arte, arte presa ao fundo, sem esticar a dobra. */
.hub-hero.heroart, .ph-hero.heroart, .pv-hero.heroart,
.hero-insights.heroart, .hero-about.heroart, .wwu-hero.heroart{
  position:relative; overflow:hidden;
}
.hub-hero.heroart::before, .ph-hero.heroart::before, .pv-hero.heroart::before,
.hero-insights.heroart::before, .hero-about.heroart::before, .wwu-hero.heroart::before{
  background-position:center bottom;
}
/* nos claros a arte esmorece no topo para o header nao lutar com ela */
.hub-hero.heroart::before, .ph-hero.heroart::before, .pv-hero.heroart::before,
.hero-insights.heroart::before{
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 32%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 32%);
}

/* ---------- 3. entrada de hero (substitui o .reveal no hero) ----------
   O conteudo do hero e VISIVEL desde o primeiro frame (cnp-hero-visible
   garante isso). Esta entrada e um rise curtissimo, so transform,
   opacity nunca abaixo de 1: zero flash, zero CLS de leitura.
   Markup: adicionar .hero-enter ao wrapper do hero; nada por elemento. */
@media (prefers-reduced-motion: no-preference){
  .hero-enter h1{ animation:heroRise 480ms var(--me-out, cubic-bezier(.22,.61,.36,1)) both; }
  .hero-enter .lede{ animation:heroRise 480ms var(--me-out, cubic-bezier(.22,.61,.36,1)) 90ms both; }
  .hero-enter .herocta, .hero-enter .hero-cta-pair{ animation:heroRise 480ms var(--me-out, cubic-bezier(.22,.61,.36,1)) 170ms both; }
  @keyframes heroRise{ from{ transform:translateY(10px); } to{ transform:none; } }
}
/* IMPORTANTE (Cowork): dentro dos wrappers de hero, REMOVER .reveal do
   eyebrow/H1/lede/CTA e usar .hero-enter no wrapper. O mu-plugin
   cnp-hero-visible.php pode manter-se como cinto de seguranca. */

/* ---------- 4. par de CTA no hero (todos os tiers) ----------
   Contrato unico: um par primario + secundario, gap 12, wrap. */
.hero-cta-pair{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; align-items:center; }
.hero-cta-pair .btn-ghost{ opacity:.92; }
/* em palco escuro o ghost precisa de contorno claro */
.hero-dark .hero-cta-pair .btn-ghost, .heroart.dark .hero-cta-pair .btn-ghost,
.ev-hero .hero-cta-pair .btn-ghost{
  border-color:rgba(243,238,228,.35); color:var(--paper, #F3EEE4);
}
.hero-dark .hero-cta-pair .btn-ghost:hover, .heroart.dark .hero-cta-pair .btn-ghost:hover,
.ev-hero .hero-cta-pair .btn-ghost:hover{ border-color:var(--orange-bright, #E2761A); color:var(--orange-bright, #E2761A); }

/* ---------- 5. ritmo vertical por tipo de seccao ----------
   A escala do praxis-type (--sp-*) aplicada a tres densidades.
   Resolve as folgas ~200px: stats colam-se a seccao anterior. */
.sec-rhythm{ padding-block:var(--sp-6, 96px); }              /* seccao standard */
.sec-rhythm.tight{ padding-block:var(--sp-5, 64px); }        /* seccoes de apoio, FAQ, prova */
.sec-rhythm.flush-top{ padding-block-start:var(--sp-3, 24px); } /* stats/faixas logo apos hero ou seccao-mae */
.sec-rhythm.hero{ padding-block:var(--sec-pad-hero, clamp(64px,9vh,112px)) var(--sp-5, 64px); }
/* faixa de estatisticas: SEMPRE flush-top + fio superior subtil */
.stat-band{ padding-block:var(--sp-4, 40px); border-top:1px solid var(--line, #E5DFD1); }
.stat-band + .sec-rhythm{ padding-block-start:var(--sp-5, 64px); }

/* ---------- 6. count-up: estilos de apoio ----------
   Regras de aplicacao no MAPA (que numeros, formatos, ranges).
   Aqui so o contrato visual: tabular nums e o sufixo mono. */
.countup{ font-variant-numeric:tabular-nums; }
.stat-range{ font-variant-numeric:tabular-nums; } /* ranges NAO levam count-up */

/* ---------- 7. moeda: padrao unico ----------
   Padrao do site: EUR prefixado com o simbolo, espaco fino, sem "EUR" por
   extenso em numeros (so em texto corrido). Ex.: €1,3M / €150k.
   (Regra editorial; a classe so garante os algarismos tabulares.) */
.eur{ font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---------- 8. mobile ----------
   H1 do hero e grelhas de stats abaixo de 400px. */
@media(max-width:400px){
  .tp h1, .tp-h1{ font-size:clamp(30px, 9.5vw, 36px); }
  .hero-cta-pair .btn{ width:100%; justify-content:center; }
  .stat-band [class*="grid"], .statgrid{ grid-template-columns:1fr !important; }
}