/* Evolução — narrativa editorial detalhada */
.page-evolucao { background: var(--cream); }

.evolution-hero .hero-copy { top: 53%; }
.evolution-hero .hero-copy h1 { max-width: 930px; }
.evolution-hero .hero-copy h1 em { margin-left: 8.5vw; }

.hero-scroll {
  position: absolute;
  z-index: 5;
  left: 5vw;
  bottom: 34px;
  color: rgba(255,255,255,.88);
  font: 700 8px/1 Arial, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero-scroll b { margin-left: 14px; font-size: 13px; font-weight: 400; }

.evo-intro {
  min-height: 625px;
  position: relative;
  padding: 120px 8vw 90px 20vw;
  display: grid;
  grid-template-columns: minmax(520px, 1.35fr) minmax(300px, .78fr);
  gap: 8vw;
  align-items: center;
  overflow: hidden;
}
.evo-intro-title { position: relative; z-index: 3; }
.evo-intro h2 {
  margin: 0;
  color: var(--ink);
  font: 400 clamp(58px, 5.2vw, 84px)/.98 Georgia, "Times New Roman", serif;
  letter-spacing: -.045em;
}
.evo-intro h2 em { color: var(--olive); }
.evo-intro > p {
  position: relative;
  z-index: 3;
  max-width: 420px;
  margin: 0;
  color: #606851;
  font-size: 16px;
  line-height: 1.75;
}
.evo-intro-side {
  position: absolute;
  z-index: 3;
  left: 14.3vw;
  top: 39%;
  writing-mode: vertical-rl;
  color: #6f713d;
  font: 500 9px/1 Arial, sans-serif;
  letter-spacing: .3em;
}
.evo-intro-fern, .evo-intro-branch {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .18;
  object-fit: contain;
}
.evo-intro-fern { left: -40px; top: 45px; width: 320px; transform: rotate(-8deg); }
.evo-intro-branch { right: -30px; bottom: -90px; width: 240px; }

.evo-timeline {
  width: 100%;
  padding: 24px clamp(28px, 3vw, 54px) 72px;
}
.evo-stage {
  width: min(1480px, 100%);
  min-height: 660px;
  margin: 0 auto;
  padding: 50px 0;
  display: grid;
  grid-template-columns: 70px minmax(650px, 1.45fr) minmax(320px, .65fr);
  gap: clamp(28px, 3vw, 48px);
  align-items: center;
  border-top: 1px solid rgba(82, 88, 63, .19);
}
.evo-stage:last-child { border-bottom: 1px solid rgba(82, 88, 63, .19); }
.evo-stage-number {
  align-self: start;
  padding-top: 20px;
  color: #808240;
  font: 400 42px/1 Georgia, serif;
  letter-spacing: .03em;
}
.evo-stage-copy { align-self: center; }
.evo-stage-label {
  margin: 0 0 26px;
  color: #878446;
  font: 600 8px/1.4 Arial, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.evo-stage-copy h3 {
  max-width: 470px;
  margin: 0 0 20px;
  color: #596047;
  font: 400 clamp(38px, 3.2vw, 54px)/1.02 Georgia, serif;
  letter-spacing: -.025em;
}
.evo-stage-copy > p:last-child {
  max-width: 500px;
  margin: 0;
  color: #6a715f;
  font-size: 16px;
  line-height: 1.75;
}

.evo-stage-media { min-width: 0; }
.evo-stage-media figure { margin: 0; overflow: hidden; background: #d6d1a2; }
.evo-stage-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.9) contrast(.98);
  transition: transform 1s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
.evo-stage-media figure:hover img { transform: scale(1.025); filter: saturate(1) contrast(1); }

.media-pair {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-rows: 580px;
  gap: 14px;
}
.media-pair .secondary { margin-top: 70px; height: 440px; }

.media-triptych {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  grid-template-rows: 300px 286px;
  gap: 14px;
}
.media-triptych .primary { grid-row: 1 / 3; }
.media-triptych .secondary, .media-triptych .tertiary { min-height: 0; }

.media-single {
  display: grid;
  grid-template-rows: 600px;
}

.media-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 600px;
  gap: 14px;
}

.media-grid-four {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  grid-template-rows: 300px 300px;
  gap: 14px;
}
.media-grid-four figure:first-child { grid-row: 1 / 3; }
.media-grid-four figure:nth-child(4) { display: none; }
.evo-stage--deep .media-grid-four,
.evo-stage--landscape .media-grid-four,
.evo-stage--final .media-grid-four,
.inauguration-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 300px 300px;
}
.evo-stage--deep .media-grid-four figure:first-child,
.evo-stage--landscape .media-grid-four figure:first-child,
.evo-stage--final .media-grid-four figure:first-child,
.inauguration-grid figure:first-child { grid-row: auto; }
.evo-stage--deep .media-grid-four figure:nth-child(4),
.evo-stage--landscape .media-grid-four figure:nth-child(4),
.evo-stage--final .media-grid-four figure:nth-child(4),
.inauguration-grid figure:nth-child(4) { display: block; }
.portrait-accent .secondary img { object-position: 72% center; }
.evo-stage--portal .media-triptych .primary img { object-position: center; }
.inauguration-grid img { filter: saturate(.72) contrast(1.02); }

.evo-aerial-finale {
  position: relative;
  min-height: 760px;
  background: var(--cream);
  overflow: hidden;
}
.evo-aerial-grid {
  height: 760px;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
}
.evo-aerial-grid figure { margin: 0; overflow: hidden; }
.evo-aerial-grid figure:first-child { grid-row: 1 / 3; }
.evo-aerial-grid img { width:100%; height:100%; object-fit:cover; filter:saturate(.86); }
.evo-aerial-caption {
  position: absolute;
  left: 10vw;
  bottom: 74px;
  width: min(430px, 80vw);
  padding: 28px 34px;
  background: var(--pine);
  color: #fff;
}
.evo-aerial-caption span {
  display: block;
  margin-bottom: 10px;
  color: #d6d59a;
  font: 700 8px/1 Arial, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.evo-aerial-caption strong { font: 400 22px/1.35 Georgia, serif; }

.evo-outro {
  position: relative;
  min-height: 720px;
  padding: 120px 10vw;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  overflow: hidden;
}
.evo-big-nine {
  position: relative;
  z-index: 2;
  color: transparent;
  -webkit-text-stroke: 1px rgba(231,226,185,.25);
  font: 400 clamp(210px, 27vw, 430px)/.7 Georgia, serif;
  letter-spacing: -.08em;
}
.evo-outro-copy { position: relative; z-index: 4; }
.evo-outro-copy h2 {
  margin: 26px 0 38px;
  color: #fff;
  font: 400 clamp(58px, 5.2vw, 84px)/.95 Georgia, serif;
  letter-spacing: -.035em;
}
.evo-outro-copy h2 em { color: var(--olive); }
.evo-outro-copy a {
  color: #fff;
  font: 700 9px/1 Arial, sans-serif;
  letter-spacing: .17em;
  text-decoration: none;
  text-transform: uppercase;
}
.evo-outro-copy a span { margin-left: 8px; }
.evo-outro-mountains {
  position: absolute;
  z-index: 1;
  left: 15%;
  right: 0;
  bottom: -70px;
  width: 70%;
  opacity: .19;
  filter: brightness(.92) sepia(.2);
  mix-blend-mode: screen;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .evo-intro { padding-left: 14vw; grid-template-columns: 1fr .72fr; }
  .evo-intro-side { left: 7vw; }
  .evo-stage { grid-template-columns: 80px minmax(430px, 1.2fr) minmax(280px,.8fr); gap: 34px; }
  .media-pair { grid-template-rows: 460px; }
  .media-triptych { grid-template-rows: 260px 210px; }
}

@media (min-width: 1101px) and (max-width: 1320px) {
  .evo-timeline { padding-inline: 32px; }
  .evo-stage {
    grid-template-columns: 64px minmax(560px, 1.3fr) minmax(290px, .7fr);
    gap: 28px;
  }
  .media-pair { grid-template-rows: 540px; }
  .media-pair .secondary { height: 400px; }
  .media-triptych { grid-template-rows: 278px 248px; }
  .media-single,
  .media-duo { grid-template-rows: 540px; }
  .media-grid-four,
  .evo-stage--deep .media-grid-four,
  .evo-stage--landscape .media-grid-four,
  .evo-stage--final .media-grid-four,
  .inauguration-grid { grid-template-rows: 270px 270px; }
}

@media (max-width: 900px) {
  .evolution-hero .hero-copy h1 em { margin-left: 0; }
  .evo-intro { min-height: auto; padding: 92px 54px; grid-template-columns: 1fr; gap: 38px; }
  .evo-intro-side { display: none; }
  .evo-intro > p { max-width: 620px; }
  .evo-timeline { padding: 20px 40px 70px; }
  .evo-stage { min-height: auto; grid-template-columns: 65px 1fr; gap: 24px; padding: 58px 0; }
  .evo-stage-number { grid-column: 1; grid-row: 1 / 3; }
  .evo-stage-media { grid-column: 2; }
  .evo-stage-copy { grid-column: 2; }
  .evo-stage-copy h3 { max-width: 650px; }
  .evo-stage-copy > p:last-child { max-width: 680px; }
  .evo-outro { min-height: 620px; grid-template-columns: .65fr 1fr; padding: 90px 6vw; }
}

@media (max-width: 650px) {
  .hero-scroll { left: 22px; bottom: 24px; }
  .evo-intro { padding: 78px 24px; }
  .evo-intro h2 { font-size: clamp(48px, 13vw, 64px); }
  .evo-intro-fern { width: 210px; opacity: .13; }
  .evo-timeline { padding: 10px 20px 60px; }
  .evo-stage { display: block; padding: 54px 0 64px; }
  .evo-stage-number { margin-bottom: 28px; padding: 0; font-size: 36px; }
  .evo-stage-media { margin-bottom: 36px; }
  .media-pair, .media-triptych, .media-grid-four,
  .evo-stage--deep .media-grid-four,
  .evo-stage--landscape .media-grid-four,
  .evo-stage--final .media-grid-four,
  .inauguration-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 270px 210px;
    gap: 8px;
  }
  .media-pair .primary { grid-column: 1 / 3; }
  .media-pair .secondary { margin: 0; height: auto; grid-column: 1 / 3; }
  .media-triptych .primary { grid-column: 1 / 3; grid-row: 1; }
  .media-triptych .secondary, .media-triptych .tertiary { grid-row: 2; }
  .media-grid-four { grid-template-rows: 220px 220px; }
  .media-grid-four figure:first-child { grid-row: auto; }
  .media-grid-four figure:nth-child(4) { display: block; }
  .media-single {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 320px;
  }
  .media-duo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 250px 250px;
    gap: 8px;
  }
  .evo-stage-copy h3 { font-size: 40px; }
  .evo-stage-copy > p:last-child { font-size: 15px; }
  .evo-aerial-finale { min-height: 620px; }
  .evo-aerial-grid { height: 620px; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .evo-aerial-grid figure:first-child { grid-row: 1 / 3; }
  .evo-aerial-grid figure:not(:first-child) { display: none; }
  .evo-aerial-caption { left: 20px; bottom: 28px; padding: 22px 24px; }
  .evo-outro { min-height: 560px; display: block; padding: 110px 24px 70px; }
  .evo-big-nine { position: absolute; left: -10px; top: 88px; font-size: 220px; opacity: .65; }
  .evo-outro-copy { margin-top: 120px; }
  .evo-outro-copy h2 { font-size: 50px; }
  .evo-outro-mountains { width: 120%; left: -20%; }
}
