/* AudioLab, estilos do site.
   Carrega depois de audiolab-tokens.css. Toda cor, tamanho de texto,
   espaço e raio vem de um token: os do design system (audiolab-tokens.css)
   ou os de componente do site, logo abaixo. Valor novo entra primeiro
   como token. Media queries repetem os breakpoints do sistema (768 e
   1024 px), porque CSS não aceita variável dentro de @media. */

/* ── tokens de componente do site ─────────────────────────── */
:root {
  --header-h: 64px;
  --header-logo-h: 44px;
  --header-logo-h-mobile: 36px;
  --partner-logo-h: 44px;
  --hairline: 1px;
  --rule: 2px;
  --bar: 4px;
  --stripe: 8px;
  --dropdown-w: 280px;
  --eq-h-lg: clamp(150px, 22vw, 260px);
  --eq-h-md: clamp(88px, 11vw, 150px);
  --eq-h-sm: 72px;
  --eq-gap: 3px;
  --eq-col-max: 12px;
  --mark-sm: 44px;
  --mark-md: 64px;
  --mark-lg: 88px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --stat-min: 180px;
  --cover-max: 560px;
  --person-min: 150px;
  --proj-hero-min: 340px;
  --proj-art-h: 180px;
  --proj-art-h-mobile: 96px;
  --fs-hero-mark: 160px;
  --fs-hero-mark-mobile: 88px;
  --card-min: 280px;
  --content-narrow: 760px;
  --photo-w: 340px;
  --photo-w-mobile: 78vw;
  --frame-offset: 16px;
  --valor-bar-w: 260px;
  --lightbox-caption-w: 260px;
  --reveal-shift: 22px;
  --dur-reveal: 550ms;
  --dur-highlight: 700ms;
}

/* ── base ─────────────────────────────────────────────────── */
html { scroll-padding-top: calc(var(--header-h) + var(--space-16)); }
html.menu-open { overflow: hidden; }
body {
  margin: 0;
  background: var(--petrol-50);
  color: var(--petrol-800);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); }
button { font: inherit; color: inherit; }
:where(ul[class], ol[class]) { list-style: none; margin: 0; padding: 0; }

/* superfícies escuras: anel de foco branco (o padrão petróleo sumiria) */
.site-header, .nav-drawer, .site-footer, .page-hero, .home-hero, .proj-hero, .article-head, .stat-band, .cta-band, .feature-band, .modal-overlay { --focus-ring: var(--white); }
.nav-dropdown, .modal { --focus-ring: var(--petrol-700); }

.wrap { width: min(100% - 2 * var(--page-margin), var(--content-width)); margin-inline: auto; }

.skip-link {
  position: absolute;
  left: var(--space-16);
  top: calc(-1 * var(--header-h) * 2);
  z-index: 200;
  padding: var(--space-12) var(--space-16);
  background: var(--lime-500);
  color: var(--petrol-700);
  font-family: var(--font-display);
  font-weight: var(--fw-label);
  font-size: var(--fs-label);
  border-radius: var(--radius);
}
.skip-link:focus { top: var(--space-8); }

/* marca-texto limão atrás do título: grafismo al-highlight do DSM */
.highlight {
  display: inline;
  background-image: linear-gradient(transparent 60%, var(--lime-500) 60%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  padding: 0 var(--space-2);
  transition: background-size var(--dur-highlight) cubic-bezier(0.33, 1, 0.68, 1);
  transition-delay: calc(var(--i, 0) * 90ms + 150ms);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.highlight.reveal-from-right { background-position: 100% 0%; }
.highlight.is-revealed { background-size: 100% 100%; }

/* ── entrada suave ao aparecer na tela (reveal-script.njk) ── */
[data-reveal="up"] {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition: opacity var(--dur-reveal) ease-out, transform var(--dur-reveal) ease-out;
  transition-delay: calc(var(--i, 0) * 90ms);
}
[data-reveal="up"].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .highlight, [data-reveal] { transition: none !important; }
}

/* ── botões ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: var(--target-min);
  padding: 0 var(--space-20);
  border: var(--hairline) solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease-out, border-color var(--dur-fast) ease-out, color var(--dur-fast) ease-out;
}
.btn:active { transform: translateY(var(--hairline)); }
.btn-primary { background: var(--lime-500); border-color: var(--lime-500); color: var(--petrol-700); }
.btn-primary:hover { background: var(--lime-400); border-color: var(--lime-400); }
.btn-secondary { background: var(--white); border-color: var(--petrol-200); color: var(--petrol-700); }
.btn-secondary:hover { background: var(--petrol-100); border-color: var(--petrol-500); }
.btn-on-dark { background: transparent; border-color: var(--petrol-200); color: var(--white); }
.btn-on-dark:hover { background: var(--white); border-color: var(--white); color: var(--petrol-800); }
.btn svg { flex: none; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--target-min);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  color: var(--petrol-700);
  text-decoration: none;
}
.link-arrow:hover { text-decoration: underline; text-underline-offset: var(--space-4); }
.link-arrow svg { transition: transform var(--dur-fast) ease-out; }
.link-arrow:hover svg { transform: translateX(var(--space-2)); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--target-min);
  height: var(--target-min);
  border: var(--hairline) solid var(--petrol-500);
  border-radius: var(--radius);
  color: var(--petrol-100);
  transition: background-color var(--dur-fast) ease-out, color var(--dur-fast) ease-out;
}
.icon-btn:hover { background: var(--petrol-600); color: var(--white); }
.icon-list { display: flex; flex-wrap: wrap; gap: var(--space-6); }

/* ── cabeçalho ────────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--space-24);
  padding: 0 var(--space-32);
  background: var(--petrol-700);
  color: var(--white);
}
.brand-logo { flex: none; display: flex; align-items: center; min-height: var(--target-min); }
.brand-logo img { height: var(--header-logo-h); width: auto; }

.main-nav { flex: 1 1 auto; }
.main-nav-list { display: flex; align-items: center; gap: var(--space-4); }
.nav-item { position: relative; }
.site-header .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--target-min);
  padding: 0 var(--space-14);
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--petrol-200);
  font-family: var(--font-display);
  font-size: var(--fs-label-lg);
  font-weight: var(--fw-label-lg);
  line-height: var(--lh-label-lg);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) ease-out, background-color var(--dur-fast) ease-out;
}
.site-header .nav-link:hover { color: var(--white); background: var(--petrol-600); }
.site-header .nav-link svg { transition: transform var(--dur-medium) ease-out; }
.site-header .nav-link[aria-expanded="true"] { color: var(--white); background: var(--petrol-600); }
.site-header .nav-link[aria-expanded="true"] svg { transform: rotate(180deg); }
/* item ativo: barra limão sob o texto. O bloco limão fica só no botão da newsletter. */
.site-header .nav-link[aria-current="page"], .site-header .nav-link.is-active { color: var(--white); }
.site-header .nav-link[aria-current="page"]::after, .site-header .nav-link.is-active::after {
  content: "";
  position: absolute;
  left: var(--space-14);
  right: var(--space-14);
  bottom: var(--space-6);
  height: var(--bar);
  background: var(--lime-500);
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + var(--space-10));
  left: 0;
  z-index: 110;
  min-width: var(--dropdown-w);
  padding: var(--space-8);
  background: var(--white);
  border: var(--hairline) solid var(--petrol-200);
  border-radius: var(--radius);
}
.nav-dropdown[hidden] { display: none; }
.nav-dropdown a {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--target-min);
  padding: 0 var(--space-12);
  border-radius: var(--radius);
  color: var(--petrol-700);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  text-decoration: none;
  white-space: nowrap;
}
.nav-dropdown a:hover { background: var(--petrol-100); }
.nav-dropdown a[aria-current="page"] { background: var(--petrol-100); font-weight: var(--fw-h4); }
.nav-dropdown-all { margin-top: var(--space-6); padding-top: var(--space-6); border-top: var(--hairline) solid var(--petrol-200); }

.header-right { flex: none; display: flex; align-items: center; gap: var(--space-16); }
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target-min);
  padding: 0 var(--space-20);
  border: 0;
  border-radius: var(--radius);
  background: var(--lime-500);
  color: var(--petrol-700);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease-out;
}
.nav-cta:hover { background: var(--lime-400); }
.nl-short { display: none; }
.header-partner { display: flex; align-items: center; min-height: var(--target-min); }
.header-partner img, .drawer-partner { height: var(--partner-logo-h); width: auto; filter: brightness(0) invert(1); }

.menu-toggle {
  display: none;
  margin-left: auto;
  width: var(--target-min);
  height: var(--target-min);
  align-items: center;
  justify-content: center;
  border: var(--hairline) solid var(--petrol-500);
  border-radius: var(--radius);
  background: none;
  color: var(--white);
  cursor: pointer;
}
.menu-toggle-open { display: flex; }
.menu-toggle-close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle-open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle-close { display: flex; }

.nav-drawer {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  overflow-y: auto;
  padding: var(--space-16) var(--page-margin) var(--space-40);
  background: var(--petrol-700);
  color: var(--white);
  border-top: var(--hairline) solid var(--petrol-600);
}
.nav-drawer[hidden] { display: none; }
.drawer-list > li { border-bottom: var(--hairline) solid var(--petrol-600); }
.drawer-link {
  display: flex;
  align-items: center;
  min-height: var(--space-56);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-h4);
  color: var(--white);
  text-decoration: none;
}
.drawer-toggle { justify-content: space-between; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.drawer-toggle svg { color: var(--lime-500); transition: transform var(--dur-medium) ease-out; }
.drawer-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer-sublist { padding: 0 0 var(--space-12) var(--space-16); }
.drawer-sublist[hidden] { display: none; }
.drawer-sublist .drawer-all { gap: var(--space-6); color: var(--lime-500); }
.drawer-sublist a {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  color: var(--petrol-200);
  text-decoration: none;
}
.drawer-link[aria-current="page"], .drawer-sublist a[aria-current="page"] {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--lime-500);
  text-decoration-thickness: var(--bar);
  text-underline-offset: var(--space-8);
}
.drawer-cta { width: 100%; margin-top: var(--space-24); }
.drawer-social { margin-top: var(--space-24); }
.drawer-partner { margin-top: var(--space-32); }

@media (max-width: 1279px) {
  .nl-full { display: none; }
  .nl-short { display: inline; }
  .header-partner { display: none; }
}
@media (max-width: 1023px) {
  .site-header { padding: 0 var(--page-margin); }
  .main-nav, .header-right { display: none; }
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 767px) {
  .brand-logo img { height: var(--header-logo-h-mobile); }
}

/* ── rodapé ───────────────────────────────────────────────── */
.site-footer { background: var(--petrol-700); color: var(--petrol-200); padding: var(--space-56) 0 var(--space-40); }
.site-footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-20);
  padding-bottom: var(--space-32);
  margin-bottom: var(--space-32);
  border-bottom: var(--hairline) solid var(--petrol-600);
}
.site-footer-brand { display: flex; align-items: center; min-height: var(--target-min); }
.site-footer-brand img { height: var(--header-logo-h); width: auto; }
.site-footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-24); }
.site-footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  color: var(--white);
  text-decoration: none;
}
.site-footer-nav a:hover { color: var(--lime-500); }
.site-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-12) var(--space-24); }
.site-footer-bottom p { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); }
.site-footer-bottom a { color: var(--white); }
.site-footer-bottom a:hover { color: var(--lime-500); }
.site-footer .credit a { color: var(--lime-500); text-underline-offset: var(--space-4); }
@media (max-width: 767px) {
  .site-footer-top { flex-direction: column; align-items: flex-start; }
  .site-footer-bottom { flex-direction: column; }
}

/* ── equalizador em largura total (identidade da home) ────── */
.eq-zone { position: relative; flex: none; width: 100%; height: var(--eq-h-md); }
.eq-zone--lg { height: var(--eq-h-lg); }
.eq-zone--sm { height: var(--eq-h-sm); }
.eq { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--eq-gap); height: 100%; }
.eq-col {
  display: flex;
  align-items: flex-end;
  flex: 1 1 auto;
  max-width: var(--eq-col-max);
  height: 100%;
  transform-origin: bottom;
  transition: transform var(--dur-medium) ease-out;
  will-change: transform;
}
.eq-col i {
  display: block;
  width: 100%;
  background: repeating-linear-gradient(to top, var(--lime-500) 0 5px, transparent 5px 8px);
  animation-name: eqPulse;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
/* sobe e desce por quantidade de quadradinhos: anima a altura real (não um
   scaleY), então o tracejado de 8px fica sempre do mesmo tamanho e o que
   muda é quantos quadradinhos aparecem, em vez de esticar os existentes. */
@keyframes eqPulse {
  0%, 100% { height: calc(var(--h) * 0.42); }
  50% { height: var(--h); }
}
@media (prefers-reduced-motion: reduce) {
  .eq-col i { animation: none; height: calc(var(--h) * 0.7); }
  .eq-col { transition: none; }
}

/* ── herói das páginas internas: petróleo, como a home ────── */
.page-hero {
  display: flex;
  flex-direction: column;
  background: var(--petrol-700);
  color: var(--white);
  padding-top: calc(var(--header-h) + var(--space-48));
}
.page-hero-inner { padding-bottom: var(--space-40); }
.page-hero h1 {
  margin: 0;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-display);
  letter-spacing: -0.01em;
}
.page-hero h1 em { font-style: italic; color: var(--lime-500); }
.page-hero .lead {
  max-width: var(--measure);
  margin: var(--space-16) 0 0;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--petrol-200);
}
@media (max-width: 767px) {
  .page-hero { padding-top: calc(var(--header-h) + var(--space-32)); }
  .page-hero-inner { padding-bottom: var(--space-24); }
}

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin-bottom: var(--space-20); font-size: var(--fs-small); color: var(--petrol-200); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: var(--target-min); color: inherit; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--white); font-weight: var(--fw-label); }

/* ── seções ───────────────────────────────────────────────── */
.section { padding-block: var(--space-64); }
.section + .section { padding-top: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8) var(--space-16); margin-bottom: var(--space-24); }
.section-title {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin: 0 0 var(--space-24);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
  color: var(--petrol-700);
}
.section-head .section-title { margin: 0; }
.section-lead { max-width: var(--measure); margin: 0 0 var(--space-32); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--petrol-800); }
.prose p { max-width: var(--measure); margin: 0 0 var(--space-16); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-body); color: var(--petrol-800); }
.empty-state { margin: 0; padding: var(--space-24); border: var(--hairline) dashed var(--petrol-300); border-radius: var(--radius); color: var(--petrol-500); }

/* ── espaço marcado (imagem que ainda não existe) ─────────── */
.dsm-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--space-8);
  border: var(--rule) dashed var(--petrol-300);
  border-radius: var(--radius);
  background: var(--petrol-100);
  color: var(--petrol-500);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  text-align: center;
}
.ratio-16-9 { aspect-ratio: 16 / 9; height: auto; }
.ratio-4-5 { aspect-ratio: 4 / 5; height: auto; }
.ratio-4-3 { aspect-ratio: 4 / 3; height: auto; }
.ratio-1-1 { aspect-ratio: 1 / 1; height: auto; }
[data-theme="petroleo"] .dsm-placeholder, .on-dark .dsm-placeholder { background: transparent; border-color: var(--petrol-400); color: var(--petrol-200); }

/* ── placa do projeto (logo ou sigla) ─────────────────────── */
.project-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: var(--mark-md);
  min-width: var(--mark-md);
  border-radius: var(--radius);
  background: var(--project-base, var(--petrol-700));
  color: var(--project-on, var(--lime-500));
  font-family: var(--font-display);
  font-weight: var(--fw-h4);
  font-size: var(--fs-label-lg);
  line-height: 1;
}
.project-mark.has-logo { background: var(--mark-bg); padding: var(--space-6) var(--space-8); }
.project-mark img { height: 100%; width: auto; }
.project-mark--sm { height: var(--mark-sm); min-width: var(--mark-sm); font-size: var(--fs-label); }
.project-mark--lg { height: var(--mark-lg); min-width: var(--mark-lg); font-size: var(--fs-h3); }
.project-mark--lg.has-logo { padding: var(--space-10) var(--space-14); }

/* ── card de projeto (DSM) ────────────────────────────────── */
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-20); }
.project-grid > li { display: flex; }
.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: calc(var(--stripe) + var(--space-24)) var(--space-24) var(--space-24);
  background: var(--white);
  border: var(--hairline) solid var(--petrol-200);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur-fast) ease-out, transform var(--dur-medium) ease-out;
}
.project-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: var(--stripe); background: var(--project-base); }
.project-card:hover { border-color: var(--project-base); transform: translateY(calc(-1 * var(--space-4))); }
.project-card .project-mark { margin-bottom: var(--space-20); }
.project-card-title { margin: 0 0 var(--space-8); font-size: var(--fs-card-title); line-height: var(--lh-card-title); font-weight: var(--fw-card-title); color: var(--petrol-800); }
.project-card-title a { text-decoration: none; color: inherit; }
/* o card inteiro é clicável, mas o link acessível é só o nome */
.project-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.project-card-tag {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--space-12);
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius);
  background: var(--project-soft);
  color: var(--project-text);
  font-family: var(--font-display);
  font-size: var(--fs-tag);
  font-weight: var(--fw-tag);
  line-height: var(--lh-tag);
}
.project-card-text { margin: 0 0 var(--space-20); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--petrol-800); }
.project-card-link { display: inline-flex; align-items: center; gap: var(--space-6); margin-top: auto; font-family: var(--font-display); font-size: var(--fs-label); font-weight: var(--fw-label); color: var(--project-text); }
.project-card:hover .project-card-link { text-decoration: underline; text-underline-offset: var(--space-4); }
@media (max-width: 1023px) { .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .project-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-14); }
  .project-card { padding: calc(var(--stripe) + var(--space-16)) var(--space-16) var(--space-16); }
}

/* card compacto (carrossel da home) */
.project-card--compact { padding: calc(var(--stripe) + var(--space-16)) var(--space-16) var(--space-16); }
.project-card--compact .project-mark { margin-bottom: var(--space-12); }
.project-card--compact .project-card-title { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.project-card--compact .project-card-tag { margin-bottom: var(--space-8); }
.project-card--compact .project-card-text {
  margin-bottom: var(--space-12);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.project-card--compact .project-card-link { font-size: var(--fs-label); }

/* ── carrossel ────────────────────────────────────────────── */
.section-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-20); }
.carousel-track {
  display: flex;
  gap: var(--space-20);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--space-4);
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide { display: flex; flex: 0 0 calc((100% - 3 * var(--space-20)) / 4); min-width: 0; scroll-snap-align: start; }
.carousel-toggle-pause { display: flex; }
.carousel-toggle-play { display: none; }
.carousel-toggle[aria-pressed="true"] .carousel-toggle-pause { display: none; }
.carousel-toggle[aria-pressed="true"] .carousel-toggle-play { display: flex; }
.carousel-toggle[hidden] { display: none; }
@media (max-width: 1023px) { .carousel-slide { flex-basis: calc((100% - var(--space-20)) / 2); } }
@media (max-width: 767px) { .carousel-slide { flex-basis: 85%; } }

/* ── faixa de números (Stat) ──────────────────────────────── */
.stat-band {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: var(--space-24);
  margin-top: var(--space-48);
  padding: var(--space-40) var(--space-32);
  border-radius: var(--radius);
  background: var(--project-hero, var(--petrol-700));
  color: var(--white);
}
.stat { min-width: 0; padding-left: var(--space-24); border-left: var(--rule) dashed var(--petrol-400); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat-num { display: block; font-family: var(--font-display); font-size: var(--fs-stat); line-height: var(--lh-stat); font-weight: var(--fw-stat); font-variant-numeric: tabular-nums; color: var(--lime-500); overflow-wrap: anywhere; }
.stat-label { display: block; margin-top: var(--space-8); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--petrol-200); }
@media (max-width: 767px) {
  .stat-band { grid-template-columns: minmax(0, 1fr); gap: var(--space-20); padding: var(--space-28) var(--space-24); }
  .stat { padding: var(--space-20) 0 0; border-left: 0; border-top: var(--rule) dashed var(--petrol-400); }
  .stat:first-child { padding-top: 0; border-top: 0; }
}

/* ── página de projeto ────────────────────────────────────── */
.proj-hero { display: flex; flex-direction: column; background: var(--project-hero); color: var(--white); padding-top: calc(var(--header-h) + var(--space-32)); }
/* altura padronizada: o nome fica em h1 (não display) e a faixa tem altura mínima fixa */
.proj-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-48); align-items: center; min-height: var(--proj-hero-min); padding-bottom: var(--space-40); }
.proj-hero-tag { display: block; margin-bottom: var(--space-8); font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: var(--fw-eyebrow); line-height: var(--lh-eyebrow); color: var(--petrol-200); }
.proj-hero h1 { margin: 0; font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-h1); letter-spacing: -0.01em; overflow-wrap: break-word; hyphens: auto; }
/* imagem principal: logo todo branco, sem placa; sem logo, a sigla */
.proj-hero-art { display: flex; align-items: center; justify-content: center; }
.proj-hero-art img { max-height: var(--proj-art-h); max-width: 100%; width: auto; filter: brightness(0) invert(1); }
.proj-hero-sigla { font-family: var(--font-display); font-size: var(--fs-hero-mark); font-weight: var(--fw-display); line-height: 1; letter-spacing: -0.02em; color: var(--white); }
.proj-hero .lead { max-width: var(--measure); margin: var(--space-16) 0 0; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--petrol-200); }
.proj-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-28); }
.proj-hero-actions:empty { display: none; }
@media (max-width: 1023px) {
  .proj-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
  .proj-hero-grid { min-height: 0; }
  .proj-hero-art { justify-content: flex-start; }
  .proj-hero-art img { max-height: var(--proj-art-h-mobile); }
  .proj-hero-sigla { font-size: var(--fs-hero-mark-mobile); }
}
@media (max-width: 767px) {
  .proj-hero-grid { padding-bottom: var(--space-24); }
  .proj-hero-actions .btn { flex: 1 1 auto; }
}

.proj-tabs { position: sticky; top: var(--header-h); z-index: 20; background: var(--white); border-bottom: var(--hairline) solid var(--petrol-200); }
.proj-tabs-list { display: flex; gap: var(--space-4); overflow-x: auto; scrollbar-width: none; }
.proj-tabs-list::-webkit-scrollbar { display: none; }
.proj-tabs a {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: var(--space-56);
  padding: 0 var(--space-14);
  border-bottom: var(--bar) solid transparent;
  font-family: var(--font-display);
  font-size: var(--fs-label-lg);
  font-weight: var(--fw-label-lg);
  color: var(--petrol-500);
  text-decoration: none;
}
.proj-tabs a:hover { color: var(--petrol-800); border-bottom-color: var(--project-base); }
.proj-tabs a:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }

.proj-about { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-48); align-items: start; }
.proj-about.is-ficha-only { grid-template-columns: minmax(0, 1fr); max-width: var(--cover-max); }
.proj-ficha { position: relative; padding: calc(var(--bar) + var(--space-24)) var(--space-24) var(--space-24); background: var(--white); border: var(--hairline) solid var(--petrol-200); border-radius: var(--radius); overflow: hidden; }
.proj-ficha::before { content: ""; position: absolute; inset: 0 0 auto 0; height: var(--bar); background: var(--project-base); }
.proj-ficha-title { margin: 0 0 var(--space-8); font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-h4); color: var(--petrol-800); }
.proj-ficha dl { margin: 0; }
.proj-ficha dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4) var(--space-12); padding: var(--space-12) 0; border-bottom: var(--hairline) solid var(--petrol-200); }
.proj-ficha dt { display: flex; align-items: center; gap: var(--space-6); font-size: var(--fs-small); color: var(--petrol-500); }
.proj-ficha dd { margin: 0; min-width: 0; font-size: var(--fs-body); color: var(--petrol-800); overflow-wrap: anywhere; }
.proj-ficha dd a { color: var(--petrol-700); }
.proj-redes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); margin-top: var(--space-16); }
.proj-redes a {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--target-min);
  padding: 0 var(--space-12);
  border: var(--hairline) solid var(--petrol-200);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  color: var(--petrol-700);
  text-decoration: none;
}
.proj-redes a:hover { background: var(--petrol-100); border-color: var(--petrol-500); }
@media (max-width: 1023px) { .proj-about { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); } }

/* Accordion (DSM): nome sempre visível, descrição ao abrir */
.accordion { border-top: var(--hairline) solid var(--petrol-200); }
.accordion-item { border-bottom: var(--hairline) solid var(--petrol-200); }
.accordion-heading { margin: 0; }
.accordion-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
  min-height: var(--space-64);
  padding: var(--space-12) var(--space-4);
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--font-series);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-series-name);
  color: var(--petrol-800);
  cursor: pointer;
}
.accordion-btn:hover { color: var(--petrol-600); }
.accordion-btn svg { flex: none; color: var(--project-text, var(--petrol-700)); transition: transform var(--dur-medium) ease-out; }
.accordion-btn[aria-expanded="true"] svg { transform: rotate(45deg); }
.accordion-panel { padding: 0 var(--space-4) var(--space-20); }
.accordion-panel p { max-width: var(--measure); margin: 0 0 var(--space-8); color: var(--petrol-800); }
.accordion-img { width: min(100%, var(--cover-max)); aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: var(--space-12); border-radius: var(--radius); }

.video-frame { position: relative; aspect-ratio: 16 / 9; max-width: calc(var(--content-width) * 0.75); border-radius: var(--radius); overflow: hidden; background: var(--petrol-900); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.episode-list { background: var(--white); border: var(--hairline) solid var(--petrol-200); border-radius: var(--radius); }
.episode-list > li + li { border-top: var(--hairline) solid var(--petrol-200); }
.episode-row { display: flex; align-items: center; gap: var(--space-16); min-height: var(--space-64); padding: var(--space-12) var(--space-16); color: var(--petrol-800); text-decoration: none; }
a.episode-row:hover { background: var(--petrol-50); }
a.episode-row:hover .episode-title { text-decoration: underline; }
a.episode-row svg { flex: none; margin-left: auto; color: var(--petrol-600); }
.episode-list > li[hidden] { display: none; }
.episode-date { display: block; margin-top: var(--space-2); font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-small); color: var(--petrol-500); }
.pagination { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-16); }
.pagination[hidden] { display: none; }
.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--target-min);
  min-height: var(--target-min);
  padding: 0 var(--space-12);
  border: var(--hairline) solid var(--petrol-200);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--petrol-700);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  cursor: pointer;
}
.pagination-btn:hover:not(:disabled) { background: var(--petrol-100); border-color: var(--petrol-500); }
.pagination-btn[aria-current="page"] { background: var(--petrol-700); border-color: var(--petrol-700); color: var(--white); }
.pagination-btn:disabled { color: var(--petrol-300); cursor: default; }
.episode-num { display: flex; align-items: center; justify-content: center; flex: none; width: var(--space-40); height: var(--space-40); border-radius: var(--radius); background: var(--project-hero, var(--petrol-700)); color: var(--lime-500); font-family: var(--font-display); font-size: var(--fs-label); font-weight: var(--fw-label); }
.episode-title { min-width: 0; font-family: var(--font-display); font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-h4); overflow-wrap: anywhere; }

/* pessoas: foto 4:5 com faixa na cor do projeto */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--person-min), 1fr)); gap: var(--space-24) var(--space-20); }
.people-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.person { min-width: 0; }
.person-photo { position: relative; aspect-ratio: 4 / 5; margin-bottom: var(--space-12); border-radius: var(--radius); overflow: hidden; }
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person-photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: var(--space-6); background: var(--project-base, var(--petrol-700)); }
.person-name { margin: 0; font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-h4); color: var(--petrol-800); overflow-wrap: break-word; }
.person-role { margin: var(--space-2) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--petrol-500); }
@media (max-width: 1023px) { .people-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .people-grid, .people-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20) var(--space-14); } }

/* faixa de chamada no fim da página do projeto */
.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding: var(--space-40);
  border-radius: var(--radius);
  background: var(--project-hero, var(--petrol-700));
  color: var(--white);
}
.cta-band h2 { margin: 0 0 var(--space-8); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-h2); }
.cta-band p { max-width: var(--measure); margin: 0; font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--petrol-200); }
.cta-band .btn { white-space: normal; text-align: center; }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }
@media (max-width: 767px) { .cta-band { padding: var(--space-28) var(--space-24); } .cta-band .btn { width: 100%; } }

/* notícias pequenas (página de projeto) */
.news-mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-20); }
.news-mini { position: relative; }
.news-mini-img { aspect-ratio: 16 / 9; margin-bottom: var(--space-12); border-radius: var(--radius); overflow: hidden; }
.news-mini-img img { width: 100%; height: 100%; object-fit: cover; }
.news-mini h3 { margin: 0 0 var(--space-4); font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-h4); color: var(--petrol-800); }
.news-mini h3 a { color: inherit; text-decoration: none; }
.news-mini h3 a::after { content: ""; position: absolute; inset: 0; }
.news-mini:hover h3 a { text-decoration: underline; }
.news-date { font-size: var(--fs-small); color: var(--petrol-500); }
@media (max-width: 767px) { .news-mini-grid { grid-template-columns: minmax(0, 1fr); } }


/* ── home ─────────────────────────────────────────────────── */
/* primeira tela inteira: as ondas encostam na borda de baixo e os projetos só aparecem depois da rolagem */
.home-hero { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; background: var(--petrol-700); color: var(--white); padding-top: calc(var(--header-h) + var(--space-40)); }
.home-hero-grid { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-48); align-items: center; align-content: center; padding-bottom: var(--space-40); }
.home-hero-title { margin: 0; font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-display); letter-spacing: -0.01em; }
.home-hero-title em { font-style: italic; color: var(--lime-500); }
.hero-mobile { display: none; }
.home-hero .lead { max-width: var(--measure); margin: var(--space-20) 0 0; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--petrol-200); }

/* atalhos: fixos, não acompanham o movimento do equalizador */
.home-shortcuts { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-8); }
.home-shortcuts-list { display: flex; flex-direction: column; gap: var(--space-8); }
.home-shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding: var(--space-6) var(--space-12) var(--space-6) var(--space-10);
  border: var(--hairline) solid var(--petrol-500);
  border-radius: var(--radius);
  color: var(--white);
  text-decoration: none;
  transition: background-color var(--dur-fast) ease-out, border-color var(--dur-fast) ease-out;
}
.home-shortcut:hover { background: var(--petrol-600); border-color: var(--lime-500); }
.home-shortcut-logo { height: var(--mark-sm); width: auto; max-width: 100%; object-fit: contain; }
.home-shortcut-logo.is-knockout { filter: brightness(0) invert(1); }
.home-shortcut-arrow { display: flex; color: var(--lime-500); transition: transform var(--dur-fast) ease-out; }
.home-shortcut:hover .home-shortcut-arrow { transform: translateX(var(--space-4)); }
.home-shortcuts-all { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-6); min-height: var(--target-min); font-family: var(--font-display); font-size: var(--fs-label); font-weight: var(--fw-label); color: var(--lime-500); text-decoration: none; }
.home-shortcuts-all:hover { text-decoration: underline; text-underline-offset: var(--space-4); }

@media (max-width: 1023px) {
  .home-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
  .home-shortcuts-list { flex-direction: row; }
  .home-shortcuts-list > li { flex: 1 1 0; min-width: 0; }
  .home-shortcut { justify-content: center; padding: var(--space-6); }
  .home-shortcut-arrow { display: none; }
  .home-shortcuts-all { justify-content: flex-start; }
}
@media (max-width: 767px) {
  .home-hero { padding-top: calc(var(--header-h) + var(--space-24)); }
  .hero-desktop { display: none; }
  .hero-mobile { display: inline; }
  .home-hero .lead { margin-top: var(--space-12); }
  .home-hero-grid { gap: var(--space-16); padding-bottom: var(--space-16); }
  .home-shortcuts { gap: 0; }
  .home-shortcuts-list { gap: var(--space-8); }
  .home-shortcut { padding: var(--space-8) var(--space-6); }
  .home-shortcut-logo { height: var(--space-32); }
  .is-home .eq-zone--lg { height: var(--eq-h-md); }
}

/* Highlight (DSM): notícia mais recente, texto à esquerda e imagem 16:9 à direita */
.highlight-card { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--white); border: var(--hairline) solid var(--petrol-200); border-radius: var(--radius); overflow: hidden; }
.highlight-card-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); padding: var(--space-40); }
.highlight-card h3 { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-h3); color: var(--petrol-800); }
.highlight-card h3 a { color: inherit; text-decoration: none; }
.highlight-card h3 a::after { content: ""; position: absolute; inset: 0; }
.highlight-card:hover h3 a { text-decoration: underline; text-underline-offset: var(--space-4); }
.highlight-card p { margin: 0; color: var(--petrol-800); }
.highlight-card .link-arrow { margin-top: auto; }
.highlight-card-img { aspect-ratio: 16 / 9; }
.highlight-card-img img { width: 100%; height: 100%; object-fit: cover; }
.highlight-card-img .dsm-placeholder { border-radius: 0; border-width: 0 0 0 var(--rule); }
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-6); font-family: var(--font-display); font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: var(--fw-eyebrow); color: var(--petrol-600); }
.news-date { display: inline-flex; align-items: center; gap: var(--space-6); font-size: var(--fs-small); color: var(--petrol-500); }

.news-compact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-20); margin-top: var(--space-20); }
.news-compact-item { position: relative; display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-12) var(--space-12) var(--space-16); background: var(--white); border: var(--hairline) solid var(--petrol-200); border-radius: var(--radius); }
.news-compact-img { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; }
.news-compact-img img { width: 100%; height: 100%; object-fit: cover; }
.news-compact h3 { margin: 0 0 var(--space-4); font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-h4); color: var(--petrol-800); }
.news-compact h3 a { color: inherit; text-decoration: none; }
.news-compact h3 a::after { content: ""; position: absolute; inset: 0; }
.news-compact-item:hover h3 a { text-decoration: underline; }
.news-compact-item > div:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); flex: 1; }
.news-compact-item .link-arrow, .news-row .link-arrow, .news-mini .link-arrow { min-height: 0; margin-top: auto; padding-top: var(--space-8); font-size: var(--fs-tag); }
.news-row-body { display: flex; flex-direction: column; align-items: flex-start; }

@media (max-width: 1023px) {
  .highlight-card { grid-template-columns: minmax(0, 1fr); }
  .highlight-card-img { order: -1; }
  .highlight-card-img .dsm-placeholder { border-width: 0 0 var(--rule) 0; }
  .highlight-card-text { padding: var(--space-24); }
}
@media (max-width: 1023px) { .news-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .news-compact { grid-template-columns: minmax(0, 1fr); }
  .news-compact-item { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; }
}


/* ── sobre ────────────────────────────────────────────────── */
/* linha limão deslocada atrás da foto: acento plano, sem sombra */
.framed { position: relative; z-index: 0; }
.framed::after {
  content: "";
  position: absolute;
  inset: var(--frame-offset) calc(-1 * var(--frame-offset)) calc(-1 * var(--frame-offset)) var(--frame-offset);
  z-index: -1;
  border: var(--rule) solid var(--lime-500);
  border-radius: var(--radius);
  pointer-events: none;
}
.framed > img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }

.sobre-historia { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); gap: var(--space-64); align-items: center; }
.sobre-historia-photos { position: relative; aspect-ratio: 5 / 4; }
.sobre-photo-back, .sobre-photo-front { position: absolute; width: 68%; aspect-ratio: 4 / 3; }
.sobre-photo-back { top: 0; right: var(--frame-offset); }
.sobre-photo-front { bottom: var(--frame-offset); left: 0; }
.sobre-photo-front > img { border: var(--bar) solid var(--petrol-50); }
@media (max-width: 1023px) {
  .sobre-historia { grid-template-columns: minmax(0, 1fr); gap: var(--space-40); }
  .sobre-historia-photos { max-width: var(--cover-max); width: 100%; }
}

.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20); }
.info-card { padding: var(--space-28); background: var(--white); border: var(--hairline) solid var(--petrol-200); border-top: var(--bar) solid var(--petrol-700); border-radius: var(--radius); }
.info-card h3 { margin: 0 0 var(--space-12); font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-h4); color: var(--petrol-800); }
.info-card p { margin: 0; color: var(--petrol-800); }
@media (max-width: 767px) { .info-grid { grid-template-columns: minmax(0, 1fr); } }

.award-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-32); }
.award-list li { margin-top: var(--space-16); padding: var(--space-4) 0 var(--space-4) var(--space-16); border-left: var(--bar) solid var(--lime-500); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--petrol-800); }
@media (max-width: 767px) { .award-list { grid-template-columns: minmax(0, 1fr); } }

.feature-band { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-48); align-items: center; padding: var(--space-48); border-radius: var(--radius); background: var(--petrol-700); color: var(--white); }
.feature-band h2 { margin: 0 0 var(--space-16); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-h2); }
.feature-band p { max-width: var(--measure); margin: 0 0 var(--space-12); color: var(--petrol-200); }
.feature-band .btn { margin-top: var(--space-12); }
.feature-band-note { font-size: var(--fs-small); }
.feature-band-stats { display: grid; gap: var(--space-20); }
.feature-band-stats li { padding-top: var(--space-16); border-top: var(--rule) dashed var(--petrol-400); }
.feature-band-stats li:first-child { padding-top: 0; border-top: 0; }
@media (max-width: 1023px) { .feature-band { grid-template-columns: minmax(0, 1fr); padding: var(--space-32) var(--space-24); gap: var(--space-32); } }

/* RadioTube: painel claro com moldura, entre a Revista (escura) e os valores */
.radiotube {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-16) var(--space-32);
  padding: var(--space-32);
  background: var(--petrol-100);
  border: var(--hairline) solid var(--petrol-200);
  border-left: var(--stripe) solid var(--petrol-700);
  border-radius: var(--radius);
}
.radiotube-icon { display: flex; align-items: center; justify-content: center; width: var(--mark-md); height: var(--mark-md); border-radius: var(--radius); background: var(--petrol-700); color: var(--lime-500); }
.radiotube h2 { margin: var(--space-4) 0 var(--space-8); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-h3); color: var(--petrol-800); }
.radiotube p { max-width: var(--measure); margin: 0; color: var(--petrol-800); }
.radiotube .btn { white-space: normal; text-align: left; }
@media (max-width: 1023px) {
  .radiotube { grid-template-columns: auto minmax(0, 1fr); padding: var(--space-24); }
  .radiotube .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 767px) { .radiotube { grid-template-columns: minmax(0, 1fr); } }

.sobre-valores { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 10fr); gap: var(--space-64); align-items: center; }
.sobre-valores-photo { aspect-ratio: 4 / 3; }
.valores-list li { max-width: var(--valor-bar-w); margin-bottom: var(--space-20); padding-bottom: var(--space-8); border-bottom: var(--stripe) solid var(--lime-500); font-family: var(--font-display); font-size: var(--fs-label-lg); font-weight: var(--fw-label-lg); color: var(--petrol-700); }
@media (max-width: 1023px) { .sobre-valores { grid-template-columns: minmax(0, 1fr); gap: var(--space-40); } .sobre-valores-photo { max-width: var(--cover-max); } }

.carousel-controls { display: flex; gap: var(--space-8); }
.icon-btn--light { border-color: var(--petrol-200); background: var(--white); color: var(--petrol-700); cursor: pointer; }
.icon-btn--light:hover { background: var(--petrol-100); color: var(--petrol-800); }
.photo-carousel {
  display: flex;
  gap: var(--space-32);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--space-4) max(var(--page-margin), calc((100% - var(--content-width)) / 2)) var(--space-28);
  scrollbar-width: none;
}
.photo-carousel::-webkit-scrollbar { display: none; }
.photo-carousel > li { flex: none; scroll-snap-align: start; }
.photo-carousel-item { display: block; width: var(--photo-w); aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: var(--radius); background: none; cursor: zoom-in; }
div.photo-carousel-item { cursor: default; }
@media (max-width: 767px) { .photo-carousel-item { width: var(--photo-w-mobile); } }

.lightbox { flex-direction: column; }
.lightbox-body { display: flex; align-items: flex-end; gap: var(--space-28); max-width: 90vw; margin: 0; }
.lightbox-body img { max-width: 62vw; max-height: 86vh; object-fit: contain; }
.lightbox-body figcaption { max-width: var(--lightbox-caption-w); color: var(--white); }
@media (max-width: 767px) {
  .lightbox-body { flex-direction: column; align-items: flex-start; }
  .lightbox-body img { max-width: 100%; max-height: 58vh; }
}

/* chips de filtro (aria-pressed) */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-32); }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: 0 var(--space-16);
  border: var(--hairline) solid var(--petrol-200);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--petrol-700);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease-out, border-color var(--dur-fast) ease-out;
}
.chip:hover { background: var(--petrol-100); border-color: var(--petrol-500); }
.chip[aria-pressed="true"] { background: var(--petrol-700); border-color: var(--petrol-700); color: var(--white); }

.person[hidden] { display: none; }
/* Quem faz parte (Sobre): cards só com texto, sem foto */
.people-grid--text { grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); gap: var(--space-12); }
.person--text { padding: var(--space-16); background: var(--white); border: var(--hairline) solid var(--petrol-200); border-left: var(--bar) solid var(--project-base, var(--petrol-700)); border-radius: var(--radius); }
.person--text .person-name { font-size: var(--fs-label-lg); line-height: var(--lh-label-lg); }
.person-tags { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }
.person-tag { padding: var(--space-2) var(--space-8); border-radius: var(--radius); background: var(--project-soft, var(--petrol-100)); color: var(--project-text, var(--petrol-700)); font-family: var(--font-display); font-size: var(--fs-tag); font-weight: var(--fw-tag); line-height: var(--lh-tag); }
.person-tag--more { background: var(--petrol-700); color: var(--white); }


/* ── pesquisa e formação ──────────────────────────────────── */
.section.section--tint { padding-top: var(--space-64); background: var(--white); border-top: var(--hairline) solid var(--petrol-200); border-bottom: var(--hairline) solid var(--petrol-200); }
.block-title { margin: 0 0 var(--space-16); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-h3); color: var(--petrol-700); }

.jonami-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-24); margin-bottom: var(--space-20); }
.jonami-logo { width: var(--mark-lg); flex: none; }
.jonami-logo img { width: 100%; height: auto; }
.jonami-title { margin: 0; font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-h1); color: var(--petrol-700); }
.jonami-full { margin: var(--space-4) 0 0; font-family: var(--font-display); font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-label); color: var(--petrol-600); }
.jonami-meta { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); margin-bottom: var(--space-24); padding: var(--space-12) 0; border-top: var(--hairline) solid var(--petrol-200); border-bottom: var(--hairline) solid var(--petrol-200); font-size: var(--fs-small); color: var(--petrol-800); }
.jonami-meta li { display: inline-flex; align-items: center; gap: var(--space-6); }
.jonami-meta svg { color: var(--petrol-600); }
.jonami-text p { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.jonami-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-24); }
.jonami-block { margin-top: var(--space-48); }
.read-more svg { transition: transform var(--dur-medium) ease-out; }
.read-more[aria-expanded="true"] svg { transform: rotate(180deg); }

.chip[aria-expanded="true"] { background: var(--petrol-700); border-color: var(--petrol-700); color: var(--white); }
.concept-panel { max-width: var(--measure); margin-top: calc(-1 * var(--space-16)); padding: var(--space-20) var(--space-24); background: var(--white); border: var(--hairline) solid var(--petrol-200); border-left: var(--bar) solid var(--lime-500); border-radius: var(--radius); }
.concept-panel h4 { margin: 0 0 var(--space-8); font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--petrol-800); }
.concept-panel p { margin: 0; color: var(--petrol-800); }
.concept-panel .concept-authors { margin-top: var(--space-8); font-size: var(--fs-small); color: var(--petrol-500); }

.topic-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.topic { padding: var(--space-20); background: var(--white); border: var(--hairline) solid var(--petrol-200); border-radius: var(--radius); }
.topic[hidden] { display: none; }
.topic-axis { display: inline-block; margin-bottom: var(--space-8); padding: var(--space-2) var(--space-8); border-radius: var(--radius); background: var(--petrol-100); color: var(--petrol-700); font-family: var(--font-display); font-size: var(--fs-tag); font-weight: var(--fw-tag); line-height: var(--lh-tag); }
.topic h4 { margin: 0 0 var(--space-6); font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-h4); color: var(--petrol-800); }
.topic p { margin: 0; color: var(--petrol-800); }
.topic .topic-who { margin-top: var(--space-10); font-size: var(--fs-small); color: var(--petrol-500); }
@media (max-width: 767px) { .topic-list { grid-template-columns: minmax(0, 1fr); } }

.course-card { flex-direction: column; background: var(--petrol-50); border: var(--hairline) solid var(--petrol-200); border-radius: var(--radius); overflow: hidden; }
.course-img { aspect-ratio: 16 / 9; }
.course-img img { width: 100%; height: 100%; object-fit: cover; }
.course-img .dsm-placeholder { border-radius: 0; border-width: 0 0 var(--rule) 0; }
.course-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); flex: 1; padding: var(--space-20); }
.course-type { font-family: var(--font-display); font-size: var(--fs-tag); font-weight: var(--fw-tag); color: var(--petrol-600); }
.course-body h3 { margin: 0; font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-h4); color: var(--petrol-800); }
.course-body p { margin: 0; color: var(--petrol-800); }
.course-body .btn, .course-body .link-arrow { margin-top: auto; }

.event-list { display: grid; gap: var(--space-8); }
.event-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-20); padding: var(--space-12) var(--space-16); border: var(--hairline) solid var(--petrol-200); border-left: var(--bar) solid var(--petrol-700); border-radius: var(--radius); background: var(--white); }
.event-item[hidden] { display: none; }
.event-date { display: inline-flex; align-items: center; gap: var(--space-6); font-family: var(--font-display); font-size: var(--fs-label); font-weight: var(--fw-label); color: var(--petrol-700); }
.event-name { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-h4); color: var(--petrol-800); }
.event-place { font-size: var(--fs-small); color: var(--petrol-500); }
.event-item .link-arrow { margin-left: auto; }


/* ── modal da newsletter (Mailchimp) ──────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-20);
  background: var(--petrol-950);
}
.modal-overlay[hidden] { display: none; }
.modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 2 * var(--space-20));
  overflow-y: auto;
  padding: var(--space-20);
  background: var(--petrol-50);
  border: var(--hairline) solid var(--petrol-200);
  border-radius: var(--radius);
}
.modal-close {
  position: absolute;
  top: var(--space-8);
  right: var(--space-8);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--target-min);
  height: var(--target-min);
  border: var(--hairline) solid var(--petrol-200);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--petrol-700);
  cursor: pointer;
}
.modal-close:hover { background: var(--petrol-100); }
#mc_embed_signup { padding: var(--space-20) var(--space-24) var(--space-24); background: var(--white); color: var(--petrol-800); border-radius: var(--radius); font-family: var(--font-body); font-size: var(--fs-small); }
#mc_embed_signup h2 { margin: 0 0 var(--space-14); padding-right: var(--space-40); font-family: var(--font-display); font-size: var(--fs-h4); color: var(--petrol-700); }
#mc_embed_signup label { font-family: var(--font-body); font-size: var(--fs-body); color: var(--petrol-800); }
#mc_embed_signup .asterisk { color: var(--error-fg); }
#mc_embed_signup input.email {
  width: 100%;
  min-height: var(--target-min);
  margin: var(--space-6) 0 var(--space-14);
  padding: var(--space-10) var(--space-12);
  border: var(--hairline) solid var(--petrol-400);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-body);
}
#mc_embed_signup .button {
  min-height: var(--target-min);
  padding: 0 var(--space-20);
  border: 0;
  border-radius: var(--radius);
  background: var(--lime-500);
  color: var(--petrol-700);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  cursor: pointer;
}
#mc_embed_signup .button:hover { background: var(--lime-400); }
.mc-badge { width: 220px; height: auto; margin-top: var(--space-12); }

/* ── notícias ─────────────────────────────────────────────── */
.news-filters { display: flex; flex-wrap: wrap; gap: var(--space-16); margin-bottom: var(--space-32); }
.field { display: flex; flex-direction: column; gap: var(--space-6); font-family: var(--font-display); font-size: var(--fs-label); font-weight: var(--fw-label); color: var(--petrol-700); }
.field select {
  min-height: var(--target-min);
  min-width: var(--card-min);
  max-width: 100%;
  padding: 0 var(--space-12);
  border: var(--hairline) solid var(--petrol-400);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--petrol-800);
  font-family: var(--font-body);
  font-size: var(--fs-body);
}
.news-list { display: grid; gap: var(--space-20); }
.news-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-24); align-items: center; padding: var(--space-16); background: var(--white); border: var(--hairline) solid var(--petrol-200); border-radius: var(--radius); }
.news-row[hidden] { display: none; }
.news-row-img { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; }
.news-row-img img { width: 100%; height: 100%; object-fit: cover; }
.news-row h2 { margin: 0 0 var(--space-8); font-size: var(--fs-card-title); line-height: var(--lh-card-title); font-weight: var(--fw-card-title); color: var(--petrol-800); }
.news-row h2 a { color: inherit; text-decoration: none; }
.news-row h2 a::after { content: ""; position: absolute; inset: 0; }
.news-row:hover h2 a { text-decoration: underline; text-underline-offset: var(--space-4); }
.news-row p { margin: 0 0 var(--space-8); color: var(--petrol-800); }
@media (max-width: 767px) {
  .news-row { grid-template-columns: minmax(0, 1fr); }
  .field, .field select { width: 100%; min-width: 0; }
}

/* página da notícia */
.wrap--narrow { width: min(100% - 2 * var(--page-margin), var(--content-narrow)); }
.article-head { background: var(--petrol-700); color: var(--white); padding: calc(var(--header-h) + var(--space-40)) 0 var(--space-40); }
.article-head h1 { margin: 0; font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-h1); overflow-wrap: break-word; }
.article-head .lead { margin: var(--space-16) 0 0; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--petrol-200); }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-20); margin: 0 0 var(--space-12); font-size: var(--fs-small); color: var(--petrol-200); }
.article-meta span { display: inline-flex; align-items: center; gap: var(--space-6); }
.article-meta a { color: var(--lime-500); }
.article-body { padding: var(--space-40) 0 var(--space-64); }
.article-cover { aspect-ratio: 16 / 9; margin-bottom: var(--space-20); border-radius: var(--radius); overflow: hidden; }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.share-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-8); margin-bottom: var(--space-28); }
.share-label { margin-right: var(--space-4); font-size: var(--fs-small); color: var(--petrol-500); }
.share-copied { flex-basis: 100%; text-align: right; font-size: var(--fs-small); color: var(--petrol-600); }
.share-copied:empty { display: none; }
.article-text p, .article-text li { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.article-text h1, .article-text h2, .article-text h3 { margin: var(--space-32) 0 var(--space-12); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--petrol-800); }
.article-text img, .article-text .dsm-placeholder { margin: var(--space-20) 0; border-radius: var(--radius); }
.article-text a { color: var(--petrol-600); overflow-wrap: anywhere; }