/* ==========================================================================
   Cultura Hub page specific styles
   Layout unique to cultura-hub.html: the full-bleed manifesto sections
   (hero, essência, pilares culturais, sistema operacional, assinatura,
   mensagem final). Shared component classes (buttons, cards, header,
   footer) live in styles.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page-local tokens
   These are additional tones used only on this page's dark sections —
   not part of the strict shared brand-blue set in styles.css, so they are
   scoped here rather than added to the global token list.
   -------------------------------------------------------------------------- */
:root {
  --ch-card-bg: #0A1C45;      /* card background on navy sections */
  --ch-accent: #4D8BFF;       /* icon stroke / kicker accent on dark sections */
  --ch-body-soft: #C3CEE6;    /* muted body copy on dark cards */
  --ch-kicker-num: #6E7DA0;   /* faded section index number */
  --ch-kicker-num-mid: #9FB4E0; /* section index number on azul-mid bg */
  --ch-rule: #26375C;         /* hairline rules on navy */
  --ch-rule-mid: #38507F;     /* hairline rules on navy (kicker) */
  --ch-rule-onmid: #4D6BB5;   /* hairline rules on azul-mid bg */
  --ch-footnote: #9FB0D4;     /* footer-style muted text on dark */
}

main { padding-top: var(--header-height); }

.ch-section { padding: 104px 0; }

/* --------------------------------------------------------------------------
   Kicker row (label + section index number)
   -------------------------------------------------------------------------- */
.ch-kicker {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--ch-rule-mid);
  padding-top: 16px;
  margin-bottom: 56px;
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--branco);
}

.ch-kicker__num { color: var(--ch-kicker-num); }

.ch-section--mid .ch-kicker { border-top-color: var(--ch-rule-onmid); }
.ch-section--mid .ch-kicker__num { color: var(--ch-kicker-num-mid); }

/* --------------------------------------------------------------------------
   Hero ("Pelas pessoas.")
   -------------------------------------------------------------------------- */
.ch-hero {
  background: var(--azul-hub);
  color: var(--branco);
  padding: 132px 0 108px;
}

.ch-hero__eyebrow {
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--branco);
  margin-bottom: 40px;
}

.ch-hero__title {
  font-size: clamp(42px, 6.4vw, 88px);
  line-height: 1.0;
  letter-spacing: -0.04em;
  font-weight: var(--fw-semibold);
  margin: 0 0 56px;
  max-width: 22ch;
}

.ch-hero__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 32px 56px;
}

.ch-hero__col {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.ch-hero__col p {
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.ch-hero__col p.is-strong { font-weight: var(--fw-semibold); }

/* --------------------------------------------------------------------------
   Nossa essência (Propósito / Missão / Visão)
   -------------------------------------------------------------------------- */
.ch-essencia { background: var(--azul-navy); }

.ch-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 14px;
  align-items: stretch;
}

.ch-card {
  background: var(--ch-card-bg);
  border-radius: 28px;
  padding: 38px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ch-card svg { flex: 0 0 auto; }

.ch-card__title {
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: var(--fw-bold);
  color: var(--branco);
}

.ch-card__label {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ch-accent);
  font-weight: var(--fw-medium);
}

.ch-card__text {
  font-size: 17px;
  line-height: 1.55;
  color: var(--branco);
}

/* --------------------------------------------------------------------------
   Pilares culturais
   -------------------------------------------------------------------------- */
.ch-pilares { background: var(--azul-mid); }

.ch-pilares .ch-card-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }

.ch-pilar {
  background: var(--azul-navy);
  border-radius: 28px;
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ch-pilar--highlight {
  background: var(--azul-hub);
}

.ch-pilar svg { flex: 0 0 auto; }

.ch-pilar__title {
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: var(--fw-bold);
  color: var(--branco);
}

.ch-pilar__label {
  font-size: 16px;
  line-height: 1.45;
  font-weight: var(--fw-semibold);
  color: var(--ch-accent);
}

.ch-pilar--highlight .ch-pilar__label { color: var(--branco); }

.ch-pilar__text {
  font-size: 17px;
  line-height: 1.5;
  color: var(--branco);
}

/* --------------------------------------------------------------------------
   Sistema operacional como cultura
   -------------------------------------------------------------------------- */
.ch-sistema { background: var(--azul-navy); }

.ch-sistema__title {
  font-size: clamp(26px, 2.9vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: var(--fw-bold);
  color: var(--branco);
  margin: 0 0 56px;
}

.ch-sistema__title span { display: block; }

.ch-sistema .ch-card-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }

.ch-op-card {
  background: var(--ch-card-bg);
  border-radius: 28px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ch-op-card--highlight { background: var(--azul-hub); }

.ch-op-card svg { flex: 0 0 auto; }

.ch-op-card__title {
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: var(--fw-bold);
  color: var(--branco);
}

.ch-op-card__label {
  font-size: 16px;
  line-height: 1.4;
  font-weight: var(--fw-semibold);
  color: var(--ch-accent);
}

.ch-op-card--highlight .ch-op-card__label { color: var(--branco); }

.ch-op-card__text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ch-body-soft);
}

.ch-op-card--highlight .ch-op-card__text { color: var(--branco); }

.ch-op-card__footnote {
  font-size: 16px;
  line-height: 1.45;
  color: var(--branco);
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--ch-rule);
  font-weight: var(--fw-semibold);
}

.ch-op-card--highlight .ch-op-card__footnote { border-top-color: rgba(255, 255, 255, 0.4); }

/* --------------------------------------------------------------------------
   Assinatura ("Do ambiente aos insights...")
   -------------------------------------------------------------------------- */
.ch-assinatura {
  background: var(--azul-mid);
  padding: 128px 0;
}

.ch-assinatura__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 28px);
  text-align: center;
}

.ch-assinatura__inner img {
  width: clamp(28px, 4vw, 64px);
  height: clamp(28px, 4vw, 64px);
  flex: 0 0 auto;
}

.ch-assinatura__text {
  font-size: clamp(21px, 2.3vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: var(--fw-bold);
  color: var(--branco);
}

/* --------------------------------------------------------------------------
   Mensagem final
   -------------------------------------------------------------------------- */
.ch-final {
  background: var(--azul-hub);
  color: var(--branco);
  padding: 120px 0;
}

.ch-final__eyebrow {
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--branco);
  margin-bottom: 44px;
}

.ch-final__title {
  font-size: clamp(30px, 4vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: var(--fw-bold);
  margin: 0 0 48px;
  max-width: 30ch;
}

.ch-final__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 26px 56px;
  margin-bottom: 56px;
}

.ch-final__col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ch-final__col p {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
}

.ch-final__col p.is-strong {
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: var(--fw-semibold);
}

.ch-final__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  padding-top: 40px;
}

.ch-final__brand img { height: 38px; width: auto; }

/* --------------------------------------------------------------------------
   Responsive: cultura-hub specific
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .ch-section { padding: 72px 0; }
  .ch-hero { padding: 96px 0 76px; }
  .ch-final, .ch-assinatura { padding: 80px 0; }
  .ch-kicker { margin-bottom: 40px; }
}