/* ============================================================
   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.
   ============================================================ */


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

.eyebrow-c {
  font-family: 'Source Sans 3', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', sans-serif;
  display: block;
}

/* Aspa gigante decorativa — ambar opacity .7 */
.manifesto-c-ornament {
  font-family: 'Lora', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', serif;
  font-weight: 600;
  color: var(--primary-dark);
  font-size: 1rem;
  flex-shrink: 0;
}

.dep-c-who cite strong {
  font-family: 'Source Sans 3', 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', 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', 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', 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', 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', 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', 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', 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', sans-serif;
  font-size: 1.0625rem;
  color: var(--text-light);
  line-height: 1.65;
}

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

.momentos-closing {
  font-family: 'Source Sans 3', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-light);
}

.bento-name {
  font-family: 'Lora', 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', 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', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-light);
}

.bento-list li::before {
  content: "✦";
  font-family: 'Lora', 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', sans-serif;
  font-size: 0.75rem;
  color: var(--text-light);
  line-height: 1.4;
}

.bento-meta strong {
  font-family: 'Lora', 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', 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', 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', 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', 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', 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', 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', 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 */