/* ════════════════════════════════════════════════════════════════════════
   CNP-RITMO-HERO.CSS - Harmonização do ritmo vertical + tratamento de hero
   costandprofitability.com · 30 jun 2026 · Praxis · Never blue

   PORQUÊ
   Cada template foi construído com a sua própria escala de espaçamento
   vertical (42–84px) e dois tratamentos de hero diferentes (faixa escura vs
   contido sobre papel). Este ficheiro impõe UMA escala e UMA regra de hero a
   todos os templates, sem tocar na largura/rail (já corrigido) nem no conteúdo.

   COMO USAR
   Enqueue UMA vez, GLOBALMENTE, e por ÚLTIMO (depois de site.css, cnp-praxis.css
   e de qualquer CSS de cluster: industry-pages, it-pages, glossary, guide,
   profile, cnpnp). É puramente aditivo e idempotente - remover o ficheiro
   reverte tudo. Usa !important só para garantir a vitória independentemente da
   ordem de enqueue; não altera especificidade de mais nada.

   O QUE TOCA  →  só padding/margin VERTICAL + cor/fundo do hero.
   O QUE NÃO TOCA  →  rail horizontal, max-width, conteúdo, estrutura, classes.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Escala canónica de ritmo vertical ─────────────────────────────────
   Fluida: respira em ecrãs largos (≈96px), fecha em mobile (≈64px). Substitui
   as escalas divergentes por uma só. Herdada por todos os scopes via :root. */
:root{
  --sec-y:    clamp(64px, 7vw, 96px);   /* padding padrão ENTRE secções       */
  --sec-y-sm: clamp(48px, 5vw, 68px);   /* secção mais curta (answer, related) */
  --hero-y:   clamp(56px, 6vw, 92px);   /* respiração do topo do hero          */
}

/* ─── 2. Ritmo aplicado a cada template ────────────────────────────────────
   Base / Home / How-we-work / Métodos / Indústrias / Newpages - usam .sec     */
.sec    { padding-top: var(--sec-y)    !important; padding-bottom: var(--sec-y)    !important; }
.sec-sm { padding-top: var(--sec-y-sm) !important; padding-bottom: var(--sec-y-sm) !important; }

/* Hero de referência (Indústrias / IT / Newpages) - contido sobre papel.
   Só ajusta a respiração do topo ao token; horizontal e fundo intactos.       */
.ph-hero        { padding-top: var(--hero-y) !important; }
.cnpnp .ph-hero { padding-top: var(--hero-y) !important; }

/* Fecho de página (endcta) - alinhar ao mesmo ritmo                           */
.endcta         { padding-top: var(--sec-y) !important; }
.cnpnp .endcta  { padding-top: var(--sec-y) !important; }

/* Glossário (.cc-gloss) - secções e corpo ao ritmo canónico                   */
.cc-gloss .g-body    { margin-top:    var(--sec-y-sm) !important; }
.cc-gloss .g-section { margin-bottom: var(--sec-y)    !important; }

/* Guia (.cc-guide) - divisória entre secções ao ritmo canónico                */
.cc-guide .gd-section { margin-top: 0 !important; padding-top: var(--sec-y) !important; }
.cc-guide .gd-section:first-of-type { padding-top: 0 !important; }

/* Regional / Perfis de método (.cc-pf)                                        */
.cc-pf .pf-sec { padding-top: var(--sec-y) !important; padding-bottom: var(--sec-y) !important; }

/* ─── 3. Regra única de hero: CONTIDO SOBRE PAPEL, dentro do rail ───────────
   Como a how-we-work / indústrias. Converte as três faixas escuras
   (glossário, guia, regional) para o mesmo tratamento editorial sobre papel:
   sem fundo escuro, sem cartão, sem glow, texto em tinta, eyebrow laranja.
   Cores literais da paleta Praxis (robusto a qualquer scope).                 */

/* fundo + caixa: neutralizar a faixa escura */
.cc-gloss .g-hero,
.cc-guide .gd-hero,
.cc-pf   .pf-hero{
  background: transparent !important;
  color: #1A1714 !important;            /* --ink */
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-top: var(--hero-y) !important;
  padding-bottom: 12px !important;
  padding-left: 0 !important;           /* alinhar o hero ao rail (não é o rail */
  padding-right: 0 !important;          /*  - o rail vive no wrapper exterior)  */
}
/* remover o halo radial laranja dos heroes escuros */
.cc-gloss .g-hero::after,
.cc-guide .gd-hero::after,
.cc-pf   .pf-hero::after{ display: none !important; }

/* eyebrow → laranja sobre papel (era laranja-claro sobre escuro) */
.cc-gloss .g-eyebrow,
.cc-guide .gd-eyebrow,
.cc-pf   .pf-eyebrow{ color: #C75B22 !important; }       /* --orange */
.cc-gloss .g-eyebrow::before,
.cc-guide .gd-eyebrow::before,
.cc-pf   .pf-eyebrow::before{ background: #C75B22 !important; }

/* lede / parágrafos do hero → tinta secundária (era claro sobre escuro) */
.cc-gloss .g-hero p,
.cc-guide .gd-lede,
.cc-pf   .pf-lede{ color: #4A4138 !important; }          /* --ink2 */
.cc-pf .pf-lede + .pf-lede{ color: #756859 !important; } /* --muted */

/* meta mono do hero → muted; ênfases → tinta */
.cc-gloss .g-hero .g-meta,
.cc-guide .gd-herometa{ color: #756859 !important; }     /* --muted */
.cc-gloss .g-hero .g-meta b,
.cc-guide .gd-herometa b{ color: #1A1714 !important; }   /* --ink */

/* Regional: a "answer box" escura deixava de sobrepor a faixa (margin -28px).
   Sobre papel, assenta-a em fluxo normal, logo abaixo do hero. */
.cc-pf .pf-answer{ margin-top: 16px !important; }

/* (h1 e os <em> laranja do hero mantêm-se - leem perfeitamente sobre papel.) */


/* --- 4. Regional (.cc-pf): alinhar a coluna ao rail do site (era 1000px) --- */
/* O .pf-wrap usava max-width:1000px centrado (conteudo ~176-246px), nao o rail
   do site (1240 + 40px = conteudo a 96px). Alinhar para uniformidade total. */
.cc-pf .pf-wrap{ max-width:1240px !important; padding-left:40px !important; padding-right:40px !important; }
@media(max-width:1080px){ .cc-pf .pf-wrap{ padding-left:20px !important; padding-right:20px !important; } }
@media(max-width:480px){ .cc-pf .pf-wrap{ padding-left:16px !important; padding-right:16px !important; } }