/* ============================================================
   CRIE — Centro RodOil de Inovação em Energia
   Identidade visual editorial, espaço em branco, ritmo revista
   ============================================================ */

:root {
  /* Paleta CRIE — guia oficial */
  --teal-light:  #26A69A;
  --teal-mid:    #00897B;   /* Cor principal */
  --teal-dark:   #00695C;
  --blue-mid:    #1976D2;
  --blue-dark:   #1565C0;

  --ink:         #1a1a1a;
  --ink-soft:    #333333;
  --gray:        #555555;
  --gray-light:  #8a8a8a;
  --line:        #e7e7e4;
  --paper:       #fbfaf6;   /* Branco quente, editorial */
  --paper-2:     #f3f1ea;
  --white:       #ffffff;

  /* Tipografia — conforme Guia de Identidade Visual CRIE */
  --font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-sans:    'Montserrat', system-ui, -apple-system, sans-serif;
  --font-body:    'Open Sans', system-ui, -apple-system, sans-serif;

  /* Espaços */
  --container: 1320px;
  --gutter: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ============== Tipografia editorial ============== */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--teal-mid);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1.5px;
  background: var(--teal-mid);
}

.display {
  font-family: var(--font-sans);
  font-weight: 300;
  font-style: normal;
  letter-spacing: -0.025em;
  line-height: 0.98;
}

/* ============== Container ============== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ============== Navigation ============== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
}
.nav.scrolled {
  background: rgba(251, 250, 246, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
  padding: 12px 0;
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-logo .logo-img {
  height: 38px;
  width: auto;
  display: block;
  transition: opacity 0.3s ease;
}
.nav-logo .logo-dark { display: none; }
.nav.invert:not(.scrolled) .nav-logo .logo-light { display: none; }
.nav.invert:not(.scrolled) .nav-logo .logo-dark  { display: block; }
.nav.scrolled .nav-logo .logo-img { height: 32px; }
.nav.invert:not(.scrolled) .nav-links a,
.nav.invert:not(.scrolled) .nav-cta { color: var(--white); }

.nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
  list-style: none;
}
.nav-links a {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  padding: 4px 0;
  transition: color 0.2s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1.5px;
  background: var(--teal-mid);
  transition: width 0.3s ease;
}
.nav-links a:hover { color: var(--teal-mid); }
.nav-links a:hover::after { width: 100%; }

.nav-cta {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white) !important;
  transition: background 0.2s, transform 0.2s;
}
.nav-cta:hover { background: var(--teal-mid); transform: translateY(-1px); }

.nav-burger { display: none; }

/* ============== HERO ============== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: 140px 0 90px;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
  z-index: 0;
}
.hero-slide.is-active { opacity: 1; }
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,30,25,0.45) 0%, rgba(0,30,25,0.15) 50%, rgba(0,20,18,0.55) 100%),
    linear-gradient(180deg, transparent 50%, rgba(0,20,18,0.7) 100%);
  z-index: 1;
  pointer-events: none;
}
.hero-media .placeholder-photo {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 80% 50%, rgba(38,166,154,0.6), transparent),
    radial-gradient(2px 2px at 60% 80%, rgba(25,118,210,0.5), transparent),
    radial-gradient(1.5px 1.5px at 35% 65%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 90% 20%, rgba(255,255,255,0.5), transparent);
  background-size: 350px 350px, 250px 250px, 400px 400px, 300px 300px, 200px 200px;
  opacity: 0.7;
  animation: drift 60s linear infinite;
}
@keyframes drift {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 350px -350px, -250px 250px, 400px -400px, -300px 300px, 200px -200px; }
}

.hero-petals {
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: 60vmin;
  height: 60vmin;
  z-index: 1;
  opacity: 0.55;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.85);
  margin-bottom: 28px;
}
.hero-eyebrow::before {
  content: "";
  width: 36px; height: 1.5px;
  background: var(--teal-light);
}
.hero-title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(48px, 8vw, 124px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--white);
  max-width: 1100px;
  margin-bottom: 36px;
}
.hero-title em {
  font-style: normal;
  color: var(--teal-light);
  font-weight: 600;
}
.hero-title .normal {
  font-family: var(--font-sans);
  font-weight: 300;
  font-style: normal;
}
.hero-sub {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  max-width: 560px;
  margin-bottom: 48px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  padding: 16px 30px;
  border-radius: 999px;
  transition: all 0.25s;
  cursor: pointer;
}
.btn-primary {
  background: var(--white);
  color: var(--ink);
}
.btn-primary:hover {
  background: var(--teal-light);
  color: var(--white);
  transform: translateY(-2px);
}
.btn-ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.35);
}
.btn-ghost:hover {
  border-color: var(--white);
  background: rgba(255,255,255,0.08);
}
.btn-dark {
  background: var(--ink);
  color: var(--white);
}
.btn-dark:hover { background: var(--teal-mid); }

.hero-meta {
  position: absolute;
  bottom: 40px;
  right: var(--gutter);
  z-index: 2;
  text-align: right;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.hero-meta strong { display: block; color: var(--teal-light); margin-bottom: 4px; font-weight: 600; }

/* Scroll cue */
.scroll-cue {
  position: absolute;
  bottom: 40px;
  left: var(--gutter);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.scroll-cue::after {
  content: "";
  display: block;
  width: 60px; height: 1px;
  background: rgba(255,255,255,0.35);
  position: relative;
  overflow: hidden;
}
.scroll-cue::before {
  content: "";
  position: absolute;
  left: 90px; top: 50%;
  width: 30px; height: 1px;
  background: var(--teal-light);
  animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine {
  0%   { transform: translateX(-30px); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateX(60px); opacity: 0; }
}

/* ============== Section base ============== */
section {
  padding: clamp(80px, 12vw, 160px) 0;
  position: relative;
}
.section-header {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  margin-bottom: 80px;
  align-items: end;
}
.section-header h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(40px, 5.5vw, 76px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.025em;
}
.section-header h2 em {
  font-style: normal;
  color: var(--teal-mid);
  font-weight: 700;
}
.section-header p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--gray);
  max-width: 560px;
}

/* ============== Manifesto / Vale da Morte ============== */
.manifesto {
  background:
    linear-gradient(180deg, rgba(8,28,38,0.45) 0%, rgba(8,28,38,0.6) 100%),
    url('assets/bg-vale-morte.png') center center / cover no-repeat;
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.manifesto::before { display: none; }
.manifesto > * { position: relative; z-index: 1; }
.manifesto .section-header h2 { color: var(--white); }
.manifesto .section-header h2 em { color: var(--teal-light); }
.manifesto .section-header p { color: rgba(255,255,255,0.82); }
.manifesto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.manifesto-lead {
  position: sticky;
  top: 120px;
}
.manifesto-lead .quote {
  font-family: var(--font-sans);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.25;
  color: var(--white);
  margin-bottom: 40px;
  letter-spacing: -0.01em;
}
.manifesto-lead .quote .accent { color: var(--teal-light); font-weight: 600; }

.gap-cards { display: flex; flex-direction: column; gap: 0; }
.gap-card {
  border-top: 1px solid rgba(255,255,255,0.18);
  padding: 36px 0;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 28px;
  align-items: start;
  transition: padding-left 0.3s ease;
}
.gap-card:last-child { border-bottom: 1px solid rgba(255,255,255,0.18); }
.gap-card:hover { padding-left: 16px; }
.gap-card .num {
  font-family: var(--font-sans);
  font-weight: 300;
  font-style: normal;
  font-size: 48px;
  color: var(--teal-light);
  line-height: 1;
  letter-spacing: -0.02em;
}
.gap-card h4 {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--white);
}
.gap-card p {
  color: rgba(255,255,255,0.82);
  font-size: 16px;
  line-height: 1.6;
}

/* ============== Sobre / Quem somos com Timeline ============== */
.about {
  background: var(--paper-2);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
.about::before { display: none; }
.about::after { display: none; }
.about-intro {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  margin-bottom: 100px;
  align-items: end;
}
.about-intro h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(44px, 6vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.about-intro h2 em { font-style: normal; color: var(--teal-mid); font-weight: 700; }
.about-intro .lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* Timeline */
.timeline {
  position: relative;
  padding: 80px 0 60px;
}
.timeline-nodes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
/* Track sits AT the dots' vertical center */
.timeline-track {
  position: absolute;
  top: 7px;
  left: 24px;
  right: 24px;
  height: 2px;
  background: rgba(0,0,0,0.12);
  z-index: 1;
}
.timeline-progress {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--teal-light), var(--teal-mid), var(--blue-mid), var(--teal-dark));
  transition: width 0.4s ease-out;
}
.tl-node {
  position: relative;
  padding: 36px 24px 0 24px;
  text-align: left;
}
.tl-node::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(0,0,0,0.08);
  border: 2px solid rgba(0,0,0,0.2);
  transition: all 0.4s ease;
  z-index: 2;
}
.tl-node.active::before {
  background: var(--teal-mid);
  border-color: var(--teal-mid);
  box-shadow: 0 0 0 6px rgba(38,166,154,0.18);
  transform: scale(1.15);
}
.tl-node::after { content: none; }
.tl-node .year {
  font-family: var(--font-sans);
  font-weight: 300;
  font-style: normal;
  font-size: 56px;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 12px;
  transition: color 0.4s;
  letter-spacing: -0.03em;
}
.tl-node.active .year { color: var(--teal-mid); }
.tl-node .name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}
.tl-node p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* Mission/Vision/Values */
.mvv {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 80px;
}
.mvv-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 50px 40px;
  transition: background 0.3s, border-color 0.3s;
}
.mvv-card:hover {
  background: var(--paper);
  border-color: rgba(0,0,0,0.18);
}
.mvv-card .label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-mid);
  margin-bottom: 22px;
}
.mvv-card h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-style: normal;
  font-size: 24px;
  line-height: 1.25;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.mvv-card p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.values-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.values-mini .v {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.values-mini .v small {
  display: block;
  font-weight: 400;
  color: var(--gray);
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0;
}

/* ============== Laboratórios — lista editorial ============== */
.labs {
  background:
    url('assets/bg-labs-cientista.png') center center / cover no-repeat;
  color: var(--white);
  position: relative;
}
.labs::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: brightness(1.35) contrast(0.95) saturate(0.7);
  z-index: 0;
}
.labs::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8,28,38,0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
  z-index: 0;
}
.labs > * { position: relative; z-index: 1; }
.labs .section-header { position: relative; }
.labs .section-header h2 { color: var(--white); }
.labs .section-header h2 em { color: var(--teal-light); }
.labs .section-header p { color: rgba(255,255,255,0.95); }
.labs-list {
  list-style: none;
  margin: 60px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  border-radius: 0;
}
.lab-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  align-items: start;
  transition: background 0.3s;
}
.lab-item:nth-child(odd) { padding-right: 40px; border-right: 1px solid rgba(255,255,255,0.18); padding-left: 4px; }
.lab-item:nth-child(even) { padding-left: 40px; padding-right: 4px; }
.lab-item:hover { background: rgba(255,255,255,0.04); }
.lab-list-num {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--teal-light);
  padding-top: 6px;
  min-width: 32px;
}
.lab-list-body h3 {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0 0 8px;
  line-height: 1.2;
}
.lab-list-body p {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  margin: 0;
}
@media (max-width: 760px) {
  .labs-list { grid-template-columns: 1fr; }
  .lab-item,
  .lab-item:nth-child(odd),
  .lab-item:nth-child(even) {
    padding: 24px 0;
    border-right: none;
  }
  .lab-list-body h3 { font-size: 19px; }
  .lab-list-body p { font-size: 14px; }
}

/* ============== Laboratórios — slider (legacy) ============== */
.labs-slider-legacy {
  background-color: var(--ink);
  color: var(--white);
  position: relative;
}
.labs-slider-legacy-overlay {
  pointer-events: none;
}
.labs-slider-legacy-overrides h2 { color: var(--white); }

.labs-slider-wrap {
  position: relative;
  overflow: hidden;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
}
.labs-track {
  display: flex;
  gap: 24px;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.lab-card {
  flex: 0 0 380px;
  background: #14171a;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.4s, border-color 0.4s;
  position: relative;
}
.lab-card:hover {
  transform: translateY(-6px);
  border-color: var(--teal-mid);
}
.lab-image {
  height: 240px;
  position: relative;
  overflow: hidden;
  background: #0d1015;
}
.lab-image .placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 100%);
  opacity: 0.85;
}
.lab-image .placeholder svg {
  width: 70px; height: 70px;
  opacity: 0.85;
}
.lab-image::after {
  content: "PHOTO";
  position: absolute;
  top: 14px; right: 14px;
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.55);
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 2px;
}
.lab-body { padding: 28px 28px 32px; }
.lab-num {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--teal-light);
  margin-bottom: 14px;
}
.lab-card h3 {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.2;
}
.lab-card p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.65);
}

.slider-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 50px;
  gap: 30px;
}
.slider-progress {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.15);
  position: relative;
  overflow: hidden;
}
.slider-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  width: 25%;
  background: var(--teal-light);
  transition: width 0.6s, transform 0.6s;
}
.slider-arrows { display: flex; gap: 12px; }
.slider-btn {
  width: 56px; height: 56px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  transition: all 0.25s;
}
.slider-btn:hover {
  background: var(--teal-mid);
  border-color: var(--teal-mid);
}
.slider-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.slider-btn svg { width: 18px; height: 18px; }
.slider-count {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
}
.slider-count strong { color: var(--teal-light); font-size: 16px; }

/* ============== Fomento + Credenciamento ============== */
.fomento {
  background:
    linear-gradient(180deg, rgba(8,28,38,0.5) 0%, rgba(8,28,38,0.65) 100%),
    url('assets/bg-fomento-2.png') center center / cover no-repeat;
  color: var(--white);
  position: relative;
}
.fomento .section-header h2 { color: var(--white); }
.fomento .section-header h2 em { color: var(--teal-light); }
.fomento .section-header p { color: rgba(255,255,255,0.82); }
.fomento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  margin-top: 60px;
}
.legal-block {
  background: var(--white);
  padding: 50px 44px;
  border: 1px solid var(--line);
  position: relative;
}
.legal-block .stamp {
  position: absolute;
  top: 30px; right: 30px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--teal-mid);
  border: 1px solid var(--teal-mid);
  padding: 6px 12px;
  border-radius: 2px;
}
.legal-block h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-style: normal;
  font-size: 32px;
  line-height: 1.1;
  margin-bottom: 30px;
  max-width: 80%;
  letter-spacing: -0.02em;
}
.legal-list { display: flex; flex-direction: column; gap: 22px; }
.legal-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.legal-item:last-child { border-bottom: none; padding-bottom: 0; }
.legal-item .law {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--blue-dark);
  background: rgba(21,101,192,0.08);
  padding: 8px 12px;
  border-radius: 2px;
  white-space: nowrap;
  height: fit-content;
}
.legal-item h5 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}
.legal-item p { font-size: 14px; color: var(--gray); line-height: 1.55; }

/* Funding agencies — editorial rows */
.funders-list {
  list-style: none;
  margin: 60px 0 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.funder-row {
  display: grid;
  grid-template-columns: 1.1fr 1.6fr 180px;
  gap: 56px;
  align-items: center;
  padding: 32px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  transition: background 0.3s, padding-left 0.3s;
  position: relative;
}
.funder-row:hover {
  background: rgba(255,255,255,0.04);
  padding-left: 16px;
}
.funder-kind {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-light);
  margin-bottom: 10px;
}
.funder-name {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--white);
  margin: 0 0 4px;
  line-height: 1.1;
}
.funder-tagline {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  margin: 0;
  line-height: 1.4;
}
.funder-main p {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,0.85);
  margin: 0;
}
.funder-metric {
  text-align: right;
  width: 180px;
  padding-left: 24px;
  border-left: 1px solid rgba(255,255,255,0.18);
  box-sizing: border-box;
}
.funder-metric strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 36px;
  font-weight: 700;
  color: var(--teal-light);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.funder-metric span {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
@media (max-width: 1024px) {
  .funder-row {
    grid-template-columns: 1fr auto;
    gap: 24px 32px;
    padding: 28px 4px;
  }
  .funder-row:hover { padding-left: 8px; }
  .funder-side { grid-column: 1 / -1; }
  .funder-main { grid-column: 1; }
  .funder-metric {
    grid-column: 2;
    grid-row: 2;
    border-left: none;
    padding-left: 0;
    align-self: end;
  }
  .funder-name { font-size: 24px; }
  .funder-metric strong { font-size: 28px; }
}
@media (max-width: 600px) {
  .funder-row { grid-template-columns: 1fr; gap: 16px; }
  .funder-metric { grid-column: 1; grid-row: auto; text-align: left; }
}
@media (max-width: 1024px) {
  .funders-list::before { display: none; }
  .funder-row {
    grid-template-columns: 1fr;
    padding: 28px 4px;
  }
  .funder-side { padding: 0 0 16px; }
  .funder-main {
    padding: 0;
    grid-template-columns: 1fr auto;
    gap: 16px 32px;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 16px;
  }
  .funder-name { font-size: 24px; }
  .funder-metric strong { font-size: 28px; }
}
@media (max-width: 600px) {
  .funder-main { grid-template-columns: 1fr; }
  .funder-metric { text-align: left; }
}

/* Legacy funder block (kept for compat) */
.funders {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.funder {
  padding: 32px 24px;
  border: 1px solid var(--line);
  margin: -1px 0 0 -1px;
  background: var(--white);
  transition: background 0.3s, transform 0.3s;
  position: relative;
}
.funder:hover { background: var(--paper-2); }
.funder .name {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.funder .tagline {
  font-size: 12px;
  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--teal-mid);
  margin-bottom: 18px;
}
.funder p { font-size: 14px; color: var(--gray); line-height: 1.55; }
.funder-tag {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-mid);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.funder .pct {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  color: var(--blue-dark);
  margin-top: 18px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.funder .pct small {
  font-family: var(--font-sans);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray);
  display: block;
  margin-top: 6px;
}

/* ============== Por que funciona ============== */
.why {
  background:
    linear-gradient(180deg, rgba(8,28,38,0.78) 0%, rgba(13,31,45,0.85) 100%),
    url('assets/bg-laboratorio.png') center center / cover no-repeat;
  background-attachment: scroll;
  color: var(--white);
  position: relative;
}
.why .section-header { position: relative; }
.why .section-header::before {
  content: "";
  position: absolute;
  inset: -24px -32px;
  background: rgba(8,28,38,0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 6px;
  z-index: -1;
}
.why .section-header h2 { color: var(--white); }
.why .section-header h2 em { color: var(--teal-light); }
.why .section-header p { color: rgba(255,255,255,0.92); }
.why-disabled-old::after {
  content: "";
  position: absolute;
  bottom: -100px; left: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(21,101,192,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 60px;
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 4px;
  overflow: hidden;
}
.why-grid-disabled-old {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.why-card {
  background: rgba(8,28,38,0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 44px 32px 36px;
  transition: background 0.3s;
  position: relative;
  overflow: hidden;
}
.why-card { transition: background 0.35s ease; min-height: 380px; display: flex; flex-direction: column; }
.why-card:hover { background: rgba(0, 168, 142, 0.18); }
.why-card .num {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
  font-size: 96px;
  line-height: 1;
  color: var(--teal-mid);
  opacity: 0.14;
  position: absolute;
  top: 30px; right: 40px;
  transition: opacity 0.4s, color 0.4s;
  letter-spacing: -0.04em;
}
.why-card .num {
  color: var(--teal-light);
  opacity: 0.18;
  font-size: 92px;
  position: absolute;
  top: 20px;
  right: 22px;
  line-height: 1;
}
.why-card:hover .num { opacity: 0.45; }
.why-card .label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.why-card .label { color: var(--teal-light); }
.why-card h3 {
  font-family: var(--font-sans);
  color: var(--white);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.why-card p { color: rgba(255,255,255,0.82); position: relative; z-index: 1; line-height: 1.6; font-size: 14.5px; margin-top: auto; }

/* ============== Portfólio ============== */
.portfolio {
  background:
    linear-gradient(180deg, rgba(8,28,38,0.55) 0%, rgba(8,28,38,0.7) 100%),
    url('assets/bg-clean.png') center center / cover no-repeat;
  color: var(--white);
  position: relative;
}
.portfolio .section-header h2 { color: var(--white); }
.portfolio .section-header h2 em { color: var(--teal-light); }
.portfolio .section-header p { color: rgba(255,255,255,0.82); }
.products-list {
  list-style: none;
  margin: 60px 0 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.product-row {
  display: grid;
  grid-template-columns: 1.1fr 1.6fr 280px;
  gap: 56px;
  align-items: center;
  padding: 32px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  transition: background 0.3s, padding-left 0.3s;
  position: relative;
}
.product-row:hover {
  background: rgba(255,255,255,0.04);
  padding-left: 16px;
}
.product-kind {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-light);
  margin-bottom: 10px;
}
.product-name {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--white);
  margin: 0 0 4px;
  line-height: 1.1;
}
.product-tagline {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  margin: 0;
  line-height: 1.4;
}
.product-main p {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,0.85);
  margin: 0 0 16px;
}
.product-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.product-tag {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 2px;
}
.product-photo {
  width: 280px;
  height: 200px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--c1, #00897B) 0%, var(--c2, #1565C0) 100%);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.product-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255,255,255,0.05) 20px, rgba(255,255,255,0.05) 22px);
}

/* Variante "bottle" — produto isolado, fundo escuro igual ao da foto */
.product-photo--bottle {
  background: #0a0a0a !important;
}
.product-photo--bottle::before {
  background: transparent;
}
.product-photo--bottle img {
  object-fit: contain;
  padding: 0;
  filter: none;
}
.product-photo .photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(255,255,255,0.95);
}
.product-photo .photo-placeholder span {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
@media (max-width: 1024px) {
  .product-row {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 4px;
  }
  .product-row:hover { padding-left: 8px; }
  .product-photo { width: 100%; height: 220px; }
  .product-name { font-size: 24px; }
}
.cases-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 60px;
}
.case-card {
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.4s, box-shadow 0.4s;
}
.case-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.08);
}
.case-image {
  height: 320px;
  background: linear-gradient(135deg, var(--c1, #00897B) 0%, var(--c2, #1565C0) 100%);
  position: relative;
  overflow: hidden;
}
.case-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255,255,255,0.05) 20px, rgba(255,255,255,0.05) 22px);
}
.case-image .photo-tag {
  position: absolute;
  bottom: 14px; left: 14px;
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.85);
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 2px;
}
.case-image .case-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.95);
}
.case-image .case-icon svg { width: 100px; height: 100px; }
.case-body { padding: 36px 36px 40px; }
.case-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 18px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.case-meta .year { color: var(--teal-mid); }
.case-meta .area { color: var(--gray); }
.case-card h3 {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.1;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.case-card p { color: var(--gray); line-height: 1.65; margin-bottom: 24px; }
.case-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.case-tag {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink);
}

/* ============== CTA Final ============== */
.cta {
  background: url('assets/bg-cover.png') center/cover no-repeat;
  background-color: var(--ink);
  color: var(--white);
  padding: clamp(100px, 14vw, 180px) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,40,32,0.55) 0%, rgba(13,31,60,0.7) 100%);
  pointer-events: none;
  z-index: 0;
}
.cta > * { position: relative; z-index: 1; }
.cta-petals {
  position: absolute;
  width: 60vmin;
  height: 60vmin;
  opacity: 0.15;
  pointer-events: none;
}
.cta-petals.left  { left: -15vmin; top: -10vmin; }
.cta-petals.right { right: -15vmin; bottom: -10vmin; transform: rotate(180deg); }

.cta h2 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(50px, 9vw, 130px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--white);
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}
.cta h2 em { font-style: normal; color: var(--teal-light); font-weight: 600; }
.cta p {
  font-size: 19px;
  color: rgba(255,255,255,0.78);
  max-width: 560px;
  margin: 0 auto 50px;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}
.cta-actions {
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.cta .email {
  display: inline-block;
  margin-top: 36px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 4px;
  transition: color 0.2s, border-color 0.2s;
  position: relative;
  z-index: 1;
}
.cta .email:hover {
  color: var(--teal-light);
  border-color: var(--teal-light);
}

/* ============== Footer ============== */
.footer {
  background: var(--ink);
  color: rgba(255,255,255,0.65);
  padding: 80px 0 36px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
}
.footer-brand .logo {
  display: flex;
  align-items: center;
  margin-bottom: 22px;
}
.footer-brand .footer-logo-img {
  height: 44px;
  width: auto;
  display: block;
}
.footer-brand p {
  font-size: 15px;
  line-height: 1.55;
  max-width: 320px;
  font-family: var(--font-sans);
  font-weight: 400;
  color: rgba(255,255,255,0.6);
}
.footer-col h5 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal-light);
  margin-bottom: 20px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col a {
  font-family: var(--font-sans);
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--teal-light); }

.footer-bot {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.05em;
  flex-wrap: wrap;
  gap: 16px;
}

/* ============== Reveal animations ============== */
/* ============== Aceleração Digital — Método CRIE ============== */
.aceleracao {
  background: var(--paper);
  padding: clamp(90px, 12vw, 160px) 0;
  position: relative;
  overflow: hidden;
}
.aceleracao::before {
  content: "";
  position: absolute;
  top: -100px; right: -120px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(0,137,123,0.06) 0%, transparent 65%);
  z-index: 0;
  pointer-events: none;
}
.aceleracao > * { position: relative; z-index: 1; }

/* Jornada editorial — 3 macro-fases */
.trl-journey {
  margin-top: 64px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trl-journey-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.trl-phase-item {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 28px;
  padding: 44px 36px 48px;
  border-right: 1px solid var(--line);
  transition: background 0.3s;
}
.trl-phase-item:last-child { border-right: none; }
.trl-phase-item:hover { background: var(--white); }
.trl-phase-item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--ink);
}
.trl-phase-item[data-phase="pre"]::before { background: var(--teal-mid); }
.trl-phase-item[data-phase="ace"]::before { background: var(--blue-mid); }
.trl-phase-item[data-phase="ops"]::before { background: var(--ink); }
.trl-phase-item .phase-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.trl-phase-item .phase-num {
  font-family: var(--font-sans);
  font-size: clamp(56px, 6vw, 84px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.trl-phase-item[data-phase="pre"] .phase-num { color: var(--teal-mid); }
.trl-phase-item[data-phase="ace"] .phase-num { color: var(--blue-mid); }
.trl-phase-item .phase-range {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft, #555);
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}
.trl-phase-item .phase-body h3 {
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 12px 0;
  color: var(--ink);
}
.trl-phase-item .phase-body p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft, #555);
  margin: 0;
}
@media (max-width: 1024px) {
  .trl-journey-list { grid-template-columns: 1fr; }
  .trl-phase-item { border-right: none; border-bottom: 1px solid var(--line); padding: 32px 24px 36px; }
  .trl-phase-item:last-child { border-bottom: none; }
}

/* Macro-fases (legado, não usado) */
.trl-phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 70px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.trl-phase {
  background: var(--paper);
  padding: 36px 32px 38px;
  position: relative;
  transition: background 0.3s;
}
.trl-phase:hover { background: var(--white); }
.trl-phase .phase-num {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray-light);
  font-weight: 600;
}
.trl-phase .phase-range {
  display: inline-block;
  margin-left: 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--teal-mid);
  padding: 3px 10px;
  border: 1px solid var(--teal-mid);
  border-radius: 999px;
}
.trl-phase h3 {
  font-size: 28px;
  font-weight: 700;
  margin: 18px 0 12px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.trl-phase p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray);
}

/* Régua TRL 1 → 9 */
.trl-rail-wrap {
  margin-top: 80px;
}
.trl-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 12px;
  padding-top: 80px;
}
.trl-rail-line {
  position: absolute;
  top: 38px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.trl-rail-fill {
  position: absolute;
  inset: 0 100% 0 0;
  background: linear-gradient(90deg, var(--teal-mid) 0%, var(--blue-mid) 100%);
  transition: right 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.trl-step {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Hide for animation only when JS is ready (so non-JS users still see content) */
.js-ready .trl-step:not(.in) {
  opacity: 0;
  transform: translateY(20px);
}
.trl-step.in {
  opacity: 1;
  transform: translateY(0);
}
.trl-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--line);
  margin: 0 auto;
  position: relative;
  top: -68px;
  margin-bottom: -18px;
  transition: background 0.4s, border-color 0.4s, transform 0.4s;
  z-index: 2;
}
.trl-step.in .trl-dot {
  background: var(--teal-mid);
  border-color: var(--teal-mid);
  transform: scale(1.15);
}
.trl-step[data-phase="ace"].in .trl-dot {
  background: var(--blue-mid);
  border-color: var(--blue-mid);
}
.trl-step[data-phase="ops"].in .trl-dot {
  background: var(--ink);
  border-color: var(--ink);
}
.trl-card {
  background: var(--white);
  border: 1px solid var(--line);
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  padding: 18px 14px 22px;
  text-align: left;
  min-height: 180px;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.trl-step.in .trl-card {
  border-color: rgba(0,137,123,0.25);
}
.trl-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.07);
  border-color: var(--teal-mid);
}
.trl-tag {
  display: inline-block;
  font-family: var(--font-sans);  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--teal-mid);
  background: rgba(0,137,123,0.08);
  padding: 4px 9px;
  border-radius: 3px;
  margin-bottom: 10px;
}
.trl-step[data-phase="ace"] .trl-tag { color: var(--blue-mid); background: rgba(25,118,210,0.08); }
.trl-step[data-phase="ops"] .trl-tag { color: var(--ink); background: var(--paper-2); }
.trl-card h4 {
  font-size: 13.5px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}
.trl-card p {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--gray);
}

/* Regra do método */
.trl-rule {
  margin-top: 70px;
  padding: 28px 36px;
  background: var(--paper-2);
  border-left: 3px solid var(--teal-mid);
  border-radius: 0 4px 4px 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
}
.trl-rule-mark {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-mid);
  white-space: nowrap;
}
.trl-rule p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* CTA da seção */
.trl-cta {
  margin-top: 60px;
  padding: 56px;
  background: var(--ink);
  color: var(--white);
  border-radius: 6px;
}
.trl-cta-head {
  text-align: center;
  margin-bottom: 48px;
}
.trl-cta-head h3 {
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
  letter-spacing: -0.015em;
}
.trl-cta-head p {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  max-width: 560px;
  margin: 0 auto;
}
.trl-steps-cta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.step-cta {
  padding: 36px 32px;
  border-right: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.step-cta:last-child { border-right: none; }
.step-cta .step-num {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--teal-light);
}
.step-cta h4 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.01em;
  margin: 0;
}
.step-cta p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
  flex: 1;
  margin: 0;
}
.step-cta .step-meta {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.5);
  font-style: italic;
  margin-top: auto;
  padding-top: 16px;
}
.step-cta .btn {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.step-cta .btn-secondary {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.4);
}
.step-cta .btn-secondary:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}
.step-cta .btn-primary {
  background: var(--white);
  color: var(--ink);
}
.step-cta .btn-primary:hover {
  background: var(--teal-light);
  color: var(--white);
}

/* Responsivo */
@media (max-width: 1024px) {
  .trl-phases { grid-template-columns: 1fr; }
  .trl-rail {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-top: 0;
  }
  .trl-rail-line { display: none; }
  .trl-step { text-align: left; }
  .trl-dot {
    position: absolute;
    top: 22px; left: -8px;
    margin: 0;
    width: 14px; height: 14px;
  }
  .trl-card {
    min-height: auto;
    padding: 18px 22px 22px;
    margin-left: 14px;
    border-left: 3px solid var(--line);
  }
  .trl-card h4 { font-size: 16px; }
  .trl-card p { font-size: 13.5px; }
  .trl-step.in .trl-card { border-left-color: var(--teal-mid); }
  .trl-step[data-phase="ace"].in .trl-card { border-left-color: var(--blue-mid); }
  .trl-step[data-phase="ops"].in .trl-card { border-left-color: var(--ink); }
  .trl-rule { grid-template-columns: 1fr; gap: 12px; padding: 24px 28px; }
  .trl-cta { padding: 36px 28px; }
  .trl-cta-head { margin-bottom: 32px; }
  .trl-steps-cta { grid-template-columns: 1fr; }
  .step-cta {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding: 28px 4px;
  }
  .step-cta:last-child { border-bottom: none; }
}

@media (max-width: 600px) {
  .trl-phase { padding: 28px 24px; }
  .trl-phase h3 { font-size: 24px; }
}

/* Only hide reveals once JS has confirmed it will animate them.
   This keeps the site visible for users with prefers-reduced-motion,
   non-JS clients, and any case where IntersectionObserver doesn't fire. */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js-ready .reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > * { transition-delay: var(--d, 0s); }

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

/* Petal animation */
.petals-svg path {
  transform-origin: center;
  animation: petalFloat 8s ease-in-out infinite;
}
.petals-svg path:nth-child(1) { animation-delay: 0s; }
.petals-svg path:nth-child(2) { animation-delay: -1s; }
.petals-svg path:nth-child(3) { animation-delay: -2s; }
.petals-svg path:nth-child(4) { animation-delay: -3s; }
.petals-svg path:nth-child(5) { animation-delay: -4s; }
@keyframes petalFloat {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.04) rotate(2deg); }
}

/* ============== Responsive ============== */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .funders { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .why-card { min-height: 320px; }
  .section-header { grid-template-columns: 1fr; gap: 24px; }
  .manifesto-grid { grid-template-columns: 1fr; gap: 50px; }
  .manifesto-lead { position: static; }
  .about-intro { grid-template-columns: 1fr; gap: 30px; }
  .timeline-nodes { grid-template-columns: 1fr 1fr; }
  .mvv { grid-template-columns: 1fr; }
  .why-grid, .cases-grid, .fomento-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 760px) {
  :root { --gutter: 18px; }

  /* Prevent horizontal overflow anywhere */
  html, body { overflow-x: hidden; max-width: 100vw; }
  * { max-width: 100%; }
  img, svg { max-width: 100%; height: auto; }

  /* Nav */
  .nav { padding: 14px 0; }
  .nav-logo .logo-img { height: 32px; }
  .nav.scrolled .nav-logo .logo-img { height: 28px; }

  /* Hero */
  .hero {
    min-height: auto;
    padding: 110px 0 70px;
    align-items: flex-start;
  }
  .hero-content { padding-top: 20px; }
  .hero-eyebrow {
    font-size: 10px;
    letter-spacing: 0.16em;
    margin-bottom: 18px;
    display: inline-block;
    line-height: 1.4;
  }
  .hero-title {
    font-size: clamp(28px, 9vw, 42px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 20px;
    max-width: 100%;
  }
  .hero-title em { font-weight: 600; }
  .hero-sub {
    font-size: 14px !important;
    line-height: 1.6 !important;
    width: auto !important;
    max-width: 100% !important;
    text-align: left !important;
    margin: 0 0 28px !important;
    color: rgba(255,255,255,0.85) !important;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hero-actions .btn {
    justify-content: center;
    width: 100%;
    padding: 14px 20px;
    font-size: 14px;
  }
  .hero-meta { display: none; }
  .scroll-cue { display: none; }

  /* Section spacing */
  .manifesto, .about, .labs, .fomento, .why, .portfolio, .cta {
    padding: 60px 0 !important;
  }

  /* Section headers */
  .section-header h2 {
    font-size: clamp(26px, 7.5vw, 36px) !important;
    line-height: 1.08 !important;
  }
  .section-header p { font-size: 15px; line-height: 1.55; }

  /* Manifesto */
  .manifesto-lead .quote { font-size: 19px !important; line-height: 1.35 !important; }
  .gap-card { gap: 16px; padding: 22px 18px; }
  .gap-card .num { font-size: 32px !important; }
  .gap-card h4 { font-size: 17px; }
  .gap-card p { font-size: 14px; }

  /* About */
  .about-intro h2 { font-size: clamp(28px, 8vw, 40px) !important; }
  .about-intro .lead { font-size: 15px; line-height: 1.6; }

  /* Timeline — vertical stack on mobile */
  .timeline { padding: 30px 0; }
  .timeline-nodes { grid-template-columns: 1fr !important; gap: 0; }
  .timeline-track {
    top: 0;
    bottom: 0;
    left: 7px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .timeline-progress {
    height: 0%;
    width: 100% !important;
    inset: 0 0 auto 0;
  }
  .tl-node {
    padding: 0 0 32px 32px;
    margin: 0;
  }
  .tl-node:last-child { padding-bottom: 0; }
  .tl-node::before {
    top: 6px;
    left: 0;
    width: 14px; height: 14px;
  }
  .tl-node .year { font-size: 32px !important; margin-bottom: 4px; }
  .tl-node .name { font-size: 11px; margin-bottom: 8px; }
  .tl-node p { font-size: 14px; }

  /* MVV cards */
  .mvv-card { padding: 28px 22px; }
  .mvv-card h4 { font-size: 19px !important; }
  .mvv-card p { font-size: 14px; }
  .values-mini { grid-template-columns: 1fr 1fr; gap: 14px; }
  .values-mini .v { font-size: 13px; }
  .values-mini .v small { font-size: 11px; }

  /* Labs */
  .labs-track { gap: 14px; }
  .lab-card {
    flex: 0 0 calc(100vw - 50px) !important;
    width: calc(100vw - 50px) !important;
    max-width: calc(100vw - 50px) !important;
  }
  .lab-image { height: 180px; }
  .lab-body { padding: 22px 20px; }
  .lab-body h3 { font-size: 20px; }
  .lab-body p { font-size: 14px; }
  .slider-controls { flex-wrap: wrap; gap: 14px; }
  .slider-count { width: 100%; text-align: center; font-size: 13px; }
  .slider-progress { flex: 1; }

  /* Fomento — fix the "Captamos recursos que outros centros..." overflow */
  .fomento-grid { gap: 40px !important; }
  .legal-block { padding: 32px 22px; }
  .legal-block h3 { font-size: 22px !important; max-width: 100% !important; line-height: 1.15 !important; }
  .legal-block .stamp { font-size: 10px; padding: 6px 12px; }
  .legal-list { gap: 18px; }
  .legal-item {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding-bottom: 18px;
  }
  .legal-item .law {
    font-size: 10px !important;
    min-width: 0 !important;
    padding: 6px 10px !important;
    width: max-content;
  }
  .legal-item h5 { font-size: 15px; }
  .legal-item p { font-size: 13px; }

  /* Funders — stack into single column to avoid overflow */
  .funders { grid-template-columns: 1fr !important; }
  .funder { padding: 26px 20px; }
  .funder .name { font-size: 22px; }
  .funder .tagline { font-size: 11px; margin-bottom: 14px; }
  .funder p { font-size: 13px; }
  .funder .pct { font-size: 28px !important; margin-top: 14px; }
  .funder .pct small { font-size: 10px; }
  .funder-tag { font-size: 9px; margin-bottom: 12px; padding-bottom: 10px; }

  /* Why — make sure number doesn't crowd headline */
  .why-card { padding: 30px 22px; }
  .why-card .num {
    font-size: 56px !important;
    top: 14px !important;
    right: 18px !important;
    opacity: 0.12;
  }
  .why-card .label { font-size: 10px; letter-spacing: 0.14em; }
  .why-card h3 {
    font-size: 20px !important;
    line-height: 1.15 !important;
    padding-right: 50px;
  }
  .why-card p { font-size: 13px; }

  /* Portfolio */
  .case-image { height: 200px; }
  .case-body { padding: 26px 22px; }
  .case-card h3 { font-size: 22px !important; }
  .case-card p { font-size: 14px; }
  .case-meta { font-size: 11px; }
  .case-tags { gap: 6px; }
  .case-tag { font-size: 11px; padding: 5px 10px; }

  /* CTA */
  .cta { padding: 70px 0 !important; }
  .cta h2 {
    font-size: clamp(34px, 11vw, 56px) !important;
    line-height: 1 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 22px;
  }
  .cta p { font-size: 15px; line-height: 1.6; }
  .cta-actions .btn { width: 100%; justify-content: center; padding: 14px 20px; font-size: 14px; }

  /* Footer */
  .footer { padding: 50px 0 30px; }
  .footer-top { grid-template-columns: 1fr !important; gap: 30px; }
  .footer-brand .footer-logo-img { height: 36px; }
  .footer-brand p { font-size: 14px; }
  .footer-col h5 { font-size: 13px; }
  .footer-col ul { gap: 8px; }
  .footer-col a { font-size: 14px; }
  .footer-bot { flex-direction: column; gap: 8px; align-items: flex-start; padding-top: 28px; }
  .footer-bot span { font-size: 11px; }
}

@media (max-width: 420px) {
  :root { --gutter: 16px; }
  .hero-title { font-size: 26px !important; }
  .section-header h2 { font-size: 24px !important; }
  .about-intro h2 { font-size: 26px !important; }
  .cta h2 { font-size: 32px !important; }
  .lab-card {
    flex: 0 0 calc(100vw - 40px) !important;
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
  }
  .why-card h3 { padding-right: 40px; font-size: 18px !important; }
  .why-card .num { font-size: 48px !important; }
}


/* ============================================================
   TWEAKS — controles expressivos
   data-vibe: editorial | bold | imersivo
   data-energia: verde | azul | bicolor
   data-petalas-mov: on | off
   ============================================================ */

/* ---------- VIBE ---------- */
/* Editorial é o default — sem overrides */

/* Bold: tipografia mais densa e gritante, fundos com mais carga */
body[data-vibe="bold"] h1,
body[data-vibe="bold"] h2,
body[data-vibe="bold"] h3 {
  font-weight: 800;
  letter-spacing: -0.035em;
}
body[data-vibe="bold"] .display { font-weight: 600; letter-spacing: -0.04em; }
body[data-vibe="bold"] .hero { padding: 200px 0 220px; }
body[data-vibe="bold"] .hero-display { font-size: clamp(60px, 11vw, 180px); line-height: 0.92; }
body[data-vibe="bold"] .hero-media::before {
  background:
    linear-gradient(90deg, rgba(0,30,25,0.7) 0%, rgba(0,30,25,0.3) 50%, rgba(0,20,18,0.75) 100%),
    linear-gradient(180deg, transparent 35%, rgba(0,20,18,0.85) 100%);
}
body[data-vibe="bold"] .about::before { opacity: 0.32; }
body[data-vibe="bold"] .manifesto::before { opacity: 0.38; }
body[data-vibe="bold"] .labs-disabled-vibe-bold {
  background: transparent;
}
body[data-vibe="bold"] .cta::before {
  background: linear-gradient(135deg, rgba(10,40,32,0.78) 0%, rgba(13,31,60,0.9) 100%);
}
body[data-vibe="bold"] .eyebrow { font-weight: 700; letter-spacing: 0.22em; }

/* Imersivo: tipografia mais leve, fotos protagonistas, overlays mínimos */
body[data-vibe="imersivo"] h1,
body[data-vibe="imersivo"] h2,
body[data-vibe="imersivo"] h3 {
  font-weight: 300;
  letter-spacing: -0.025em;
}
body[data-vibe="imersivo"] .display { font-weight: 200; }
body[data-vibe="imersivo"] .hero-display { font-weight: 200; }
body[data-vibe="imersivo"] .hero { padding: 240px 0 200px; min-height: 100vh; }
body[data-vibe="imersivo"] .hero-media::before {
  background:
    linear-gradient(90deg, rgba(0,30,25,0.25) 0%, rgba(0,30,25,0.05) 50%, rgba(0,20,18,0.35) 100%),
    linear-gradient(180deg, transparent 60%, rgba(0,20,18,0.55) 100%);
}
body[data-vibe="imersivo"] .about::before { opacity: 0.42; }
body[data-vibe="imersivo"] .manifesto::before { opacity: 0.5; }
body[data-vibe="imersivo"] .labs-disabled-vibe-imersivo {
  background: transparent;
}
body[data-vibe="imersivo"] .cta::before {
  background: linear-gradient(135deg, rgba(10,40,32,0.35) 0%, rgba(13,31,60,0.5) 100%);
}
body[data-vibe="imersivo"] .section { padding: clamp(120px, 16vw, 200px) 0; }

/* ---------- ENERGIA ---------- */
/* Verde é o default */

/* Azul: troca o destaque por azul ZTEC */
body[data-energia="azul"] {
  --teal-light: #42A5F5;
  --teal-mid:   #1976D2;
  --teal-dark:  #1565C0;
}
body[data-energia="azul"] .eyebrow,
body[data-energia="azul"] .accent,
body[data-energia="azul"] em {
  color: #1976D2;
}
body[data-energia="azul"] .eyebrow::before { background: #1976D2; }

/* Bicolor: alterna verde/azul por seção via :nth-child */
body[data-energia="bicolor"] .section:nth-of-type(odd) em,
body[data-energia="bicolor"] .section:nth-of-type(odd) .eyebrow {
  color: var(--teal-mid);
}
body[data-energia="bicolor"] .section:nth-of-type(even) em,
body[data-energia="bicolor"] .section:nth-of-type(even) .eyebrow {
  color: var(--blue-mid);
}
body[data-energia="bicolor"] .section:nth-of-type(odd) .eyebrow::before {
  background: var(--teal-mid);
}
body[data-energia="bicolor"] .section:nth-of-type(even) .eyebrow::before {
  background: var(--blue-mid);
}
body[data-energia="bicolor"] .btn-primary {
  background: linear-gradient(135deg, var(--teal-mid) 0%, var(--blue-mid) 100%);
}

/* ---------- PÉTALAS EM MOVIMENTO ---------- */
@keyframes petal-float-1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(8px, -12px) rotate(6deg); }
}
@keyframes petal-float-2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-10px, -8px) rotate(-5deg); }
}
@keyframes petal-float-3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(6px, 14px) rotate(8deg); }
}
@keyframes petal-float-4 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-7px, 10px) rotate(-7deg); }
}
@keyframes petal-float-5 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(12px, -16px) rotate(10deg); }
}

body[data-petalas-mov="on"] .petals-svg path:nth-child(1) {
  transform-origin: center;
  transform-box: fill-box;
  animation: petal-float-1 6s ease-in-out infinite;
}
body[data-petalas-mov="on"] .petals-svg path:nth-child(2) {
  transform-origin: center;
  transform-box: fill-box;
  animation: petal-float-2 7s ease-in-out infinite;
}
body[data-petalas-mov="on"] .petals-svg path:nth-child(3) {
  transform-origin: center;
  transform-box: fill-box;
  animation: petal-float-3 5.5s ease-in-out infinite;
}
body[data-petalas-mov="on"] .petals-svg path:nth-child(4) {
  transform-origin: center;
  transform-box: fill-box;
  animation: petal-float-4 8s ease-in-out infinite;
}
body[data-petalas-mov="on"] .petals-svg path:nth-child(5) {
  transform-origin: center;
  transform-box: fill-box;
  animation: petal-float-5 6.5s ease-in-out infinite;
}