/* ============================================================
   A Resenha é o Jogo — brand-redesign.css
   Colors: Brazil flag primaries + ReadySetGo secondaries
   ============================================================ */

:root {
  /* ── Brazil flag primaries ── */
  --brazil-green:  #009739;
  --brazil-yellow: #FEDD00;
  --brazil-blue:   #012169;
  --brazil-white:  #FFFFFF;

  /* ── RSG secondaries ── */
  --rsg-red:    #FF453A;
  --rsg-orange: #FF9F0A;
  --rsg-yellow: #FFD60A;
  --rsg-green:  #32D74B;

  /* ── Semantic tokens ── */
  --ink:     #012169;   /* dark bg = Brazil blue   */
  --paper:   #FFFFFF;   /* light bg = white        */
  --primary: #009739;   /* Brazil green            */
  --accent:  #FEDD00;   /* Brazil yellow           */
  --hot:     #FF453A;   /* RSG red — CTAs/accents  */

  --muted:  rgba(255, 255, 255, .68);
  --line:   rgba(255, 255, 255, .16);

  --radius:    28px;
  --container: min(1160px, calc(100vw - 48px));
  --font: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--ink);
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--paper);
  background: var(--ink);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }

/* ── Skip link ─────────────────────────────────────────────── */
.skip-link {
  position: fixed;
  left: 16px; top: 16px;
  z-index: 1000;
  transform: translateY(-150%);
  background: var(--paper);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 800;
}
.skip-link:focus { transform: none; }

/* ── Scroll progress bar ───────────────────────────────────── */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 80;
  background: rgba(255, 255, 255, .1);
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: calc(var(--scroll, 0) * 100%);
  background: var(--accent);
  transition: width 120ms linear;
}

/* ── Top navigation ────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset: 14px 14px auto;
  z-index: 70;
  min-height: 60px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 8px 14px;
  border: 1px solid rgba(254, 221, 0, .22);
  border-radius: 999px;
  background: rgba(1, 33, 105, .88);
  backdrop-filter: blur(24px) saturate(1.3);
}

.brand-lockup {
  justify-self: start;
  --_fs: .74rem;   /* font-size shared between img and span */
  --_lh: 1.1;      /* line-height shared between img and span */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-right: 10px;
}
.brand-lockup img {
  /* Scales to exactly the 2-line text block height, no distortion */
  width: auto;
  height: calc(var(--_fs) * var(--_lh) * 2);
  object-fit: contain;
  flex-shrink: 0;
}
.brand-lockup span {
  font-size: var(--_fs);
  font-weight: 800;
  line-height: var(--_lh);
  text-transform: uppercase;
  color: var(--accent);
  max-width: 9em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.site-nav {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 2vw, 28px);
}

.site-nav a,
.header-cta {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: rgba(255, 255, 255, .58);
  transition: color 160ms ease, gap 200ms ease;
}

.site-nav a::before {
  content: "⚽";
  font-size: .9em;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 220ms ease, opacity 180ms ease, margin 220ms ease;
  white-space: nowrap;
  margin-right: 0;
}

.site-nav a:hover { color: var(--paper); }

.site-nav a.is-active {
  color: var(--accent);
}
.site-nav a.is-active::before {
  max-width: 1.4em;
  opacity: 1;
  margin-right: 5px;
}

.header-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--paper);
  transition: background 160ms ease, transform 160ms ease;
}
.header-cta:hover {
  background: #007a2f;
  transform: translateY(-1px);
}

/* ── Brand sections (full-screen snap) ─────────────────────── */
.brand-section {
  position: relative;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding:
    clamp(90px, 12vh, 130px)
    max(24px, calc((100vw - var(--container)) / 2))
    clamp(36px, 5vh, 60px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

/* ── Section themes ─────────────────────────────────────────── */
.brand-section[data-theme="blue"] {
  background: var(--ink);
  color: var(--paper);
  --muted: rgba(255,255,255,.62);
  --line:  rgba(255,255,255,.14);
}
.brand-section[data-theme="yellow"] {
  background: var(--accent);
  color: var(--ink);
  --muted: rgba(1,33,105,.62);
  --line:  rgba(1,33,105,.18);
}
.brand-section[data-theme="light"] {
  background: var(--paper);
  color: var(--ink);
  --muted: rgba(1,33,105,.55);
  --line:  rgba(1,33,105,.14);
}
.brand-section[data-theme="green"] {
  background: var(--primary);
  color: var(--paper);
  --muted: rgba(255,255,255,.65);
  --line:  rgba(255,255,255,.18);
}

/* ── Labels & kickers ──────────────────────────────────────── */
.section-kicker,
.section-label {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.section-label {
  margin-bottom: clamp(18px, 3.5vh, 40px);
  opacity: .55;
}

/* ── Hero section ─────────────────────────────────────────── */
.hero-brand {
  justify-content: center;          /* equal breathing room top & bottom */
  padding-top: clamp(90px, 14vh, 150px);
  padding-bottom: clamp(90px, 14vh, 150px);
}

.ambient-mark {
  position: absolute;
  right: -6vw;
  top: 8vh;
  width: clamp(260px, 38vw, 640px);
  opacity: .1;
  transform: rotate(-8deg);
  animation: markDrift 16s ease-in-out infinite;
  pointer-events: none;
}
@keyframes markDrift {
  0%, 100% { transform: translateY(0)    rotate(-8deg); }
  50%       { transform: translateY(22px) rotate(-2deg); }
}

/* Brazil flag color ribbon on hero */
.hero-brand::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--brazil-green)  0% 33%,
    var(--brazil-yellow) 33% 66%,
    var(--brazil-blue)   66% 100%
  );
}

.hero-kicker {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.split-title {
  position: relative;
  z-index: 1;
  display: grid;
  margin-top: 10px;
  font-size: clamp(3.8rem, 11vw, 10rem);
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.07em;
  text-transform: uppercase;
}
.split-title span:nth-child(2) {
  margin-left: clamp(18px, 12vw, 180px);
  color: var(--accent);
}

.hero-tagline {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(16px, 2.5vh, 28px);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-tagline span {
  color: var(--accent);
  opacity: .7;
}

.hero-free-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: clamp(10px, 2vh, 20px);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 151, 57, .18);
  border: 1px solid rgba(0, 151, 57, .35);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rsg-green);
}

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: clamp(16px, 2.5vh, 32px) 0 0 0;   /* left-aligned */
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.55;
  color: var(--muted);
}

.hero-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;              /* left-aligned */
  gap: 10px;
  margin-top: clamp(18px, 3vh, 30px);
}

.pill-link {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: transform 160ms ease, background 160ms ease;
}
.pill-link:hover { transform: translateY(-2px); background: rgba(255,255,255,.12); }

.pill-link--solid {
  background: var(--primary);
  color: var(--paper);
  border-color: var(--primary);
}
.pill-link--solid:hover { background: #007a2f; }

.pill-link--yellow {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}
.pill-link--yellow:hover { background: #e8c900; }

.scroll-cue {
  position: absolute;
  left: max(24px, calc((100vw - var(--container)) / 2));
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  z-index: 2;
}
.scroll-cue::before {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { translate: 0 0;  opacity: .45; }
  50%       { translate: 0 6px; opacity: 1;  }
}

/* ── Chamado — statement section ───────────────────────────── */
.statement-section {
  justify-content: center;            /* grid centred in the screen */
  gap: clamp(16px, 3vh, 32px);
}

.statement-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;               /* vertical centre both columns */
}

/* ── Global h1/h2 inside sections — TIGHTER BASE ── */
.statement-grid h1,
.brand-section h2 {
  margin: 0;
  font-size: clamp(2.4rem, 5.5vw, 5.8rem);   /* was 7.5vw — was causing every overflow */
  line-height: .9;
  letter-spacing: -.065em;
  text-transform: uppercase;
}

.statement-copy {
  align-self: center;
  max-width: 460px;
  font-size: clamp(.95rem, 1.3vw, 1.14rem);
  line-height: 1.58;
  color: var(--muted);
}

/* Yellow section: override statement copy color */
.brand-section[data-theme="yellow"] .statement-copy {
  color: var(--muted);
}

.statement-copy .tagline {
  display: block;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 800;
  line-height: 1.45;
  color: currentColor;
  opacity: .85;
  margin-bottom: 18px;
}

.statement-copy ul {
  display: grid;
  gap: 0;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  color: currentColor;
}
.statement-copy li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: clamp(.9rem, 1.2vw, 1.04rem);
}
.statement-copy li strong { font-weight: 900; }

/* Yellow-theme list override */
.brand-section[data-theme="yellow"] .statement-copy ul { color: var(--ink); }

/* Ticker */
.ticker {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  gap: 40px;
  padding: 14px 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  white-space: nowrap;
}
.ticker span {
  flex: 0 0 auto;
  font-size: clamp(1.4rem, 3.5vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -.05em;
  text-transform: uppercase;
  animation: ticker 22s linear infinite;
}
@keyframes ticker { to { transform: translateX(-100%); } }

/* ── Públicos — audience section ────────────────────────────── */
.audience-brand {
  justify-content: flex-start;
}

/* Compact so "o discipulado" lands on same line as "para" — 3 lines total */
.audience-brand h2 {
  max-width: 900px;
  font-size: clamp(1.7rem, 2.6vw, 3.2rem);  /* 3 lines, never 5 */
  margin-bottom: clamp(10px, 2vh, 24px);
}

.audience-brand-grid {
  display: grid;
  gap: 0;
}

.audience-brand-card {
  display: grid;
  grid-template-columns: minmax(200px, .65fr) minmax(0, 1fr);
  border-top: 1px solid var(--line);
  transition: background 220ms ease;
}
.audience-brand-card:last-child { border-bottom: 1px solid var(--line); }

.audience-brand-card button {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 16px 0;
  text-align: left;
  font-size: clamp(1.5rem, 3.2vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -.055em;
  text-transform: uppercase;
  transition: color 160ms ease;
}
.audience-brand-card button span {
  font-size: .75rem;
  letter-spacing: 0;
  color: var(--primary);
  font-weight: 900;
}

/* Light theme: number accent */
.brand-section[data-theme="light"] .audience-brand-card button span {
  color: var(--primary);
}

.audience-brand-card > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0;
  transition: max-height 260ms ease, opacity 200ms ease, padding 200ms ease;
}

.audience-brand-card.is-open {
  background: rgba(0, 151, 57, .07);
}
.audience-brand-card.is-open > div {
  max-height: 220px;
  opacity: 1;
  padding: 16px 0;
}

.audience-brand-card p {
  max-width: 560px;
  margin: 0;
  font-size: clamp(.92rem, 1.3vw, 1.18rem);
  line-height: 1.5;
  color: var(--muted);
}

.brand-section[data-theme="light"] .audience-brand-card p { color: rgba(1,33,105,.65); }

.audience-brand-card a {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primary);
  white-space: nowrap;
  transition: opacity 160ms ease;
}
.audience-brand-card a:hover { opacity: .7; }

/* ── Caminhos — path section ────────────────────────────────── */
.path-section {
  justify-content: flex-start;
}

/* Caminhos h2 gets its own compact size */
.path-section h2 {
  font-size: clamp(1.8rem, 3vw, 3.8rem);
  margin-bottom: clamp(28px, 5vh, 52px);   /* breathing room above journey line */
}

.path-journey {
  font-size: clamp(.88rem, 1.1vw, 1rem);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 clamp(18px, 3.5vh, 36px) 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
}
.path-journey span { opacity: .45; }

.path-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.12);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: clamp(18px, 3.5vh, 36px);
  flex: 1;
  max-height: clamp(240px, 36vh, 360px);
}

.path-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(18px, 2.5vw, 30px);
  background: rgba(255,255,255,.12);
  color: var(--paper);
  transition: background 180ms ease;
}
.path-card:hover { background: rgba(255,255,255,.22); }

.path-card span {
  font-weight: 900;
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--accent);
}

.path-card h3 {
  margin: auto 0 10px;
  font-size: clamp(1.5rem, 3vw, 3rem);
  line-height: .9;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.path-card p {
  margin: 0;
  font-size: clamp(.88rem, 1.15vw, 1rem);
  line-height: 1.48;
  color: var(--muted);
}

/* ── Estratégias — strategy section ─────────────────────────── */
.strategy-section {
  justify-content: flex-start;
}

/* Each sentence on its own line — kept compact so list is visible */
.strategy-section h2 {
  font-size: clamp(2rem, 4vw, 5.5rem);
  line-height: 1.05;
  margin-bottom: clamp(12px, 2vh, 24px);
}

.strategy-list {
  display: grid;
  margin-top: clamp(18px, 3.5vh, 40px);
  border-top: 1px solid var(--line);
}

.strategy-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: clamp(8px, 1.4vh, 16px) 0;
  border-bottom: 1px solid var(--line);
  color: var(--paper);
  transition: padding-left 180ms ease, color 160ms ease;
}
.strategy-list a:hover {
  padding-left: 12px;
  color: var(--accent);
}

.strategy-list span {
  font-size: clamp(1.4rem, 2.8vw, 3.6rem);   /* compact so all 6 fit in section */
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.06em;
  text-transform: uppercase;
}

.strategy-list em {
  color: var(--muted);
  font-style: normal;
  font-size: clamp(.78rem, 1vw, .9rem);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: right;
}

/* ── Participar — sign-up section ───────────────────────────── */
.steps-section {
  height: auto;
  min-height: 100svh;
  justify-content: center;
}

/* Participar h2 — compact so form aligns without overflow */
.steps-section h2 {
  font-size: clamp(1.8rem, 3.5vw, 4.5rem);
}

.final-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .88fr);
  gap: clamp(30px, 6vw, 80px);
  align-items: stretch;             /* both columns same height */
}

.final-grid h2 { color: var(--ink); }

.final-grid > div {
  display: flex;
  flex-direction: column;
}

.brand-steps {
  display: grid;
  gap: 0;
  margin: clamp(20px, 4vh, 40px) 0 0;
  padding: 0;
  list-style: none;
}
.brand-steps li {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: clamp(1rem, 1.8vw, 1.55rem);
  font-weight: 800;
}
.brand-steps span { color: var(--primary); font-weight: 900; }

/* ── Sign-up form ───────────────────────────────────────────── */
.signup-panel {
  padding: clamp(20px, 3.5vw, 34px);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 20px 60px rgba(1, 33, 105, .2);
  display: flex;
  flex-direction: column;
  height: 100%;                     /* match left column height */
  box-sizing: border-box;
}

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}
.field-pair {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.field-pair span { display: grid; gap: 6px; }

.field label,
.checkbox-row,
.radio-group {
  color: rgba(255,255,255,.62);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.field input,
.field select {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  color: var(--paper);
  padding: 0 12px;
}
.field select option { color: var(--ink); }

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}
.radio-group label,
.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.checkbox-row { margin-bottom: 14px; }

.submit-button {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: var(--paper);
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease;
}
.submit-button:hover { background: #007a2f; }

.honeypot { position: absolute; left: -9999px; }

.alert {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  font-size: .88rem;
}
.alert--hidden { display: none; }
.alert--success { background: rgba(0,151,57,.2); color: var(--rsg-green); }
.alert--error   { background: rgba(255,69,58,.18); color: #ff8a82; }

/* ── Footer ─────────────────────────────────────────────────── */
.brand-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px max(24px, calc((100vw - var(--container)) / 2));
  background: var(--ink);
  border-top: 1px solid rgba(254,221,0,.15);
  color: rgba(255,255,255,.45);
  font-size: .78rem;
}

.brand-footer div { display: flex; align-items: center; gap: 12px; }

.brand-footer strong {
  color: var(--paper);
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .06em;
}

.brand-footer .powered {
  color: rgba(255,255,255,.38);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.brand-footer .powered span { color: var(--rsg-red); }

/* ── Sub-page nav bar ───────────────────────────────────────── */
.sub-header {
  position: fixed;
  inset: 14px 14px auto;
  z-index: 70;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border: 1px solid rgba(254,221,0,.22);
  border-radius: 999px;
  background: rgba(1,33,105,.9);
  backdrop-filter: blur(24px);
  gap: 20px;
}

.sub-page-main {
  padding-top: 90px;
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
}

/* ── Sub-page sections ──────────────────────────────────────── */
.sub-hero {
  min-height: clamp(280px, 40vh, 480px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(60px, 8vh, 100px) max(24px, calc((100vw - var(--container)) / 2)) clamp(36px, 5vh, 60px);
  background: var(--ink);
  color: var(--paper);
  border-bottom: 4px solid var(--accent);
}
.sub-hero.green-bg  { background: var(--primary); }
.sub-hero.yellow-bg { background: var(--accent); color: var(--ink); }

.sub-hero h1 {
  margin: 10px 0 0;
  font-size: clamp(3rem, 8vw, 7.5rem);
  line-height: .86;
  letter-spacing: -.07em;
  text-transform: uppercase;
}

.sub-hero p {
  max-width: 640px;
  margin: clamp(16px, 2.5vh, 28px) 0 0;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.52;
  color: var(--muted);
}
.sub-hero.yellow-bg p { color: rgba(1,33,105,.65); }

/* Sub-page content area */
.sub-content {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(50px, 8vw, 90px) max(24px, calc((100vw - var(--container)) / 2));
}

/* Strategy cards grid */
.strategy-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: clamp(30px, 5vw, 60px);
}

.strategy-card {
  padding: clamp(24px, 3vw, 38px);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  transition: transform 180ms ease;
}
.strategy-card:hover { transform: translateY(-4px); }

.strategy-card .card-num {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .07em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.strategy-card h3 {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  line-height: .92;
  letter-spacing: -.05em;
  text-transform: uppercase;
}
.strategy-card .card-audience {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 14px;
}
.strategy-card p {
  margin: 0;
  font-size: clamp(.9rem, 1.2vw, 1.04rem);
  line-height: 1.55;
  color: var(--muted);
}

/* Resource cards */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: clamp(28px, 4vw, 50px);
}

.resource-card {
  padding: clamp(20px, 2.5vw, 32px);
  border: 1px solid rgba(1,33,105,.14);
  border-radius: 20px;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(1,33,105,.07);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.resource-card:hover {
  box-shadow: 0 8px 32px rgba(1,33,105,.14);
  transform: translateY(-3px);
}

.resource-card .rc-tag {
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
}
.resource-card h3 {
  margin: 0;
  font-size: clamp(1.1rem, 1.8vw, 1.55rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 800;
}
.resource-card p {
  margin: 0;
  font-size: .94rem;
  line-height: 1.52;
  color: rgba(1,33,105,.62);
  flex: 1;
}
.resource-card .rc-dl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primary);
}

/* Blog section */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: clamp(28px, 4vw, 50px);
}

.blog-card {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(1,33,105,.1);
  background: var(--paper);
  color: var(--ink);
  transition: transform 180ms ease;
}
.blog-card:hover { transform: translateY(-4px); }

.blog-card__thumb {
  height: 200px;
  background: var(--ink);
}

.blog-card__body {
  padding: 20px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.blog-card__meta {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primary);
}
.blog-card__body h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.2;
}
.blog-card__body p {
  margin: 0;
  font-size: .92rem;
  color: rgba(1,33,105,.6);
  line-height: 1.5;
  flex: 1;
}

.blog-empty {
  padding: 60px;
  text-align: center;
  color: rgba(1,33,105,.4);
  font-size: 1.1rem;
}

/* ── Reveal animations ──────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.16,1,.3,1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 980px) {
  .site-header {
    grid-template-columns: auto auto;
  }
  .site-nav { display: none; }

  .brand-section {
    height: auto;
    min-height: 100svh;
    padding-inline: 22px;
  }

  .statement-grid,
  .final-grid {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vw, 40px);
  }

  .audience-brand-card {
    grid-template-columns: 1fr;
  }
  .audience-brand-card > div {
    grid-template-columns: 1fr;
  }

  .path-grid {
    grid-template-columns: 1fr;
    max-height: none;
    flex: none;
  }

  .path-card { min-height: 200px; }
}

@media (max-width: 620px) {
  .site-header {
    inset: 10px 10px auto;
    min-height: 54px;
    padding: 6px 12px;
  }
  .header-cta { min-height: 36px; padding-inline: 14px; }
  .brand-lockup span { display: none; }

  .split-title {
    font-size: clamp(3.2rem, 18vw, 5.8rem);
  }
  .split-title span:nth-child(2) { margin-left: 0; }

  .hero-copy,
  .hero-actions { margin-left: 0; justify-content: flex-start; }

  .scroll-cue { left: 22px; }

  .strategy-list a { grid-template-columns: 1fr; }
  .field-pair { grid-template-columns: 1fr; }
  .brand-footer { flex-direction: column; align-items: flex-start; gap: 12px; }
  .strategy-cards { grid-template-columns: 1fr; }
  .resource-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
}

@media (max-height: 680px) {
  .brand-section { height: auto; min-height: 100svh; }
  .split-title { font-size: clamp(2.8rem, 8vw, 5.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   UI Corrections — 2026
   ============================================================ */

/* ── 1. Hero & nav: blue → black (#121212) ──────────────────── */
html { background: #121212; }

.site-header {
  background: rgba(18, 18, 18, .92);
  border-color: rgba(255, 255, 255, .12);
}

.sub-header {
  background: rgba(18, 18, 18, .92);
  border-color: rgba(255, 255, 255, .12);
}

.brand-section[data-theme="blue"] {
  background: #121212;
}

/* ── 2. Chamado section: tighter spacing ─────────────────────── */
.statement-section {
  gap: clamp(8px, 1.2vh, 14px);
  padding-bottom: clamp(60px, 9vh, 90px); /* room for thin ticker */
}

/* ── 3. Ticker: 50% thicker + true infinite scroll (slow) ──────── */
.ticker {
  padding: 0;
  border-top: 1px solid var(--line);
  overflow: hidden;
  display: block;
  height: clamp(30px, 4.2vh, 42px);
  line-height: clamp(30px, 4.2vh, 42px);
}

.ticker__track {
  display: inline-flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  white-space: nowrap;
  animation: ticker-loop 70s linear infinite;
  height: 100%;
}

/* cancel the old per-span animation from the original .ticker span rule */
.ticker__track span {
  animation: none !important;
  font-size: clamp(.78rem, 1.1vw, 1rem);
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: currentColor;
  opacity: .75;
  flex-shrink: 0;
  transform: none !important;
}

.ticker__track .ticker__dot {
  opacity: .3;
  font-size: .6em;
  flex-shrink: 0;
}

@keyframes ticker-loop {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── 4. Públicos: tighter bottom + better expanded layout ──────── */
.audience-brand {
  height: auto;
  min-height: 100svh;
  padding-bottom: clamp(50px, 7vh, 80px);
}

/* Expanded content: stack description above link (not side-by-side) */
.audience-brand-card > div {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 12px;
}

.audience-brand-card.is-open > div {
  max-height: 260px;
}

.audience-brand-card a {
  align-self: start;
}

/* ── 5. Caminhos: tighter bottom ─────────────────────────────── */
.path-section {
  height: auto;
  min-height: 100svh;
  padding-bottom: clamp(50px, 7vh, 80px);
}

/* ── 6. Estratégias page: 1-column grid + anchor highlight ──────── */
.strategy-cards {
  grid-template-columns: 1fr;
  max-width: 860px;
}

.strategy-card {
  position: relative;
  scroll-margin-top: 100px;
  border: 2px solid transparent;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.strategy-card:target {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(254, 221, 0, .18);
}

/* Numbered nav strip for estratégias page */
.strategy-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(24px, 4vw, 40px) 0 0;
}

.strategy-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(1, 33, 105, .2);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  text-decoration: none;
}

.strategy-nav a:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.strategy-nav a span {
  color: var(--primary);
  font-size: .65rem;
}

/* ── 7. Blog: smart filter sidebar layout ─────────────────────── */
.blog-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}

.blog-sidebar {
  position: sticky;
  top: 88px;
  border-radius: 18px;
  border: 1px solid rgba(1, 33, 105, .12);
  background: rgba(1, 33, 105, .03);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.blog-filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blog-filter-group label {
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .55;
}

.blog-filter-group input,
.blog-filter-group select {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(1, 33, 105, .18);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  padding: 0 10px;
  font-size: .88rem;
  font-family: var(--font);
}

.blog-filter-group input:focus,
.blog-filter-group select:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.blog-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.blog-filter-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(1, 33, 105, .2);
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  color: rgba(1, 33, 105, .7);
  cursor: pointer;
  background: transparent;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
  font-family: var(--font);
}

.blog-filter-tag.is-active,
.blog-filter-tag:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.blog-filter-clear {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(1, 33, 105, .2);
  border-radius: 999px;
  background: transparent;
  color: rgba(1, 33, 105, .55);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  font-family: var(--font);
  transition: background 140ms ease, color 140ms ease;
}

.blog-filter-clear:hover {
  background: rgba(1, 33, 105, .06);
  color: var(--ink);
}

.blog-results-count {
  font-size: .78rem;
  font-weight: 700;
  color: rgba(1, 33, 105, .45);
  margin: 0 0 12px;
}

@media (max-width: 860px) {
  .blog-layout {
    grid-template-columns: 1fr;
  }
  .blog-sidebar {
    position: static;
  }
}

@media (max-width: 620px) {
  .strategy-cards {
    max-width: 100%;
  }
}

/* ============================================================
   Batch 2 Corrections — 2026
   ============================================================ */

/* ── Blog page: full dark mode ───────────────────────────────── */
.blog-page .sub-page-main {
  background: #121212;
  color: var(--paper);
}

.blog-page .sub-hero {
  background: #121212;
}

.blog-page .blog-sidebar {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .1);
}

.blog-page .blog-sidebar > strong {
  color: rgba(255, 255, 255, .55);
}

.blog-page .blog-filter-group label {
  color: rgba(255, 255, 255, .4);
}

.blog-page .blog-filter-group input,
.blog-page .blog-filter-group select {
  background: rgba(255, 255, 255, .07);
  color: var(--paper);
  border-color: rgba(255, 255, 255, .15);
  color-scheme: dark;
}

.blog-page .blog-filter-group input::placeholder {
  color: rgba(255, 255, 255, .28);
}

.blog-page .blog-filter-tag {
  color: rgba(255, 255, 255, .55);
  border-color: rgba(255, 255, 255, .18);
}

.blog-page .blog-filter-tag.is-active,
.blog-page .blog-filter-tag:hover {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}

.blog-page .blog-filter-clear {
  color: rgba(255, 255, 255, .4);
  border-color: rgba(255, 255, 255, .15);
}

.blog-page .blog-filter-clear:hover {
  background: rgba(255, 255, 255, .08);
  color: var(--paper);
}

.blog-page .blog-results-count {
  color: rgba(255, 255, 255, .4);
}

/* section title & subtitle inside blog */
.blog-page #posts-title { color: var(--paper); }

/* cross-link section at bottom of blog */
.blog-page .sub-content section h2 { color: var(--paper); }
.blog-page .sub-content section p  { color: rgba(255, 255, 255, .55); }

/* ── Estratégias page: full dark mode ────────────────────────── */
.estrategias-page .sub-page-main {
  background: #121212;
  color: var(--paper);
}

.estrategias-page .sub-hero {
  background: #121212;
}

.estrategias-page .strategy-nav a {
  color: rgba(255, 255, 255, .75);
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .04);
}

.estrategias-page .strategy-nav a:hover {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}

.estrategias-page .strategy-nav a span {
  color: var(--accent);
}

/* bottom discipleship block on estratégias already dark (#ink) — keep it */

/* Tighten gap between sub-hero yellow divider and strategy nav buttons */
.estrategias-page .sub-content {
  padding-top: clamp(16px, 2vw, 28px);
}
.estrategias-page .strategy-nav {
  margin-top: 0;
}

/* ── Chamado: even tighter spacing ───────────────────────────── */
.statement-section {
  gap: clamp(4px, .8vh, 10px);
  padding-top: clamp(60px, 7vh, 80px);
  padding-bottom: clamp(50px, 7vh, 70px);
}

/* ── Caminhos: tighter gap title → subtitle ──────────────────── */
.path-section > h2,
[data-section="caminhos"] > h2 {
  margin-bottom: clamp(4px, .6vh, 8px);
}

/* ── Estratégias: tighter internal card gaps ─────────────────── */
.strategy-cards {
  gap: clamp(12px, 2vw, 20px);
  margin-top: clamp(20px, 3vw, 32px);
}

/* ============================================================
   Blog Post Page — post/index.html
   ============================================================ */

.post-main {
  padding-top: 0; /* sub-page-main already gives 90px; hero handles its own clearance */
  background: #121212;
  color: var(--paper);
}

/* ── Post hero ── */
.post-hero {
  background: #121212;
  padding-top: clamp(88px, 12vh, 108px);
  padding-bottom: clamp(40px, 6vh, 72px);
  border-bottom: 4px solid var(--accent);
}

.post-hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 max(24px, calc((100vw - var(--container)) / 2));
}

.post-breadcrumb ol {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}

.post-breadcrumb a {
  color: rgba(255, 255, 255, .38);
  text-decoration: none;
}

.post-breadcrumb a:hover { color: var(--accent); }

.post-meta-kicker {
  margin: 0 0 8px;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

#post-title-el {
  margin: 0 0 12px;
  font-size: clamp(2.2rem, 5.5vw, 5.5rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.05em;
  text-transform: uppercase;
  max-width: 860px;
}

.post-meta-line {
  margin: 0;
  font-size: .85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .5);
}

/* ── Cover image ── */
.post-cover {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 40px) max(24px, calc((100vw - var(--container)) / 2)) 0;
}

.post-cover img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}

/* ── Article body ── */
.post-body-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(36px, 5vw, 64px) max(24px, calc((100vw - var(--container)) / 2));
}

.post-body {
  max-width: 720px;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.72;
  color: rgba(255, 255, 255, .82);
}

.post-body h2 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--paper);
  margin: clamp(28px, 4vh, 48px) 0 12px;
  letter-spacing: -.04em;
}

.post-body h3 {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 800;
  color: var(--paper);
  margin: 24px 0 8px;
}

.post-body p { margin: 0 0 18px; }
.post-body a { color: var(--accent); }
.post-body blockquote {
  border-left: 4px solid var(--accent);
  margin: 24px 0;
  padding: 12px 20px;
  color: rgba(255, 255, 255, .65);
  font-style: italic;
}

.post-body ul, .post-body ol { padding-left: 20px; margin-bottom: 18px; }
.post-body li { margin-bottom: 6px; }

.post-loading {
  color: rgba(255, 255, 255, .4);
  font-size: 1rem;
  padding: 40px 0;
}

/* ── Social share strip ── */
.share-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: clamp(32px, 5vw, 56px);
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  max-width: 720px;
}

.share-strip__label {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
  flex-shrink: 0;
}

.share-strip__btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .7);
  border: 1px solid rgba(255, 255, 255, .12);
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
  cursor: pointer;
  font-family: inherit;
}

.share-btn:hover { transform: translateY(-2px); color: var(--paper); }
.share-btn--facebook:hover  { background: #1877F2; border-color: #1877F2; }
.share-btn--x:hover         { background: #000; border-color: #555; }
.share-btn--whatsapp:hover  { background: #25D366; border-color: #25D366; }
.share-btn--telegram:hover  { background: #229ED9; border-color: #229ED9; }
.share-btn--linkedin:hover  { background: #0A66C2; border-color: #0A66C2; }
.share-btn--email:hover     { background: var(--primary); border-color: var(--primary); }
.share-btn--copy:hover      { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* ── Comments ── */
.comments-section {
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  max-width: 720px;
}

.comments-title {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 900;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0 0 24px;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 36px;
}

.comment-item {
  padding: 16px 20px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
}

.comment-item__header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.comment-item__author {
  font-size: .88rem;
  font-weight: 800;
  color: var(--accent);
}

.comment-item__date {
  font-size: .72rem;
  color: rgba(255, 255, 255, .35);
}

.comment-item__body {
  font-size: .95rem;
  color: rgba(255, 255, 255, .75);
  line-height: 1.6;
  white-space: pre-wrap;
}

.comments-empty, .comments-loading {
  color: rgba(255, 255, 255, .35);
  font-size: .95rem;
  padding: 12px 0;
}

/* Comment form */
.comment-form-wrap {
  margin-top: 32px;
  padding: 28px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
}

.comment-form-title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--paper);
  margin: 0 0 20px;
}

.comment-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.comment-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.comment-form__field label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}

.comment-form__field input,
.comment-form__field textarea {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  color: var(--paper);
  font-family: var(--font);
  font-size: .92rem;
  outline: none;
  transition: border-color 150ms ease;
}

.comment-form__field textarea { padding: 10px 12px; resize: vertical; }

.comment-form__field input:focus,
.comment-form__field textarea:focus {
  border-color: var(--accent);
}

.comment-form__field input::placeholder,
.comment-form__field textarea::placeholder {
  color: rgba(255, 255, 255, .25);
}

.comment-submit {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: opacity 150ms ease;
}

.comment-submit:disabled { opacity: .55; cursor: default; }

.comment-status {
  margin-top: 12px;
  font-size: .88rem;
  font-weight: 600;
  min-height: 20px;
}

.comment-status.success { color: #32D74B; }
.comment-status.error   { color: #FF453A; }

/* Back to blog */
.post-back-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 max(24px, calc((100vw - var(--container)) / 2)) clamp(40px, 6vw, 72px);
}

.post-back-link {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  text-decoration: none;
  transition: color 150ms ease;
}

.post-back-link:hover { color: var(--accent); }

@media (max-width: 620px) {
  .comment-form__grid { grid-template-columns: 1fr; }
  #post-title-el { letter-spacing: -.03em; }
}

/* ============================================================
   Blog UX overhaul — layout, a11y, dark/light, cross-browser
   ============================================================ */

/* ── 1. Safari / Opera: webkit backdrop-filter ───────────────── */
.site-header {
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
}
.sub-header {
  -webkit-backdrop-filter: blur(24px);
}

/* ── 2. Blog hero: tighter reader height ─────────────────────── */
.blog-page .sub-hero {
  min-height: clamp(180px, 24vh, 260px);
}

/* ── 3. Blog content width: match header pill width ─────────── */
/* The base .sub-content applies calc padding that double-indents
   when max-width is also set; override to a simple gutter. */
.blog-page .sub-content {
  padding-left:  clamp(16px, 2vw, 28px);
  padding-right: clamp(16px, 2vw, 28px);
}

/* ── 4. Sidebar + posts: align top edges ─────────────────────── */
.blog-layout .blog-grid {
  margin-top: 0;
}

/* ── 5. Post title: more letter-spacing breathing room ─────────── */
#post-title-el {
  letter-spacing: -.025em;
}

/* ── 6. System light mode — blog + post pages ────────────────── */
@media (prefers-color-scheme: light) {

  /* Header */
  .blog-page .sub-header,
  .post-page .sub-header {
    background: rgba(248, 247, 244, .94);
    border-color: rgba(1, 33, 105, .15);
  }

  .blog-page .sub-header .brand-lockup span,
  .post-page .sub-header .brand-lockup span {
    color: var(--ink);
  }

  .blog-page .sub-header .site-nav a,
  .post-page .sub-header .site-nav a {
    color: rgba(1, 33, 105, .52);
  }

  .blog-page .sub-header .site-nav a:hover,
  .post-page .sub-header .site-nav a:hover {
    color: var(--ink);
  }

  .blog-page .sub-header .site-nav a.is-active,
  .post-page .sub-header .site-nav a.is-active {
    color: var(--primary);
  }

  /* Main area */
  .blog-page .sub-page-main {
    background: #F7F6F2;
    color: var(--ink);
  }

  /* Hero: off-white in light mode, matching rest of page */
  .blog-page .sub-hero {
    background: #F7F6F2;
    color: var(--ink);
  }
  .blog-page .sub-hero p {
    color: rgba(1, 33, 105, .65);
  }

  /* Sidebar */
  .blog-page .blog-sidebar {
    background: rgba(1, 33, 105, .035);
    border-color: rgba(1, 33, 105, .12);
  }

  .blog-page .blog-sidebar > strong {
    color: rgba(1, 33, 105, .55);
  }

  .blog-page .blog-filter-group label {
    color: rgba(1, 33, 105, .5);
    opacity: 1;
  }

  .blog-page .blog-filter-group input,
  .blog-page .blog-filter-group select {
    background: var(--paper);
    color: var(--ink);
    border-color: rgba(1, 33, 105, .18);
    color-scheme: light;
  }

  .blog-page .blog-filter-group input::placeholder {
    color: rgba(1, 33, 105, .35);
  }

  .blog-page .blog-filter-tag {
    color: rgba(1, 33, 105, .65);
    border-color: rgba(1, 33, 105, .2);
  }

  .blog-page .blog-filter-tag.is-active,
  .blog-page .blog-filter-tag:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }

  .blog-page .blog-filter-clear {
    color: rgba(1, 33, 105, .5);
    border-color: rgba(1, 33, 105, .2);
  }

  .blog-page .blog-filter-clear:hover {
    background: rgba(1, 33, 105, .06);
    color: var(--ink);
  }

  .blog-page .blog-results-count {
    color: rgba(1, 33, 105, .45);
  }

  /* Bottom cross-link section */
  .blog-page .sub-content section h2 { color: var(--ink); }
  .blog-page .sub-content section p  { color: rgba(1, 33, 105, .65); }

  /* Empty state */
  .blog-page #blog-dynamic p {
    color: rgba(1, 33, 105, .4);
  }

  /* Footer */
  .blog-page .brand-footer,
  .post-page .brand-footer {
    background: #ECEAE6;
    border-color: rgba(1, 33, 105, .12);
    color: rgba(1, 33, 105, .5);
  }

  .blog-page .brand-footer strong,
  .post-page .brand-footer strong {
    color: var(--ink);
  }

  .blog-page .brand-footer .powered,
  .post-page .brand-footer .powered {
    color: rgba(1, 33, 105, .4);
  }

  /* ── Post page light mode ── */
  .post-page .post-main {
    background: #F7F6F2;
    color: var(--ink);
  }

  /* Post hero: light in light mode, matching page */
  .post-page .post-hero {
    background: #F7F6F2;
    border-bottom-color: rgba(1, 33, 105, .15);
  }

  .post-page .post-breadcrumb ol,
  .post-page .post-breadcrumb a {
    color: rgba(1, 33, 105, .42);
  }
  .post-page .post-breadcrumb a:hover { color: var(--primary); }
  .post-page .post-meta-kicker { color: var(--primary); }
  .post-page #post-title-el { color: var(--ink); }
  .post-page .post-meta-line { color: rgba(1, 33, 105, .52); }

  .post-page .post-body {
    color: rgba(1, 33, 105, .84);
  }

  .post-page .post-body h2,
  .post-page .post-body h3 {
    color: var(--ink);
  }

  .post-page .post-body a     { color: var(--primary); }
  .post-page .post-body blockquote { color: rgba(1, 33, 105, .62); }

  .post-page .post-loading {
    color: rgba(1, 33, 105, .4);
  }

  .post-page .share-strip {
    border-color: rgba(1, 33, 105, .12);
  }

  .post-page .share-strip__label {
    color: rgba(1, 33, 105, .42);
  }

  .post-page .share-btn {
    background: rgba(1, 33, 105, .06);
    color: rgba(1, 33, 105, .6);
    border-color: rgba(1, 33, 105, .14);
  }

  .post-page .comments-section {
    border-color: rgba(1, 33, 105, .12);
  }

  .post-page .comments-title,
  .post-page .comment-form-title {
    color: var(--ink);
  }

  .post-page .comment-item {
    background: rgba(1, 33, 105, .03);
    border-color: rgba(1, 33, 105, .1);
  }

  .post-page .comment-item__author { color: var(--primary); }
  .post-page .comment-item__date   { color: rgba(1, 33, 105, .38); }
  .post-page .comment-item__body   { color: rgba(1, 33, 105, .8); }

  .post-page .comments-empty,
  .post-page .comments-loading {
    color: rgba(1, 33, 105, .38);
  }

  .post-page .comment-form-wrap {
    background: rgba(1, 33, 105, .03);
    border-color: rgba(1, 33, 105, .1);
  }

  .post-page .comment-form__field label {
    color: rgba(1, 33, 105, .52);
  }

  .post-page .comment-form__field input,
  .post-page .comment-form__field textarea {
    background: var(--paper);
    border-color: rgba(1, 33, 105, .18);
    color: var(--ink);
  }

  .post-page .comment-form__field input::placeholder,
  .post-page .comment-form__field textarea::placeholder {
    color: rgba(1, 33, 105, .28);
  }

  .post-page .post-back-link { color: rgba(1, 33, 105, .42); }
  .post-page .post-back-link:hover { color: var(--primary); }
}

/* ============================================================
   Blog Header Dark/Light Mode — breadcrumb + contrast fixes
   ============================================================ */

/* ── Sub-hero breadcrumb component (dark mode defaults) ── */
.sub-hero__breadcrumb { margin-bottom: 12px; }

.sub-hero__breadcrumb ol {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0; margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}

.sub-hero__breadcrumb a {
  color: rgba(255, 255, 255, .45);
  text-decoration: none;
  transition: color 160ms ease;
}
.sub-hero__breadcrumb a:hover { color: #fff; }

.sub-hero__breadcrumb li:nth-child(2) { color: rgba(255, 255, 255, .25); }
.sub-hero__breadcrumb li:last-child   { color: var(--accent); }

/* ── Dark mode: fix blog text contrast (inline styles use ink colors) ── */
.blog-page .blog-grid > p {
  color: rgba(255, 255, 255, .4) !important;
}

.blog-page #blog-empty-state {
  border-color: rgba(255, 255, 255, .12) !important;
}
.blog-page #blog-empty-state > p {
  color: rgba(255, 255, 255, .5) !important;
}

.blog-page .sub-content > section {
  background: rgba(255, 255, 255, .05) !important;
}
.blog-page .sub-content > section h2 {
  color: var(--paper) !important;
}
.blog-page .sub-content > section p {
  color: rgba(255, 255, 255, .55) !important;
}

/* ── Light mode overrides for breadcrumb + hero text ── */
@media (prefers-color-scheme: light) {

  .blog-page .sub-hero__breadcrumb ol {
    color: rgba(1, 33, 105, .42);
  }
  .blog-page .sub-hero__breadcrumb a {
    color: rgba(1, 33, 105, .42);
  }
  .blog-page .sub-hero__breadcrumb a:hover { color: var(--ink); }

  .blog-page .sub-hero__breadcrumb li:nth-child(2) { color: rgba(1, 33, 105, .25); }
  .blog-page .sub-hero__breadcrumb li:last-child   { color: var(--primary); }

  /* Loading placeholder + empty state */
  .blog-page .blog-grid > p              { color: rgba(1, 33, 105, .4) !important; }
  .blog-page #blog-empty-state           { border-color: rgba(1, 33, 105, .15) !important; }
  .blog-page #blog-empty-state > p       { color: rgba(1, 33, 105, .55) !important; }

  /* Cross-link "Quer aprofundar?" section */
  .blog-page .sub-content > section      { background: rgba(1, 33, 105, .04) !important; }
  .blog-page .sub-content > section h2   { color: var(--ink) !important; }
  .blog-page .sub-content > section p    { color: rgba(1, 33, 105, .65) !important; }
}

/* ── Nav dropdown "Mais" ─────────────────────────────── */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color 160ms ease;
  font-family: inherit;
}
.nav-dropdown__toggle:hover,
.nav-dropdown__toggle[aria-expanded="true"] {
  color: var(--paper);
}
.nav-dropdown__caret {
  flex-shrink: 0;
  transition: transform 220ms ease;
}
.nav-dropdown__toggle[aria-expanded="true"] .nav-dropdown__caret {
  transform: rotate(180deg);
}

.nav-dropdown__menu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  background: var(--ink);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 6px;
  margin: 0;
  list-style: none;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  z-index: 500;
}
.nav-dropdown__menu::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid rgba(255,255,255,.1);
}
.nav-dropdown[data-open] .nav-dropdown__menu {
  display: block;
}

.nav-dropdown__menu a {
  display: block;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  transition: background 140ms ease, color 140ms ease;
  text-decoration: none;
  white-space: nowrap;
}
.nav-dropdown__menu a:hover {
  background: rgba(255,255,255,.08);
  color: var(--paper);
}

/* Sub-header nav (static pages) uses same dropdown styles */
.sub-header .nav-dropdown__toggle {
  color: rgba(1,33,105,.55);
}
.sub-header .nav-dropdown__toggle:hover,
.sub-header .nav-dropdown__toggle[aria-expanded="true"] {
  color: var(--ink);
}
.sub-header .nav-dropdown__menu {
  background: #fff;
  border-color: rgba(1,33,105,.12);
  box-shadow: 0 12px 40px rgba(1,33,105,.12);
}
.sub-header .nav-dropdown__menu::before {
  border-bottom-color: rgba(1,33,105,.12);
}
.sub-header .nav-dropdown__menu a {
  color: rgba(1,33,105,.65);
}
.sub-header .nav-dropdown__menu a:hover {
  background: rgba(1,33,105,.06);
  color: var(--ink);
}

/* Light-mode overrides */
@media (prefers-color-scheme: light) {
  .site-header .nav-dropdown__toggle {
    color: var(--accent);
  }
  .site-header .nav-dropdown__toggle:hover,
  .site-header .nav-dropdown__toggle[aria-expanded="true"] {
    color: #fff;
  }
  .site-header .nav-dropdown__menu {
    background: #fff;
    border-color: rgba(1,33,105,.12);
    box-shadow: 0 12px 40px rgba(1,33,105,.12);
  }
  .site-header .nav-dropdown__menu::before {
    border-bottom-color: rgba(1,33,105,.12);
  }
  .site-header .nav-dropdown__menu a {
    color: rgba(1,33,105,.65);
  }
  .site-header .nav-dropdown__menu a:hover {
    background: rgba(1,33,105,.06);
    color: var(--ink);
  }
}