/* ============================================================
   PIVA Educacional — Homepage Final CSS
   Direção: Editorial-Collage
   Linguagem visual: headline em duas vozes, pilares bento com
   letras gigantes, pull quote sticker, manifesto dark com aspa
   gigante, depoimentos com monogram, blog grid, marquee de
   mídia, newsletter big, três momentos fotográficos.
   Complementa css/shared.css.
   NUNCA duplicar tokens definidos em shared.css.
   ============================================================ */

/* ────────────────────────────────────────────────
   FONTES SELF-HOSTED + FALLBACK DE MÉTRICA CASADA
   woff2 mesmo domínio (/fonts/) tira o Google Fonts CDN do
   caminho crítico. Os faces "* Fallback" usam local(Georgia/Arial)
   com size-adjust/ascent/descent calculados (Capsize) p/ ocuparem
   EXATAMENTE a caixa da fonte real → o swap não causa reflow (CLS 0)
   e a Lora/Source Sans real sempre aparece (display:swap mantido).
   Os faces são force-incluídos no crítico inline por gen-critical.mjs.
   ──────────────────────────────────────────────── */
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/sourcesans3.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/lora.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400 600; font-display: swap; src: url('/fonts/lora-italic.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3 Fallback'; src: local('Arial'), local('ArialMT'); ascent-override: 109.2105%; descent-override: 42.6604%; line-gap-override: 0%; size-adjust: 93.7639%; }
@font-face { font-family: 'Lora Fallback'; font-style: normal; src: local('Georgia'); ascent-override: 95.8281%; descent-override: 26.1003%; size-adjust: 104.9796%; }
@font-face { font-family: 'Lora Fallback'; font-style: italic; src: local('Georgia Italic'), local('Georgia'); ascent-override: 95.8281%; descent-override: 26.1003%; size-adjust: 104.9796%; }

/* ────────────────────────────────────────────────
   EYEBROW UNIVERSAL
   .eyebrow-c — usado em todas as seções
   ──────────────────────────────────────────────── */

.eyebrow-c {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  display: block;
}


/* ────────────────────────────────────────────────
   HEADLINE ACCENT — itálico teal dentro de Lora
   .headline-accent — aplicado via <em> dentro de H1/H2
   ──────────────────────────────────────────────── */

.headline-accent {
  font-style: italic;
  color: var(--primary);
  font-weight: inherit;
}


/* ────────────────────────────────────────────────
   NAV ADAPTATIVA — transparente sobre hero claro
   Hero é claro (#FFFDF8), nav começa com texto escuro.
   ──────────────────────────────────────────────── */

#nav-header-c {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background var(--duration-normal) var(--ease-premium),
    border-color var(--duration-normal) var(--ease-premium),
    backdrop-filter var(--duration-normal) var(--ease-premium);
}

#nav-header-c.is-scrolled {
  background: rgba(255, 253, 248, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border-whisper);
}

/* Menu mobile aberto: header opaco para o painel não vazar o hero atrás.
   Regra depois de .is-scrolled no source order para vencer o fundo translúcido. */
#nav-header-c.is-menu-open {
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: var(--border-whisper);
}

/* Painel do menu mobile: rola internamente se passar da viewport
   (header é fixed; sem isso o CTA do rodapé fica inalcançável com Programas aberto) */
#mobile-menu-c {
  max-height: calc(100dvh - 4.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Chevron do expander "Programas" (mobile): gira ao abrir o <details> */
.mobile-prog-chevron {
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-premium);
}
#mobile-menu-c details[open] .mobile-prog-chevron {
  transform: rotate(180deg);
}

/* Logo e links: escuros desde o início (hero claro) */
#nav-header-c .nav-link,
#nav-header-c .nav-dropdown-btn {
  color: var(--text);
  transition: color var(--duration-fast) var(--ease-premium);
}

/* Logo oficial (imagem) */
#nav-header-c .nav-logo-link {
  display: inline-flex;
  align-items: center;
}

.nav-logo-img {
  height: 2rem;
  width: auto;
  display: block;
  user-select: none;
}

@media (max-width: 640px) {
  .nav-logo-img { height: 1.625rem; }
}

#nav-header-c .nav-link:hover,
#nav-header-c .nav-dropdown-btn:hover {
  color: var(--primary);
}

#nav-header-c .nav-hamburger {
  color: var(--text);
}

#nav-header-c .nav-cta-btn {
  background: var(--accent);
  color: #fff;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  text-decoration: none;
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  display: inline-block;
  transition: background var(--duration-fast) var(--ease-premium);
}

#nav-header-c .nav-cta-btn:hover {
  background: var(--accent-dark);
}


/* ────────────────────────────────────────────────
   HERO EDITORIAL-SPLIT
   Grid 2 colunas desktop: copy esq + foto dir.
   Fundo: --bg (#FFFDF8) — editorial claro, não escuro.
   ──────────────────────────────────────────────── */

.hero-c {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding: var(--section-pad-y-hero-top) var(--section-pad-x) var(--section-pad-y-hero-bottom);
  background: var(--bg);
}

@media (min-width: 768px) {
  .hero-c {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
  }
}

@media (min-width: 1280px) {
  .hero-c {
    max-width: var(--section-max-full);
    margin: 0 auto;
    gap: 5rem;
  }
}

/* Coluna de copy */
.hero-c-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 560px;
}

.hero-c-eyebrow {
  margin-bottom: 1.25rem;
}

.hero-c-h1 {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 4.875rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--text);
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

.hero-c-lede {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--text-light);
  max-width: 42ch;
  margin: 0 0 1.75rem;
}

.hero-c-ctas {
  display: flex;
  gap: 1rem 1.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 2.25rem;
}

/* CTA primário — ambar sólido */
.btn-hero-primary {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 0.875rem 1.75rem;
  border-radius: 0.5rem;
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition:
    background var(--duration-normal) var(--ease-premium),
    transform 150ms var(--ease-premium);
}

.btn-hero-primary:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
}

.btn-hero-primary:active {
  transform: translateY(0);
}

/* CTA secundário — text-link com seta, SEM outline teal */
.btn-hero-ghost {
  display: inline-block;
  background: transparent;
  color: var(--text);
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  padding: 0.875rem 0.5rem;
  transition: color var(--duration-fast) var(--ease-premium);
}

.btn-hero-ghost:hover {
  color: var(--primary);
}

/* Stamp de números inline */
.hero-c-stamp {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--text-light);
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  margin-bottom: 1.25rem;
}

/* Tag local GMB — pill creme com borda whisper */
.tag-sand {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--secondary);
  color: var(--text);
  border: 1px solid var(--border-whisper);
  border-radius: 9999px;
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  letter-spacing: 0.005em;
  width: fit-content;
}

/* Coluna da foto */
.hero-c-photo {
  position: relative;
}

.hero-c-photo img,
.hero-c-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center;
  border-radius: 0.75rem;
  box-shadow: var(--shadow-deep);
  display: block;
}

/* Pull quote sticker — mobile: pousa no canto sup-direito (cityscape
   pela janela = único espaço sem pessoa). Desktop: jut-out à direita. */
.quote-sticker {
  position: absolute;
  top: -1.5rem;
  right: 0.5rem;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding: 0.75rem 0.9375rem;
  border-radius: 0.875rem;
  max-width: 8.75rem;
  font-family: 'Lora', 'Lora Fallback', serif;
  font-style: italic;
  font-size: 0.8125rem;
  line-height: 1.35;
  box-shadow: var(--shadow-deep);
  transform: rotate(2deg);
  z-index: 2;
}

@media (min-width: 768px) {
  .quote-sticker {
    top: -1.25rem;
    right: -1.125rem;
    max-width: 13rem;
    padding: 1rem 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.4;
  }
}

.quote-sticker .qs-text {
  margin: 0;
  display: block;
}

.quote-sticker .qs-who {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-style: normal;
  font-size: 0.6875rem;
  margin-top: 0.625rem;
  display: block;
  opacity: 0.78;
  letter-spacing: 0.02em;
}

/* Variante manifesto: 2 linhas de igual peso (Lora italic) */
.quote-sticker--manifesto .qs-who {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-style: italic;
  font-size: 0.9375rem;
  margin-top: 0.5rem;
  opacity: 1;
  letter-spacing: 0;
  color: var(--accent);
}


/* ────────────────────────────────────────────────
   CAMINHO — SCROLL-DRIVEN BRIDGE
   Grid 2 colunas: canvas esq, texto dir.
   Fundo escuro — bookend parcial antes do bento claro.
   Frames pintados no canvas acompanham o scroll.
   ──────────────────────────────────────────────── */

#travessia-c {
  background: var(--bg-dark);
  position: relative;
  overflow: hidden;
}

.travessia-c-inner {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .travessia-c-inner {
    grid-template-columns: 1fr 1fr;
    min-height: 60vh;
  }
}

.travessia-c-video {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
}

@media (min-width: 1024px) {
  .travessia-c-video {
    aspect-ratio: auto;
    min-height: 60vh;
  }
}

.travessia-c-video canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Vinheta cinematográfica — funde bordas do canvas no fundo escuro */
.travessia-c-video::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 80px 12px rgba(10, 61, 66, 0.55);
  pointer-events: none;
  z-index: 1;
}

.travessia-c-text {
  padding: var(--section-pad-y-default) var(--section-pad-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Parallax — GPU layer para transform suave */
@media (min-width: 1024px) {
  .travessia-c-text {
    will-change: transform;
  }
}

/* Scroll choreography — desktop: start hidden, JS reveals via style */
@media (min-width: 1024px) {
  .scroll-choreo {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1),
                transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .scroll-choreo.is-revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile: no choreography, text visible by default */
@media (max-width: 1023px) {
  .scroll-choreo {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ────────────────────────────────────────────────
   MÉTODO PIVA — BENTO ASSIMÉTRICO
   Grid: 1.3fr 1fr 1fr / auto auto
   P = feature (col 1, rows 1-2); I, V = col 2-3 row 1;
   A = cols 2-3 row 2 (wide).
   ──────────────────────────────────────────────── */

.metodo-c {
  padding: var(--section-pad-y-default) var(--section-pad-x);
  background: var(--bg-alt);
  max-width: var(--section-max-full);
  margin: 0 auto;
}

/* Lead 2 colunas — eyebrow+H2 esq, lede dir */
.metodo-c-lead {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: var(--section-content-gap);
}

@media (min-width: 1024px) {
  .metodo-c-lead {
    grid-template-columns: 5fr 4fr;
    gap: 5rem;
    align-items: end;
  }
}

/* Bento grid dos pilares */
.pillars-c {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  max-width: 1200px;
}

@media (min-width: 768px) {
  .pillars-c {
    grid-template-columns: 1.3fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1.25rem;
  }
}

/* Card base de cada pilar */
.pillar-c {
  background: var(--bg);
  border: 1px solid var(--border-whisper);
  border-radius: 1rem;
  padding: 2rem 1.875rem;
  box-shadow: var(--shadow-soft);
  transition:
    transform 240ms var(--ease-premium),
    box-shadow 240ms var(--ease-premium);
  display: flex;
  flex-direction: column;
}

.pillar-c:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-deep);
}

/* P feature: col 1, rows 1-2 */
.pillar-c--feature {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

/* A wide: cols 2-3, row 2 */
.pillar-c--wide {
  grid-column: 2 / 4;
  grid-row: 2 / 3;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.5rem;
}

/* Layout interno do card wide */
.pillar-c-wide-text {
  flex: 1;
}

/* Linha com letra + meta */
.pillar-c-row {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  margin-bottom: 0.875rem;
}

/* Letra âncora — base */
.pillar-letter {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-weight: 500;
  font-size: 3.5rem;
  line-height: 0.88;
  color: var(--primary);
  letter-spacing: -0.03em;
  display: block;
  flex-shrink: 0;
}

/* Letra gigante para o pilar P */
.pillar-letter--feature {
  font-size: 7.5rem;
  line-height: 0.88;
}

@media (max-width: 767px) {
  .pillar-letter--feature {
    font-size: 5rem;
  }
}

.pillar-c-meta {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-light);
  padding-top: 0.25rem;
}

/* Título do pilar */
.pillar-c-title {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
  color: var(--text);
}

.pillar-c--feature .pillar-c-title {
  font-size: 1.875rem;
  margin-bottom: 0.875rem;
}

/* Descrição do pilar */
.pillar-c-desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-light);
  margin: 0;
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
}

.pillar-c--feature .pillar-c-desc {
  font-size: 1.0625rem;
  max-width: 40ch;
}

/* Pills no rodapé do pilar feature */
.pillar-c-pills {
  margin-top: auto;
  padding-top: 1.5rem;
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.pillar-c--feature .pillar-c-pills {
  border-top: 1px solid var(--border-whisper);
  padding-top: 1.375rem;
}

/* Ajustes mobile: todos 1 coluna */
@media (max-width: 767px) {
  .pillar-c--feature {
    grid-column: auto;
    grid-row: auto;
  }

  .pillar-c--wide {
    grid-column: auto;
    grid-row: auto;
    flex-direction: column;
    gap: 0;
  }
}


/* ────────────────────────────────────────────────
   F.R.E.I.O.S. LISTA EDITORIAL
   Grid 2 colunas: lead esq, lista dir.
   Fundo: --bg (#FFFDF8).
   ──────────────────────────────────────────────── */

.freios-c {
  padding: var(--section-pad-y-default) var(--section-pad-x);
  background: var(--bg);
  max-width: var(--section-max-full);
  margin: 0 auto;
}

.freios-c-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  max-width: 1200px;
}

@media (min-width: 1024px) {
  .freios-c-inner {
    grid-template-columns: 1fr 1.15fr;
    gap: 5rem;
    align-items: flex-start;
  }
}

.freios-c-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.freio-c-item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1.125rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border-whisper);
  align-items: start;
}

.freio-c-item--last,
.freio-c-item:last-child {
  border-bottom: none;
}

/* Letra âncora ambar */
.freio-letter {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-weight: 500;
  font-size: 2.125rem;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.02em;
  display: block;
  padding-top: 0.125rem;
}

.freio-title {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.25rem;
  letter-spacing: 0.005em;
  display: block;
}

.freio-desc {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-light);
  margin: 0;
  display: block;
}


/* ────────────────────────────────────────────────
   MANIFESTO DARK
   Fundo bg-dark. Aspa gigante col 1, blockquote col 2.
   ──────────────────────────────────────────────── */

.manifesto-c {
  padding: var(--section-pad-y-default) var(--section-pad-x);
  background: var(--bg-dark);
  color: var(--text-on-dark);
  position: relative;
  overflow: hidden;
}

.manifesto-c-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .manifesto-c-inner {
    grid-template-columns: 1fr 1.3fr;
    gap: 5rem;
    align-items: center;
  }
}

.manifesto-c-mark {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.manifesto-eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 237, 227, 0.55);
  margin-bottom: 0.875rem;
  font-weight: 500;
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  display: block;
}

/* Aspa gigante decorativa — ambar opacity .7 */
.manifesto-c-ornament {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-weight: 400;
  font-size: 9rem;
  line-height: 0.55;
  color: var(--accent);
  opacity: 0.7;
  display: block;
  user-select: none;
}

@media (min-width: 768px) {
  .manifesto-c-ornament {
    font-size: 12.5rem;
  }
}

.manifesto-c-quote {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.625rem);
  line-height: 1.22;
  color: var(--text-on-dark);
  display: block;
  margin: 0 0 1.75rem;
  letter-spacing: -0.012em;
  max-width: 22ch;
  text-wrap: balance;
  border: 0;
  padding: 0;
  quotes: none;
}

.manifesto-c-sig {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: 0.875rem;
  color: rgba(245, 237, 227, 0.72);
  letter-spacing: 0.01em;
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
}

.manifesto-c-dash {
  display: inline-block;
  width: 2.5rem;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}


/* ────────────────────────────────────────────────
   PROGRAMAS — CARDS COM BARRA DE ACENTO
   ──────────────────────────────────────────────── */

#programas-c {
  background: var(--bg-alt);
  padding: var(--section-pad-y-default) var(--section-pad-x);
}

.programas-c-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: var(--section-content-gap);
}

@media (min-width: 768px) {
  .programas-c-grid {
    grid-template-columns: 5fr 4fr 4fr;
    gap: 0;
  }
}

.programa-c-card {
  padding: 2rem 0;
  transition: transform var(--duration-normal) var(--ease-premium);
  position: relative;
}

@media (min-width: 768px) {
  .programa-c-card {
    padding: 2.5rem 2.5rem 2.5rem 0;
    border-right: 1px solid var(--border-whisper);
  }

  .programa-c-card:last-child {
    border-right: none;
  }

  .programa-c-card + .programa-c-card {
    padding-left: 2.5rem;
  }
}

.programa-c-card:hover {
  transform: translateY(-2px);
}

.programa-c-accent-bar {
  height: 2px;
  width: 2.5rem;
  margin-bottom: 1.5rem;
  transition: width var(--duration-normal) var(--ease-premium);
}

.programa-c-card:hover .programa-c-accent-bar {
  width: 4rem;
}

.programa-c-title {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-weight: 600;
  font-size: clamp(1.125rem, 1.75vw, 1.5rem);
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 0.875rem;
  line-height: 1.2;
}

.programa-c-desc {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.9375rem;
  color: var(--text-light);
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.programa-c-link {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition:
    gap var(--duration-fast) var(--ease-spring),
    color var(--duration-fast) var(--ease-premium);
}

.programa-c-link:hover {
  color: var(--primary-dark);
  gap: 0.625rem;
}


/* ────────────────────────────────────────────────
   SERVIÇOS
   ──────────────────────────────────────────────── */

#servicos-c {
  background: var(--bg);
  padding: var(--section-pad-y-default) var(--section-pad-x);
}

.servicos-c-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .servicos-c-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
  }
}

.servico-c {
  padding: 0;
}

@media (min-width: 640px) {
  .servico-c {
    padding: 0 2.5rem 0 0;
    border-right: 1px solid var(--border-whisper);
  }

  .servico-c:last-child {
    border-right: none;
    padding-right: 0;
    padding-left: 2.5rem;
  }

  .servico-c:nth-child(2) {
    padding-left: 2.5rem;
  }
}

.servico-c-title {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--text);
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

.servico-c-desc {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 1.0625rem;
  color: var(--text-light);
  line-height: 1.7;
}

/* ─── Grid de matérias (sub-bloco do card "Aulas particulares") ─── */
.materias-grid {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 0.5rem;
}

@media (min-width: 480px) {
  .materias-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 768px) {
  .materias-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem 0.5rem;
  }
}

.materia-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text);
  padding: 0.25rem;
  border-radius: 0.5rem;
  transition: transform var(--duration-normal) var(--ease-premium);
}

.materia-item:hover,
.materia-item:focus-visible {
  transform: translateY(-2px);
}

.materia-icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--secondary);
  border: 1px solid var(--border-whisper);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
  transition:
    background var(--duration-normal) var(--ease-premium),
    color var(--duration-normal) var(--ease-premium),
    box-shadow var(--duration-normal) var(--ease-premium),
    border-color var(--duration-normal) var(--ease-premium);
}

.materia-icon-circle svg {
  width: 28px;
  height: 28px;
  display: block;
}

.materia-item:hover .materia-icon-circle,
.materia-item:focus-visible .materia-icon-circle {
  background: var(--primary);
  color: var(--secondary);
  border-color: var(--primary);
  box-shadow: var(--shadow-soft);
}

.materia-label {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.015em;
  color: var(--text);
  line-height: 1.2;
  text-align: center;
  transition: color var(--duration-normal) var(--ease-premium);
}

.materia-item:hover .materia-label,
.materia-item:focus-visible .materia-label {
  color: var(--primary);
}

@media (min-width: 768px) {
  .materia-icon-circle {
    width: 60px;
    height: 60px;
  }
  .materia-icon-circle svg {
    width: 30px;
    height: 30px;
  }
}

/* ─── Chips de colégios (sub-bloco do card "Vestibulinho") ─── */
.vestib-chips {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.vestib-chip {
  display: inline-block;
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.015em;
  color: var(--primary);
  text-decoration: none;
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--border-whisper);
  border-radius: 9999px;
  background: var(--secondary);
  transition:
    background var(--duration-normal) var(--ease-premium),
    color var(--duration-normal) var(--ease-premium),
    border-color var(--duration-normal) var(--ease-premium),
    transform var(--duration-fast) var(--ease-premium);
}

.vestib-chip:hover,
.vestib-chip:focus-visible {
  background: var(--primary);
  color: var(--secondary);
  border-color: var(--primary);
  transform: translateY(-1px);
}

/* Botão outline teal */
.btn-outline-primary {
  display: inline-block;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.25rem;
  text-decoration: none;
  transition:
    background var(--duration-normal) var(--ease-premium),
    color var(--duration-normal) var(--ease-premium);
  margin-top: 3rem;
}

.btn-outline-primary:hover {
  background: var(--primary);
  color: #fff;
}


/* ────────────────────────────────────────────────
   BRUNO PORTRAIT — FULL-BLEED EDITORIAL
   ──────────────────────────────────────────────── */

#bruno-c {
  background: var(--bg);
  padding: 0;
  overflow: hidden;
}

.bruno-c-inner {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .bruno-c-inner {
    grid-template-columns: 5fr 7fr;
    min-height: 80vh;
  }
}

.bruno-c-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  margin: 0;
}

@media (min-width: 1024px) {
  .bruno-c-image {
    aspect-ratio: auto;
  }
}

.bruno-c-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Gradiente sutil imagem → texto */
.bruno-c-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    transparent 70%,
    rgba(255, 253, 248, 0.6) 100%
  );
}

@media (max-width: 1023px) {
  .bruno-c-image::after {
    background: linear-gradient(
      to bottom,
      transparent 60%,
      rgba(255, 253, 248, 0.8) 100%
    );
  }
}

.bruno-c-text {
  padding: var(--section-pad-y-default) var(--section-pad-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bruno-c-closing-phrase {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-style: italic;
  font-size: clamp(1.125rem, 1.75vw, 1.5rem);
  color: var(--primary);
  line-height: 1.45;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

/* Bruno — DARK variant (final homepage decision) */
.bruno-dark {
  background: var(--bg-dark) !important;
}

.bruno-dark .eyebrow-c {
  color: rgba(0, 137, 148, 0.85);
}

.bruno-dark .bruno-c-text h2 {
  color: var(--secondary);
}

.bruno-dark .bruno-c-text p {
  color: rgba(245, 237, 227, 0.85);
}

.bruno-dark .bruno-c-text strong {
  color: var(--secondary);
}

.bruno-dark .bruno-c-closing-phrase {
  color: var(--accent);
  border-top-color: rgba(245, 237, 227, 0.15);
}

.bruno-dark .bruno-c-image::after {
  background: linear-gradient(
    to right,
    transparent 60%,
    rgba(10, 61, 66, 0.85) 100%
  );
}

@media (max-width: 1023px) {
  .bruno-dark .bruno-c-image::after {
    background: linear-gradient(
      to bottom,
      transparent 50%,
      rgba(10, 61, 66, 0.9) 100%
    );
  }
}


/* ────────────────────────────────────────────────
   TRANSFORMAÇÕES — MONOGRAM CARDS
   Grid 3 colunas desktop. Avatar inicial em vez de foto.
   ──────────────────────────────────────────────── */

.transf-c {
  padding: var(--section-pad-y-default) var(--section-pad-x);
  background: var(--bg);
}

.transf-c-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.375rem;
  max-width: 1200px;
  margin-top: 0.75rem;
}

@media (min-width: 768px) {
  .transf-c-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Card depoimento com monogram */
.card-depoimento.card-depoimento--monogram {
  background: var(--bg);
  border: 1px solid var(--border-whisper);
  border-radius: 1rem;
  padding: 1.75rem 1.875rem;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  transition:
    transform 240ms var(--ease-premium),
    box-shadow 240ms var(--ease-premium);
}

.card-depoimento--monogram:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-deep);
}

.card-depoimento--monogram blockquote {
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dep-c-quote {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
  flex: 1;
  quotes: none;
}

.dep-c-who {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-whisper);
  margin-top: auto;
}

.avatar-monogram {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: var(--secondary);
  border: 1px solid var(--border-whisper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lora', 'Lora Fallback', serif;
  font-weight: 600;
  color: var(--primary-dark);
  font-size: 1rem;
  flex-shrink: 0;
}

.dep-c-who cite strong {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text);
  font-style: normal;
  display: block;
}

.dep-c-who > div > span,
.dep-c-who span:not(.avatar-monogram) {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.75rem;
  color: var(--text-light);
  display: block;
}

/* Barra de mídia integrada */
.media-bar-c {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  padding: 2.5rem 0 0;
  border-top: 1px solid var(--border-whisper);
  margin-top: 3.5rem;
}

.media-bar-c-label {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
  opacity: 0.65;
}

.media-bar-c span:not(.media-bar-c-label) {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-size: 1rem;
  color: var(--text-light);
  opacity: 0.45;
  letter-spacing: 0.01em;
  transition: opacity var(--duration-fast) var(--ease-premium);
}

.media-bar-c span:not(.media-bar-c-label):hover {
  opacity: 0.7;
}


/* ────────────────────────────────────────────────
   NEWSLETTER BIG — large newsletter with form + benefits
   ──────────────────────────────────────────────── */

#newsletter-big {
  background: var(--secondary);
  padding: var(--section-pad-y-default) var(--section-pad-x);
}

.newsletter-big-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto;
  align-items: center;
}

@media (min-width: 1024px) {
  .newsletter-big-inner {
    grid-template-columns: 2fr 3fr;
    gap: 5rem;
  }
}

.newsletter-big-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1023px) {
  .newsletter-big-visual {
    display: none;
  }
}

.newsletter-big-illustration {
  color: var(--primary);
}

.newsletter-input {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg);
  color: var(--text);
  transition: border-color 200ms var(--ease-premium);
}

.newsletter-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 137, 148, 0.12);
}

.btn-newsletter-submit {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-on-dark);
  background: var(--text);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-premium);
}

.btn-newsletter-submit:hover {
  background: var(--primary-dark);
}

.newsletter-benefits {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.newsletter-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.9375rem;
  color: var(--text-light);
  line-height: 1.5;
}


/* ────────────────────────────────────────────────
   TRÊS MOMENTOS — editorial photo grid
   ──────────────────────────────────────────────── */

#tres-momentos {
  background: var(--bg);
  padding: var(--section-pad-y-default) var(--section-pad-x);
}

.tres-momentos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: var(--section-content-gap);
}

@media (min-width: 768px) {
  .tres-momentos-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.momento figure {
  margin: 0 0 1.25rem;
  overflow: hidden;
  border-radius: 0.75rem;
}

.momento figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 500ms var(--ease-premium);
}

@media (max-width: 767px) {
  .momento figure img {
    aspect-ratio: 16/9;
  }
}

.momento:hover figure img {
  transform: scale(1.03);
}

.momento .eyebrow-c {
  margin-bottom: 0.75rem;
}

.momento-title {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 0.625rem;
}

.momento-desc {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 1.0625rem;
  color: var(--text-light);
  line-height: 1.65;
}

.momento-desc em {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-style: italic;
  color: var(--text);
}

.momentos-closing {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 1rem;
  color: var(--text-light);
  line-height: 1.7;
  max-width: 55ch;
  margin-top: 3.5rem;
}


/* ────────────────────────────────────────────────
   MICRO-CASES — 3 frases granulares (após hero, antes da Travessia)
   Resposta ao pedido de "show don't tell" sem tabela antes/depois.
   ──────────────────────────────────────────────── */

#micro-cases {
  background: var(--bg-alt);
  padding: var(--section-pad-y-dense) var(--section-pad-x);
}

.micro-cases-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.micro-cases-eyebrow {
  text-align: center;
  margin-bottom: 0.75rem;
}

.micro-cases-h2 {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 auto 3rem;
  max-width: 32ch;
  text-align: center;
}

.micro-cases-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .micro-cases-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }
}

.micro-case {
  background: var(--bg);
  padding: 1.875rem 1.75rem 1.5rem;
  border-radius: 0.75rem;
  border-top: 3px solid var(--primary);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 11.5rem;
  box-shadow: var(--shadow-soft, 0 1px 2px rgba(28, 28, 28, 0.04), 0 8px 24px rgba(28, 28, 28, 0.04));
  transition: transform 300ms var(--ease-premium), box-shadow 300ms var(--ease-premium);
}

.micro-case:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(28, 28, 28, 0.04), 0 12px 32px rgba(28, 28, 28, 0.06);
}

.micro-case-quote {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-style: italic;
  font-size: 1.1875rem;
  line-height: 1.45;
  color: var(--text);
  margin: 0 0 1.5rem;
  letter-spacing: -0.005em;
}

.micro-case-quote::before {
  content: "\201C";
  display: inline;
}

.micro-case-quote::after {
  content: "\201D";
  display: inline;
}

.micro-case-who {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.9375rem;
  color: var(--text-light);
  line-height: 1.4;
  margin: 0;
}

.micro-case-context {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ────────────────────────────────────────────────
   FREIOS SILENCIOSOS — diagnóstico cultural
   Entre #micro-cases e #travessia-c. 2 colunas: senso comum × PIVA.
   ──────────────────────────────────────────────── */

#freios-silenciosos {
  background: var(--bg);
  padding: var(--section-pad-y-default) var(--section-pad-x);
}

.fs-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.fs-head {
  max-width: 760px;
  margin-bottom: 3.5rem;
}

.fs-h2 {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--text);
  margin: 0.875rem 0 1.125rem;
  max-width: 24ch;
}

.fs-h2 em {
  font-style: italic;
  color: var(--accent-dark);
  font-weight: 500;
}

.fs-lede {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-style: italic;
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--text-light);
  max-width: 56ch;
  margin: 0;
}

.fs-grid {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--bg);
  border: 1px solid var(--border-whisper, rgba(28, 28, 28, 0.08));
  border-radius: 1.125rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(28, 28, 28, 0.04), 0 8px 24px rgba(28, 28, 28, 0.04);
}

@media (min-width: 768px) {
  .fs-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.fs-col {
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
}

.fs-col-left {
  background: var(--bg-alt);
}

@media (min-width: 768px) {
  .fs-col-left {
    border-right: 1px solid var(--border-whisper, rgba(28, 28, 28, 0.08));
  }
}

@media (max-width: 767px) {
  .fs-col-left {
    border-bottom: 1px solid var(--border-whisper, rgba(28, 28, 28, 0.08));
  }
}

.fs-tag {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.fs-col-left .fs-tag {
  color: var(--text-light);
}

.fs-col-right .fs-tag {
  color: var(--primary);
}

.fs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.fs-list li {
  padding: 1.125rem 0;
  border-bottom: 1px dashed var(--border-whisper, rgba(28, 28, 28, 0.08));
  font-family: 'Lora', 'Lora Fallback', serif;
  font-size: 1.125rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.fs-list li:first-child {
  padding-top: 0;
}

.fs-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.fs-col-left .fs-list li {
  color: #857a6a;
  font-style: italic;
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(133, 122, 106, 0.4);
}

.fs-col-right .fs-list li {
  color: var(--text);
  font-weight: 500;
}

.fs-col-right .fs-list li strong {
  font-style: italic;
  color: var(--primary-dark);
  font-weight: 500;
}


/* ────────────────────────────────────────────────
   ANTES E DEPOIS — tabela editorial 2-col
   Entre #freios-c e #manifesto-c. Footer com frase verbatim do Bruno.
   ──────────────────────────────────────────────── */

#antes-depois {
  background: var(--bg);
  padding: var(--section-pad-y-default) var(--section-pad-x);
}

.antes-depois-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.antes-depois-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 3rem;
  align-items: flex-end;
}

@media (min-width: 768px) {
  .antes-depois-head {
    grid-template-columns: 1fr 1.3fr;
    gap: 4rem;
  }
}

.antes-depois-h2 {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--text);
  margin: 0.875rem 0 0;
  max-width: 22ch;
}

.antes-depois-h2 em {
  font-style: italic;
  color: var(--primary);
  font-weight: 500;
}

.antes-depois-lede {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-style: italic;
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--text-light);
  max-width: 52ch;
  margin: 0;
}

.antes-depois-table {
  background: var(--bg);
  border: 1px solid var(--border-whisper, rgba(28, 28, 28, 0.08));
  border-radius: 1.125rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(28, 28, 28, 0.04), 0 8px 24px rgba(28, 28, 28, 0.04);
}

.ad-row {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--border-whisper, rgba(28, 28, 28, 0.08));
  align-items: center;
}

@media (min-width: 768px) {
  .ad-row {
    grid-template-columns: 1fr 1fr;
    min-height: 6rem;
  }
}

.ad-row:last-child {
  border-bottom: 0;
}

.ad-row-head {
  background: var(--bg-alt);
}

@media (min-width: 768px) {
  .ad-row-head {
    min-height: 3.25rem;
  }
}

.ad-cell {
  padding: 1.5rem 1.875rem;
  font-family: 'Lora', 'Lora Fallback', serif;
  font-size: 1.0625rem;
  line-height: 1.45;
  letter-spacing: -0.005em;
}

@media (min-width: 768px) {
  .ad-cell {
    border-right: 1px solid var(--border-whisper, rgba(28, 28, 28, 0.08));
  }
  .ad-cell:last-child {
    border-right: 0;
  }
  /* Seta de transformação é só mobile; no desktop a tabela 2-col fica intacta */
  .ad-arrow {
    display: none;
  }
}

@media (max-width: 767px) {
  /* Mobile: cada par vira "antes apagado → seta teal → card teal".
     Desktop (>=768px) permanece a tabela de 2 colunas, intacto. */
  .antes-depois-table {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  /* especificidade dupla (.ad-row.ad-row-head) pra vencer o .ad-row abaixo, sem depender de ordem */
  .ad-row.ad-row-head {
    display: none;
  }

  .ad-row {
    display: block;
    border-bottom: 0;
    margin-bottom: 1.5rem;
  }
  .ad-row:last-child {
    margin-bottom: 0;
  }

  /* "Antes": legenda apagada acima do card */
  .ad-before {
    background: transparent;
    border: 0;
    padding: 0 0.15rem;
    margin: 0 0 0.55rem;
    font-size: 0.95rem;
    line-height: 1.35;
    color: #9a9082;
  }

  /* Seta teal cravada na borda superior do card */
  .ad-arrow {
    display: flex;
    justify-content: center;
    margin-bottom: -0.98rem;
    position: relative;
    z-index: 2;
  }
  .ad-arrow span {
    width: 1.95rem;
    height: 1.95rem;
    border-radius: 999px;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 11px rgba(0, 137, 148, 0.3);
    border: 2px solid var(--bg);
  }
  .ad-arrow svg {
    width: 0.9rem;
    height: 0.9rem;
    stroke: #fff;
  }

  /* "Depois": card teal elevado */
  .ad-after {
    background: rgba(0, 137, 148, 0.065);
    border: 1px solid rgba(0, 137, 148, 0.16);
    border-left: 3px solid var(--primary);
    border-radius: 14px;
    padding: 1.55rem 1.25rem 1.1rem;
    box-shadow: 0 7px 18px rgba(0, 137, 148, 0.1);
  }
}

.ad-row-head .ad-cell {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.ad-row-head .ad-h-after {
  color: var(--primary);
}

.ad-before {
  background: var(--bg-alt);
  color: var(--text-light);
  font-style: italic;
  font-weight: 400;
}

.ad-after {
  color: var(--text);
  font-weight: 500;
}

.ad-after strong {
  font-style: italic;
  color: var(--primary-dark);
  font-weight: 500;
}

.antes-depois-foot {
  margin-top: 2.25rem;
  padding: 1.75rem 2.25rem;
  background: var(--secondary);
  border: 1px solid var(--border-whisper, rgba(28, 28, 28, 0.08));
  border-radius: 0.875rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  align-items: center;
}

@media (min-width: 768px) {
  .antes-depois-foot {
    grid-template-columns: auto 1fr;
    gap: 2rem;
  }
}

.antes-depois-foot-mark {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-weight: 500;
  font-size: 3.25rem;
  line-height: 0.7;
  color: var(--accent-dark);
  letter-spacing: -0.02em;
  margin: 0;
}

.antes-depois-foot-quote {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-weight: 500;
  font-size: 1.1875rem;
  line-height: 1.45;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.005em;
}

.antes-depois-foot-quote em {
  font-style: italic;
  color: var(--accent-dark);
  font-weight: 500;
}

.antes-depois-foot-quote strong {
  font-style: italic;
  color: var(--primary-dark);
  font-weight: 600;
}


/* ────────────────────────────────────────────────
   VISTO EM — infinite marquee de logos de mídia
   ──────────────────────────────────────────────── */

#visto-em {
  background: var(--bg-alt);
  padding: var(--section-pad-y-dense) 0;
  overflow: hidden;
}

@media (max-width: 767px) {
  #visto-em {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

.midia-marquee-wrapper {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.midia-marquee {
  display: flex;
  align-items: center;
  gap: 4rem;
  animation: marquee-scroll 30s linear infinite;
  width: max-content;
}

.midia-logo {
  height: 4rem;
  width: auto;
  flex-shrink: 0;
  user-select: none;
  transition: opacity var(--duration-fast) var(--ease-premium);
}

.midia-logo:hover {
  opacity: 0.85;
}

/* Label "Como visto em" — 18px, alinhado a esquerda dentro do wrapper 1280 */
#visto-em .eyebrow-c {
  font-size: 1.125rem;
  text-align: left;
  margin-bottom: 2.5rem;
}

@keyframes marquee-scroll {
  to { transform: translateX(-50%); }
}

/* Mobile: logos menores e marquee mais lento (overrides depois das bases) */
@media (max-width: 767px) {
  .midia-logo {
    height: 3.5rem;
  }
  .midia-marquee {
    animation-duration: 50s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .midia-marquee {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    width: auto;
    padding: 0 1.5rem;
  }
  .midia-marquee-wrapper {
    mask-image: none;
    -webkit-mask-image: none;
  }
}


/* ────────────────────────────────────────────────
   BLOG — editorial grid com featured card
   ──────────────────────────────────────────────── */

#blog {
  background: var(--bg);
  padding: var(--section-pad-y-default) var(--section-pad-x);
}

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: var(--section-content-gap);
}

@media (min-width: 1024px) {
  .blog-grid {
    grid-template-columns: 1fr 380px;
    gap: 2rem;
    align-items: stretch;
  }
  .blog-list > *:last-child {
    margin-top: auto;
  }
}

/* Featured article — dark card */
.blog-featured-card {
  background: var(--bg-dark);
  border-radius: 1rem;
  overflow: hidden;
}

.blog-featured-image {
  position: relative;
  aspect-ratio: 16/9;
  background: #0E4A50;
  overflow: hidden;
}

.blog-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  display: block;
}

.blog-featured-body {
  padding: 2rem 2.25rem;
}

.blog-featured-eyebrow {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: 1rem;
  display: block;
}

.blog-featured-title {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--secondary);
  margin-bottom: 1rem;
}

.blog-featured-desc {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.9375rem;
  color: rgba(245, 237, 227, 0.7);
  line-height: 1.6;
  max-width: 52ch;
  margin-bottom: 1.5rem;
}

.blog-featured-link {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: rgba(245, 237, 227, 0.8);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-bottom: 1px solid rgba(245, 237, 227, 0.3);
  padding-bottom: 0.125rem;
  transition:
    color var(--duration-fast) var(--ease-premium),
    border-color var(--duration-fast) var(--ease-premium);
}

.blog-featured-link:hover {
  color: var(--secondary);
  border-color: var(--secondary);
}

/* Article list sidebar */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.blog-list-item {
  background: var(--bg);
  border-radius: 0.75rem;
  overflow: hidden;
  display: flex;
  border: 1px solid var(--border-whisper);
  transition: box-shadow var(--duration-fast) var(--ease-premium);
}

.blog-list-item:hover {
  box-shadow: var(--shadow-soft);
}

.blog-list-thumb {
  width: 6rem;
  flex-shrink: 0;
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.blog-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-list-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-list-meta {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.75rem;
  color: var(--text-light);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.blog-list-title {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text);
  margin: 0;
}

.blog-list-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-premium);
}

.blog-list-title a:hover {
  color: var(--primary);
}

.blog-cta-link {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 0.5rem;
  transition:
    color var(--duration-fast) var(--ease-premium),
    gap var(--duration-fast) var(--ease-spring);
}

.blog-cta-link:hover {
  color: var(--primary-dark);
  gap: 0.625rem;
}


/* ────────────────────────────────────────────────
   NEWSLETTER — STRIP EDITORIAL
   ──────────────────────────────────────────────── */

#newsletter-c {
  background: var(--bg);
  padding: var(--section-pad-y-dense) var(--section-pad-x);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.newsletter-c-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  max-width: 1280px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .newsletter-c-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
  }
}

.newsletter-c-text {
  flex: 1;
}

.newsletter-c-title {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 0.25rem;
}

.newsletter-c-sub {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.8125rem;
  color: var(--text-light);
  margin: 0;
}

.btn-newsletter {
  display: inline-block;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.25rem;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--duration-normal) var(--ease-premium),
    color var(--duration-normal) var(--ease-premium);
}

.btn-newsletter:hover {
  background: var(--primary);
  color: #fff;
}


/* ────────────────────────────────────────────────
   FAQ — ACORDEÃO EDITORIAL
   ──────────────────────────────────────────────── */

#faq-c {
  background: var(--secondary);
  padding: var(--section-pad-y-default) var(--section-pad-x);
}

.faq-c-wrap {
  max-width: 880px;
  margin: 0 auto;
}

.faq-c-item {
  border-top: 1px solid rgba(28, 28, 28, 0.15);
}

.faq-c-item:last-child {
  border-bottom: 1px solid rgba(28, 28, 28, 0.15);
}

.faq-c-toggle {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
  padding: 1.5rem 0;
  cursor: pointer;
  background: none;
  border: none;
}

.faq-c-question {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--text);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.faq-c-icon {
  width: 1.375rem;
  height: 1.375rem;
  flex-shrink: 0;
  color: var(--primary);
  margin-top: 0.125rem;
  transition: transform var(--duration-normal) var(--ease-premium);
}

.faq-c-item.is-open .faq-c-icon {
  transform: rotate(45deg);
}

.faq-c-answer {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 400ms var(--ease-premium),
    opacity 250ms var(--ease-premium);
  opacity: 0;
}

.faq-c-item.is-open .faq-c-answer {
  max-height: 600px;
  opacity: 1;
}

.faq-c-answer-inner {
  padding-bottom: 1.75rem;
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 1.0625rem;
  color: var(--text-light);
  line-height: 1.7;
  max-width: 65ch;
}

.faq-c-answer-inner strong {
  color: var(--text);
  font-weight: 600;
}


/* ────────────────────────────────────────────────
   CTA FINAL — BOOKEND (bg-dark)
   ──────────────────────────────────────────────── */

#cta-final-c {
  background: var(--bg-dark);
  padding: var(--section-pad-y-hero-top) var(--section-pad-x);
  position: relative;
  overflow: hidden;
}

/* Grain overlay sutil */
#cta-final-c::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.cta-final-c-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  text-align: center;
  margin: 0 auto;
}

.cta-final-c-eyebrow {
  color: rgba(0, 137, 148, 0.85);
  margin-bottom: 1.25rem;
}

.cta-final-c-h2 {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--secondary);
  margin-bottom: 0;
}

.cta-final-c-h2 em {
  font-style: italic;
  font-weight: 400;
  color: rgba(245, 237, 227, 0.75);
}

.cta-final-c-sub {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-style: italic;
  font-size: 1.1875rem;
  color: rgba(245, 237, 227, 0.8);
  max-width: 50ch;
  margin: 1.25rem auto 2rem;
  line-height: 1.5;
  text-wrap: balance;
  display: block;
}

.btn-cta-final {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 1rem 2.25rem;
  border-radius: 0.25rem;
  text-decoration: none;
  transition:
    background var(--duration-normal) var(--ease-premium),
    transform 100ms;
}

.btn-cta-final:hover {
  background: var(--accent-dark);
}

.btn-cta-final:active {
  transform: translateY(1px);
}

.cta-final-c-micro {
  margin-top: 1.25rem;
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.8125rem;
  color: rgba(245, 237, 227, 0.45);
  display: block;
}


/* ────────────────────────────────────────────────
   FOOTER
   ──────────────────────────────────────────────── */

#footer-c {
  background: var(--text);
  padding: 4.5rem 1.25rem 2.5rem;
}

@media (min-width: 768px) {
  #footer-c {
    padding: 5rem 3rem 2.5rem;
  }
}

.footer-c-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-bottom: 3.5rem;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .footer-c-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3.5rem;
  }
}

.footer-c-brand-name {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--secondary);
  letter-spacing: -0.01em;
  display: block;
  margin-bottom: 0.375rem;
}

.footer-c-brand-sub {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 237, 227, 0.45);
  display: block;
  margin-bottom: 1rem;
}

.footer-c-tagline {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-style: italic;
  font-size: 0.9375rem;
  color: rgba(245, 237, 227, 0.65);
  line-height: 1.5;
  max-width: 24ch;
  margin: 0;
}

.footer-c-col-title {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 237, 227, 0.4);
  margin-bottom: 1.25rem;
}

.footer-c-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-c-links a {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.875rem;
  color: rgba(245, 237, 227, 0.7);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-premium);
}

.footer-c-links a:hover {
  color: var(--secondary);
}

address.footer-c-address {
  font-style: normal;
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.875rem;
  color: rgba(245, 237, 227, 0.7);
  line-height: 1.75;
}

address.footer-c-address a {
  color: rgba(245, 237, 227, 0.7);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-premium);
}

address.footer-c-address a:hover {
  color: var(--primary);
}

.footer-c-hours {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.75rem;
  color: rgba(245, 237, 227, 0.4);
  line-height: 1.7;
  margin-top: 0.75rem;
}

.footer-c-social {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-c-social a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.875rem;
  color: rgba(245, 237, 227, 0.7);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-premium);
}

.footer-c-social a:hover {
  color: var(--secondary);
}

.footer-c-bar {
  padding-top: 1.75rem;
  border-top: 1px solid rgba(245, 237, 227, 0.1);
  max-width: 1280px;
  margin: 0 auto;
}

.footer-c-copy {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.75rem;
  color: rgba(245, 237, 227, 0.35);
  margin: 0;
}


/* ────────────────────────────────────────────────
   SCROLL REVEAL
   JS adiciona .js-reveal-ready ao <body> para ativar.
   Sem JS: todos visíveis por padrão.
   ──────────────────────────────────────────────── */

.js-reveal-ready .reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 700ms var(--ease-out-soft),
    transform 700ms var(--ease-out-soft);
  will-change: opacity, transform;
}

.js-reveal-ready .reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delay acumulado via custom property --i */
.js-reveal-ready .reveal-stagger {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 600ms var(--ease-out-soft),
    transform 600ms var(--ease-out-soft);
  transition-delay: calc(var(--i, 0) * 80ms);
  will-change: opacity, transform;
}

.js-reveal-ready .reveal-stagger.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ────────────────────────────────────────────────
   PREFERS-REDUCED-MOTION
   ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .js-reveal-ready .reveal-up,
  .js-reveal-ready .reveal-stagger {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .quote-sticker {
    transform: none;
  }

  .pillar-c,
  .card-depoimento--monogram,
  .programa-c-card {
    transition: none;
  }

  .pillar-c:hover,
  .card-depoimento--monogram:hover,
  .programa-c-card:hover {
    transform: none;
  }

  .pillar-c:hover,
  .card-depoimento--monogram:hover {
    box-shadow: var(--shadow-deep);
  }

  .faq-c-answer {
    transition: none;
  }

  .faq-c-icon {
    transition: none;
  }

  /* Marquee: parado por acessibilidade */
  .midia-marquee {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    width: auto;
    padding: 0 1.5rem;
  }

  .midia-marquee-wrapper {
    mask-image: none;
    -webkit-mask-image: none;
  }

  /* Foto dos momentos: sem zoom */
  .momento figure img {
    transition: none;
  }
}

/* ============================================================
   #programas-c BENTO LAYOUT (mai/2026)
   Refatoração editorial assimétrica baseada em proposta FRENTI.
   Substitui grid 3-col simétrico por feature card + 2 menores.
   Ver: project_homepage_programas_c_state.md
   ============================================================ */

#programas-c { --rust: #9C5247; }

.programas-c-intro-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 5rem;
  align-items: flex-end;
}

.programas-c-meta {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-whisper);
  margin-top: 3rem;
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
  font-weight: 500;
}

.meta-ix { display: flex; gap: 0.625rem; align-items: baseline; }

.meta-num {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--text);
  letter-spacing: -0.01em;
  text-transform: none;
}

.programas-c-bento {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.375rem;
  margin-top: 3rem;
}

.programa-bento {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border-whisper);
  border-radius: 1.125rem;
  padding: 2.25rem;
  box-shadow: var(--shadow-warm);
  transition: transform 280ms var(--ease-premium), box-shadow 280ms var(--ease-premium);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.programa-bento:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-warm-hover);
}

.programa-bento--feature {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  padding: 2.75rem;
  background:
    radial-gradient(circle at 88% 6%, rgba(0,137,148,0.06), transparent 42%),
    var(--bg);
}

.programa-bento--b { grid-column: 2 / 3; grid-row: 1 / 2; }
.programa-bento--c { grid-column: 2 / 3; grid-row: 2 / 3; }

.bento-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.bento-tag {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
}

.bento-num {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-light);
}

.bento-name {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 0 0 1.125rem;
  color: var(--text);
  text-wrap: balance;
}

.programa-bento--feature .bento-name { font-size: clamp(2.375rem, 3.8vw, 3.5rem); }
.programa-bento--b .bento-name,
.programa-bento--c .bento-name { font-size: clamp(1.75rem, 2.4vw, 2.25rem); }

.bento-name em { font-style: italic; font-weight: 500; }
.programa-bento--feature .bento-name em { color: var(--bg-dark); }
.programa-bento--b .bento-name em { color: var(--accent); }
.programa-bento--c .bento-name em { color: var(--primary); }

.bento-lede {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-style: italic;
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--text-light);
  margin: 0 0 1.75rem;
  max-width: 38ch;
}

.programa-bento--b .bento-lede,
.programa-bento--c .bento-lede {
  font-size: 1.0625rem;
  margin-bottom: 1.375rem;
}

.bento-list {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.bento-list li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 0.75rem;
  align-items: baseline;
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-light);
}

.bento-list li::before {
  content: "✦";
  font-family: 'Lora', 'Lora Fallback', serif;
  font-size: 0.6875rem;
  line-height: 1;
  transform: translateY(2px);
}

.programa-bento--feature .bento-list li::before { color: var(--primary); }
.programa-bento--b .bento-list li::before { color: var(--accent); }
.programa-bento--c .bento-list li::before { color: var(--primary); }

.bento-list li b { color: var(--text); font-weight: 600; }

.programa-bento--feature .bento-list {
  grid-template-columns: 1fr 1fr;
  column-gap: 2rem;
}

.bento-foot {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-whisper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.bento-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.75rem;
  color: var(--text-light);
  line-height: 1.4;
}

.bento-meta strong {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--text);
  letter-spacing: -0.005em;
}

.bento-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 9999px;
  padding: 0.6875rem 1.125rem;
  transition: background 200ms var(--ease-premium), transform 150ms var(--ease-premium), color 200ms var(--ease-premium), border-color 200ms var(--ease-premium);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
}

.bento-cta .cta-arr {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-weight: 400;
  font-size: 1rem;
  transition: transform 200ms var(--ease-premium);
}

.bento-cta:hover .cta-arr { transform: translateX(3px); }
.bento-cta:active { transform: scale(0.98); }

.bento-cta--feature { background: var(--bg-dark); color: var(--text-on-dark); }
.bento-cta--feature:hover { background: var(--primary-dark); color: var(--text-on-dark); }

.bento-cta--b { background: var(--accent); color: #fff; }
.bento-cta--b:hover { background: var(--accent-dark); }

.bento-cta--c { background: transparent; color: var(--primary); border-color: var(--border-whisper-strong); }
.bento-cta--c:hover { background: rgba(0, 137, 148, 0.06); border-color: var(--primary); color: var(--primary-dark); }

/* FRENTI MINI-MOCK DATAVIZ */
.frenti-mock {
  margin: -0.5rem 0 1.5rem;
  padding: 1.125rem 1.125rem 1rem;
  background: var(--bg-alt);
  border: 1px solid var(--border-whisper);
  border-radius: 0.75rem;
  position: relative;
}

.mock-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.875rem;
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
  font-weight: 500;
}

.mock-score {
  font-family: 'Lora', 'Lora Fallback', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.375rem;
  color: var(--rust, #9C5247);
  letter-spacing: -0.01em;
  text-transform: none;
}

.mock-score sup {
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 0.5625rem;
  color: var(--text-light);
  letter-spacing: 0.1em;
  margin-left: 0.25rem;
  vertical-align: 0.5em;
}

.axis-row {
  display: grid;
  grid-template-columns: 88px 1fr 38px;
  align-items: center;
  gap: 0.75rem;
  padding: 0.3125rem 0;
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.6875rem;
  color: var(--text-light);
}

.axis-lbl {
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.005em;
}

.axis-bar {
  position: relative;
  height: 6px;
  background: var(--border);
  border-radius: 9999px;
  overflow: hidden;
}

.axis-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 50%);
  background: linear-gradient(90deg, var(--rust, #9C5247), var(--primary));
  border-radius: 9999px;
}

.axis-pct {
  font-variant-numeric: tabular-nums;
  font-family: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
  font-size: 0.6875rem;
  color: var(--text-light);
  text-align: right;
  letter-spacing: 0.01em;
}

@media (max-width: 980px) {
  .programas-c-intro-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .programas-c-bento { grid-template-columns: 1fr; }
  .programa-bento--feature,
  .programa-bento--b,
  .programa-bento--c { grid-column: auto; grid-row: auto; }
  .programa-bento--feature .bento-list { grid-template-columns: 1fr; }
  .programa-bento--feature { padding: 2rem; }
  .programa-bento { padding: 1.875rem; }
  .programas-c-meta { flex-direction: column; gap: 0.875rem; }

  /* Mobile: mini-mock mais compacto pra reduzir altura do feature card
     e melhorar co-presença dos 3 cards no scroll. */
  .frenti-mock { padding: 0.875rem 0.875rem 0.75rem; }
  .axis-row { grid-template-columns: 72px 1fr 30px; gap: 0.5rem; padding: 0.25rem 0; }
  .axis-lbl { font-size: 0.625rem; }
  .axis-pct { font-size: 0.625rem; }
  .mock-score { font-size: 1.125rem; }
  .programa-bento--feature .bento-name { font-size: clamp(1.875rem, 8vw, 2.25rem); }
}

/* End homepage.css */