:root {
  --ink: #04030a;
  --ink-2: #12051f;
  --violet: #5b1c7b;
  --violet-bright: #9a55bf;
  --lavender: #d9bbf2;
  --paper: #f5eff8;
  --gold: #d9a83d;
  --gold-light: #f2d581;
  --line: rgba(255,255,255,.14);
  --text: #faf6fb;
  --muted: #bdb1c4;
  --display: "Barlow Condensed", sans-serif;
  --sans: "DM Sans", sans-serif;
  --pad: clamp(22px, 5vw, 82px);
  --hero-progress: 0;
  --hero-scale: 1;
  --hero-exit: 0;
  --hero-mobile-shift: 0px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); overflow-x: clip; }
body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--sans); overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--gold); color: var(--ink); }

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  height: 94px;
  padding: 0 clamp(30px, 5vw, 92px);
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto minmax(250px, 1fr);
  align-items: center;
  gap: clamp(22px, 3vw, 52px);
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: height .3s, background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.site-header.visible { opacity: 1; pointer-events: auto; transform: none; }
.site-header.scrolled {
  height: 94px;
  background: rgba(8,3,15,.95);
  box-shadow: 0 16px 45px rgba(0,0,0,.25);
  backdrop-filter: blur(18px);
}
.brand { width: 104px; justify-self: start; }
.brand img { width: 100%; max-height: 56px; object-fit: contain; }
.desktop-nav { display: flex; justify-self: center; gap: clamp(24px, 2.4vw, 42px); }
.desktop-nav a { font-family: var(--display); font-size: 1.2rem; letter-spacing: .055em; text-transform: uppercase; color: #eee7f1; transition: color .2s; white-space: nowrap; }
.desktop-nav a:hover { color: var(--gold-light); }
.header-cta { justify-self: end; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 27px; border-radius: 999px; background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #180e04; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; box-shadow: 0 12px 40px rgba(217,168,61,.18); transition: transform .25s, box-shadow .25s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 17px 48px rgba(217,168,61,.32); }
.button-small { min-height: 46px; padding: 0 22px; font-size: .67rem; }
.menu-toggle { display: none; position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.menu-toggle span { position: absolute; left: 9px; width: 26px; height: 2px; background: white; transform-origin: center; transition: top .24s ease, transform .24s ease, opacity .2s ease; }
.menu-toggle span:first-child { top: 15px; }
.menu-toggle span:last-child { top: 27px; }
.menu-toggle.is-open span:first-child { top: 21px; transform: rotate(45deg); }
.menu-toggle.is-open span:last-child { top: 21px; transform: rotate(-45deg); }
.mobile-nav { display: none; }

/* Hero: restored 1920×1080 layered stage from the original version. */
.hero-stage { position: relative; z-index: 10; height: 180vh; background: var(--ink); }
.hero-pin { position: sticky; top: 0; height: 100vh; min-height: 620px; overflow: visible; background: var(--ink); }
.hero-pin::before { display: none; }
.hero-canvas { position: absolute; left: 50%; top: 0; width: 1920px; height: 1080px; transform: translateX(-50%) scale(var(--hero-scale)); transform-origin: top center; overflow: visible; }
.hero-canvas.mobile-scale { top: 50%; transform: translate(-50%,-50%) scale(var(--hero-scale)); }
.hero-portal-bg { position: absolute; z-index: 1; left: calc(184px + var(--hero-progress) * -106px); top: calc(-334px + var(--hero-progress) * -92px); width: calc(1553px + var(--hero-progress) * 210px); height: calc(1508px + var(--hero-progress) * 204px); background: url("assets/New Hero Section/bg-central_4.png") center/100% 100% no-repeat; -webkit-mask-image: radial-gradient(ellipse 66% 60% at center, #000 54%, rgba(0,0,0,.96) 72%, transparent 100%); mask-image: radial-gradient(ellipse 66% 60% at center, #000 54%, rgba(0,0,0,.96) 72%, transparent 100%); }
.hero-portal-overlay { position: absolute; z-index: 2; left: 0; top: calc(730px + var(--hero-progress) * -300px); width: 1920px; height: calc(800px + var(--hero-progress) * -308px); background: linear-gradient(180deg, transparent, var(--ink) 92%); pointer-events: none; }
.hero-portal-mist { position: absolute; z-index: 3; left: calc(-120px + var(--hero-progress) * -200px); top: calc(500px + var(--hero-progress) * -430px); width: calc(2160px + var(--hero-progress) * 400px); height: calc(1215px + var(--hero-progress) * 225px); background: url("assets/New Hero Section/alice_foreground_mist_true_alpha.png") center/contain no-repeat; opacity: calc(1 - var(--hero-progress) * .72); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%); pointer-events: none; }
.hero-cloud-group { position: absolute; z-index: 7; pointer-events: none; }
body:not(.hero-complete) .hero-cloud-group,
body:not(.hero-complete) .hero-portal-mist { will-change: transform, opacity; }
.hero-cloud-left { left: -682px; top: 519px; width: 1912px; height: 1031px; transform: translate(calc(var(--hero-progress) * -702px), calc(var(--hero-progress) * -151px)); }
.hero-cloud-right { left: 634px; top: 588px; width: 1846px; height: 1038px; transform: translate(calc(var(--hero-progress) * 670px), calc(var(--hero-progress) * -170px)); }
.hero-cloud-sub { position: absolute; background: center/contain no-repeat; }
.cloud-back-left { left: 433px; top: 0; width: 1058px; height: 706px; background-image: url("assets/New Hero Section/assets-alice_3_2.png"); }
.cloud-middle-left { left: 0; top: 118px; width: 1912px; height: 913px; z-index: 2; background-image: url("assets/New Hero Section/assets-alice_7_1.png"); }
.cloud-front-left { left: 514px; top: 527px; width: 1136px; height: 435px; z-index: 3; background-image: url("assets/New Hero Section/assets-alice_3_2.png"); }
.cloud-back-right { left: 543px; top: 49px; width: 936px; height: 625px; background-image: url("assets/New Hero Section/assets-alice_3_2.png"); }
.cloud-middle-right { left: 0; top: 0; width: 1846px; height: 1038px; z-index: 2; background-image: url("assets/New Hero Section/assets-alice_7_1.png"); }
.cloud-front-right { left: 17px; top: 569px; width: 1136px; height: 435px; z-index: 3; background-image: url("assets/New Hero Section/assets-alice_3_2.png"); }
.hero-content-clipper { position: absolute; z-index: 6; inset: 0; width: 1920px; height: 1080px; overflow: visible; pointer-events: none; }
.hero-content-clipper > * { pointer-events: auto; }
.hero-logo { position: absolute; left: calc(635px + var(--hero-progress) * 115px); top: calc(1168px + var(--hero-progress) * -628px); width: calc(650px + var(--hero-progress) * -230px); margin: 0; filter: drop-shadow(0 12px 32px rgba(0,0,0,.72)); }
.hero-logo img { width: 100%; }
.hero-tagline { position: absolute; left: 745px; top: calc(1615px + var(--hero-progress) * -810px); width: 430px; margin: 0; text-align: center; font-size: 1.05rem; line-height: 1.55; color: white; text-shadow: 0 3px 14px #000; }
.hero-actions { position: absolute; left: 796px; top: calc(1760px + var(--hero-progress) * -865px); width: 328px; display: flex; justify-content: center; }
.hero-institutional { position: absolute; left: 650px; top: calc(1832px + var(--hero-progress) * -865px); width: 620px; display: grid; grid-template-columns: 220px 370px; gap: 30px; align-items: center; opacity: clamp(0,calc((var(--hero-progress) - .68) * 3.125),1); filter: drop-shadow(0 7px 18px rgba(0,0,0,.52)); }
.hero-institutional img { display: block; width: 100%; max-height: 105px; object-fit: contain; }
.hero-government { transform: translateY(5px); }
.scroll-indicator { position: absolute; z-index: 9; left: 846px; top: 688px; width: 228px; display: flex; flex-direction: column; align-items: center; gap: 9px; opacity: calc(1 - var(--hero-progress) * 2.5); transform: translateY(calc(var(--hero-progress) * -45px)); }
.scroll-indicator span { font-family: var(--display); font-size: 1.25rem; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.88); }
.scroll-indicator img { width: 24px; height: 42px; }

.section { position: relative; padding: clamp(100px, 12vw, 175px) var(--pad); }
.section h2, .section h3 { font-family: var(--display); text-transform: uppercase; font-weight: 400; }
.section h2 { margin: 0; max-width: 1050px; font-size: clamp(3.2rem, 7.4vw, 7.8rem); line-height: .86; letter-spacing: -.02em; }
.section-heading { position: relative; z-index: 2; max-width: 950px; margin-bottom: 46px; }
.kicker { display: block; margin: 0 0 20px; color: var(--gold-light); font-size: .88rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.text-link { display: inline-block; margin-top: 30px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.4); font-size: .92rem; font-weight: 700; letter-spacing: .07em; }
.text-link span { color: var(--gold); }

.side-art { position: absolute; z-index: 0; pointer-events: none; filter: drop-shadow(0 30px 50px rgba(0,0,0,.35)); }
.side-art-story { right: -230px; top: 12%; width: min(48vw, 700px); opacity: .28; }
.side-art-cloud { left: -170px; top: 3%; width: min(45vw, 620px); opacity: .2; }
.side-art-clock { right: -190px; top: 8%; width: min(43vw, 600px); opacity: .22; }
.side-art-team { left: -190px; top: 20%; width: min(42vw, 580px); opacity: .16; }

.story { z-index: auto; margin-top: -2px; padding-top: clamp(115px, 9vw, 150px); padding-bottom: clamp(90px, 7vw, 125px); overflow: hidden; background: radial-gradient(circle at 86% 52%, rgba(98,38,133,.3), transparent 34%), linear-gradient(180deg, var(--ink) 0%, var(--ink) 10%, #08020f 38%, #08020f 100%); }
.story::before { display: none; }
.story-grid { position: relative; z-index: auto; display: grid; grid-template-columns: minmax(0,.9fr) minmax(480px,1.1fr); gap: clamp(14px, 2vw, 38px); align-items: center; }
.story-copy { position: relative; z-index: 12; max-width: 760px; padding-top: 42px; }
.story .section-heading h2 { font-size: clamp(3.2rem, 6.1vw, 6.5rem); line-height: .9; }
.story-copy p { color: #dfd5e5; font-size: 1.15rem; line-height: 1.8; }
.story-copy .lead { color: var(--text); font-size: clamp(1.22rem, 1.6vw, 1.45rem); line-height: 1.55; font-weight: 500; }
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); }
.tags span { padding: 0; border: 0; background: transparent; border-radius: 0; color: var(--gold-light); font-size: .88rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; }
.tags span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.story .section-heading { z-index: 12; margin-bottom: 28px; }
.story-visual { position: relative; z-index: 2; min-height: 720px; align-self: stretch; overflow: visible; }
.story-clock { position: absolute; display: block; max-width: none; object-fit: contain; pointer-events: none; filter: drop-shadow(0 28px 55px rgba(0,0,0,.42)); }
.story-clock-back { z-index: 1; top: 1%; right: 0; width: clamp(850px, 52vw, 1500px); opacity: .64; filter: brightness(.66) saturate(.78) drop-shadow(0 24px 50px rgba(0,0,0,.42)); }
.story-clock-front { z-index: 2; right: -7vw; bottom: -15%; width: auto; height: clamp(720px, 42vw, 1050px); }
.stage-photo { position: relative; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 30px 70px rgba(0,0,0,.46); }
.stage-photo img { width: 100%; height: 100%; object-fit: cover; }
.stage-photo-main { border-radius: 28px 8px 8px 28px; }
.stage-photo-small { border-radius: 8px 28px 28px 8px; }
.stage-photo-main img { object-position: 54% center; }
.stage-photo-small img { object-position: 50% center; }
.story-visual blockquote { position: absolute; z-index: 3; left: -7%; bottom: 28px; width: 270px; margin: 0; padding: 22px 24px; background: var(--paper); color: #45155f; font-family: var(--display); font-size: 1.65rem; line-height: 1; text-transform: uppercase; transform: rotate(-2deg); box-shadow: 0 18px 38px rgba(0,0,0,.25); }

.experience { z-index: 4; overflow: hidden; padding-left: 0; padding-right: 0; background: #160725; }
.experience-intro { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 0 var(--pad); margin-bottom: 52px; text-align: center; }
.experience-intro .kicker { margin: 0 0 14px; }
.experience-intro h2 { max-width: 1120px; }
.experience-intro p { max-width: 720px; margin: 24px auto 0; color: #dfd5e5; font-size: 1.25rem; line-height: 1.7; }
.gallery-shell { position: relative; z-index: 2; }
.gallery-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(30vw, 520px); gap: 20px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; padding: 12px var(--pad) 30px; scrollbar-width: none; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-card { position: relative; scroll-snap-align: center; margin: 0; aspect-ratio: 3/4; overflow: hidden; border-radius: 18px; background: #261037; }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78); transition: transform .5s, filter .5s; }
.gallery-card:hover img { transform: scale(1.035); filter: saturate(1.05); }
.gallery-card::after { content: ""; position: absolute; inset: 36% 0 0; background: linear-gradient(transparent, rgba(6,2,11,.96)); }
.gallery-card figcaption { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 24px; }
.gallery-card b, .gallery-card span { display: block; }
.gallery-card b { font-family: var(--display); font-size: 1.95rem; text-transform: uppercase; }
.gallery-card span { margin-top: 6px; color: #ded4e3; font-size: .95rem; font-weight: 500; }
.gallery-controls { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 0 var(--pad); color: white; font-size: .88rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.gallery-controls span { color: rgba(255,255,255,.92); font-weight: 800; font-size: .88rem; }
.gallery-controls button { width: 50px; height: 50px; padding: 8px; border: 0; background: transparent; color: white; cursor: pointer; transition: transform .25s,color .2s; }
.gallery-controls button svg { width: 100%; height: 100%; fill: currentColor; }
.gallery-controls button[data-gallery="prev"] svg { transform: rotate(90deg); }
.gallery-controls button[data-gallery="next"] svg { transform: rotate(-90deg); }
.gallery-controls button:hover { color: var(--gold-light); transform: scale(1.12); }

.partnership { overflow: hidden; padding-left: clamp(20px,3vw,52px); padding-right: clamp(20px,3vw,52px); background: var(--paper); color: #1b0d24; }
.partnership-title { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; max-width: 1280px; margin-inline: auto; text-align: center; }
.partnership-title h2 { color: #4b1768; font-size: clamp(3.4rem,5.8vw,6.6rem); line-height: .92; letter-spacing: .012em; }
.partnership-title p { max-width: 820px; color: #3d204d; font-size: 1.25rem; line-height: 1.7; font-weight: 500; }
.partnership .kicker { color: #7e4a94; }
.route { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(16px,1.6vw,26px); width: min(100%,1500px); margin: 60px auto 92px; }
.route article { position: relative; min-height: 210px; padding: 32px 30px 28px; overflow: hidden; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 18px 48px rgba(69,27,88,.12); }
.route article::after { display: none; }
.route-number { display: block; color: #7e4a94; font-family: var(--display); font-size: clamp(4rem,5vw,5.4rem); line-height: .78; }
.route article h3 { margin: 26px 0 12px; color: #43185c; font-size: 1.65rem; }
.route article p { margin: 0; color: #4e365e; font-size: 1.05rem; line-height: 1.6; }
.benefits-grid { position: relative; z-index: 2; width: min(100%,1920px); min-height: 0; margin-inline: auto; }
.benefits { position: absolute; z-index: 6; top: 16%; left: clamp(28px,4vw,72px); right: auto; width: min(50%,650px); padding: clamp(32px,3.5vw,54px); border: 0; border-radius: 30px; background: rgba(250,246,252,.97); box-shadow: 0 35px 90px rgba(48,15,66,.24); backdrop-filter: blur(18px); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(24px) scale(.97); transition: opacity .3s ease,transform .35s ease,visibility .3s; }
.benefits.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.benefits-close { position: absolute; top: 18px; right: 20px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #4a1768; color: white; font-size: 1.65rem; line-height: 1; cursor: pointer; }
.benefits-toggle { position: absolute; z-index: 7; left: clamp(28px,4vw,64px); right: auto; bottom: clamp(26px,2.7vw,42px); display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 24px; border: 0; border-radius: 5px; background: var(--gold); color: #160725; font-size: .82rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 18px 44px rgba(32,8,45,.34); cursor: pointer; transition: transform .25s,opacity .25s; }
.benefits-toggle b { font-size: 1.15rem; }
.benefits-toggle:hover { transform: translateY(-3px); }
.benefits h3 { margin: 0 0 28px; color: #4a1768; font-size: clamp(2.5rem,4vw,4.5rem); line-height: .92; }
.benefits ul { list-style: none; padding: 0; margin: 0; }
.benefits li { display: grid; grid-template-columns: .7fr 1fr; gap: 24px; padding: 12px 0; }
.benefits li b { color: #32103f; font-size: 1.05rem; }
.benefits li span { color: #533b62; font-size: 1rem; line-height: 1.6; }
.sponsor-card { position: relative; width: 100%; height: auto; aspect-ratio: 16/9; padding: 0; overflow: hidden; border-radius: 34px; background: #190a28; color: white; box-shadow: 0 35px 85px rgba(66,27,86,.22); }
.sponsor-card::after { content: ""; position: absolute; z-index: 1; inset: 42% 0 0; background: linear-gradient(transparent,rgba(18,5,29,.88)); }
.sponsor-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0; }
.sponsor-card div { position: absolute; z-index: 2; right: clamp(28px,4vw,64px); left: auto; bottom: clamp(48px,4.8vw,78px); width: min(34%,430px); padding: 28px 30px; border: 0; border-radius: 10px; background: rgba(20,6,31,.86); backdrop-filter: blur(12px); }
.sponsor-card span { font-family: var(--display); font-size: 1.95rem; text-transform: uppercase; }
.sponsor-card p { color: #e6dfee; font-size: 1.02rem; line-height: 1.6; }
.legal-note { position: relative; z-index: 2; max-width: 920px; margin: 38px auto 0; color: #5e4f64; font-size: .82rem; text-align: center; }

.experience-intro h2,
.partnership-title h2 { line-height: 1.07; }

.impact { overflow: hidden; display: grid; grid-template-columns: .8fr 1.2fr; column-gap: 8vw; row-gap: 0; align-items: start; background: #11051c; }
.impact-art { position: absolute; z-index: 0; left: -12%; bottom: -28%; width: min(64vw, 880px); opacity: .12; filter: saturate(.8); pointer-events: none; }
.impact-heading, .impact-list, .impact-note { position: relative; z-index: 2; }
.impact-heading h2 { font-size: clamp(3.2rem,6.8vw,7rem); }
.impact-heading p { max-width: 600px; color: #dfd5e5; font-size: 1.22rem; line-height: 1.7; }
.impact-list article { display: grid; grid-template-columns: 120px 1fr; gap: 25px; align-items: center; padding: 26px 0; border-top: 1px solid var(--line); }
.impact-list b { color: var(--gold-light); font-family: var(--display); font-size: 4.5rem; font-weight: 400; }
.impact-list h3 { margin: 0 0 6px; font-size: 1.65rem; color: white; }
.impact-list span { color: #ded2e3; font-size: 1.05rem; line-height: 1.6; }
.impact-note { grid-column: 2; margin: 20px 0 0; color: var(--gold-light); font-size: .95rem; line-height: 1.6; }
.impact-cta { grid-column: 2; justify-self: start; margin: 22px 0 0; }
.section-cta { margin-top: 24px; }

.team { overflow: hidden; background: linear-gradient(145deg, #f8f2fa, #e8ddef); color: #1c0d24; }
.team .kicker { color: #814e98; }
.team .section-heading p { max-width: 620px; color: #736778; line-height: 1.7; }
.team-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.team-card { --bio-lift: 102px; height: 450px; outline: 0; }
.team-card-inner { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 18px; box-shadow: 0 20px 40px rgba(38,13,51,.12); transition: transform .45s cubic-bezier(.2,.75,.2,1), box-shadow .45s ease; }
.team-card:hover .team-card-inner, .team-card:focus .team-card-inner, .team-card.flipped .team-card-inner { transform: translateY(-7px); box-shadow: 0 30px 58px rgba(38,13,51,.22); }
.team-front, .team-back { position: absolute; inset: 0; overflow: hidden; }
.team-front { background: #1b0b2b; color: white; }
.team-front::after { content: ""; position: absolute; inset: 42% 0 0; background: linear-gradient(transparent, rgba(9,3,15,.98)); transition: opacity .35s ease; }
.team-front img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78); }
.team-front span, .team-front h3 { position: absolute; z-index: 4; left: 22px; right: 22px; }
.team-front span { bottom: 66px; color: var(--gold-light); font-size: .63rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.team-front h3 { bottom: 20px; margin: 0; font-size: 1.75rem; }
.team-back { z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 24px 24px; background: linear-gradient(180deg, transparent 12%, rgba(8,2,13,.18) 28%, rgba(8,2,13,.98) 58%); color: white; opacity: 0; transform: translateY(20px); transition: opacity .38s ease, transform .48s cubic-bezier(.2,.8,.2,1); }
.team-card:hover .team-back, .team-card:focus .team-back, .team-card.flipped .team-back { opacity: 1; transform: none; }
.team-card:hover .team-front::after, .team-card:focus .team-front::after, .team-card.flipped .team-front::after { opacity: 1; }
.team-card:hover .team-front span, .team-card:hover .team-front h3, .team-card:focus .team-front span, .team-card:focus .team-front h3, .team-card.flipped .team-front span, .team-card.flipped .team-front h3 { opacity: 1; transform: translateY(calc(var(--bio-lift) * -1)); }
.team-front span, .team-front h3 { transition: opacity .25s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.team-back h3 { display: none; }
.team-back p { margin: 0; color: #eee6f1; font-size: .79rem; line-height: 1.58; }

.contact { overflow: hidden; min-height: 720px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: #09030f; }
.contact h2 { max-width: 960px; }
.contact-copy, .contact-actions { position: relative; z-index: 2; }
.contact-copy { display: flex; flex-direction: column; align-items: center; }
.contact-copy > p { max-width: 720px; color: var(--muted); font-size: 1.02rem; line-height: 1.8; }
.contact-actions { display: flex; flex-direction: column; align-items: center; margin-top: 35px; }
.button-large { min-height: 64px; padding: 0 32px; }
.contact-email { margin-top: 28px; border-bottom: 1px solid rgba(255,255,255,.35); font-size: clamp(1rem,2vw,1.35rem); }
.producer-logo { width: 155px; max-height: 150px; margin-top: 38px; object-fit: contain; filter: drop-shadow(0 14px 28px rgba(0,0,0,.2)); }
.contact-decor { position: absolute; z-index: 0; right: -6%; bottom: -18%; width: min(48vw, 700px); opacity: .13; pointer-events: none; }

.experience, .partnership, .impact, .team, .contact { overflow: visible; }
.experience::before, .partnership::before, .impact::before, .team::before, .contact::before {
  content: "";
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: -108px;
  height: 110px;
  background: var(--wave-color);
  -webkit-mask: url("assets/wave-divider.svg") center/100% 100% no-repeat;
  mask: url("assets/wave-divider.svg") center/100% 100% no-repeat;
  pointer-events: none;
}
.experience { --wave-color: #160725; }
.partnership { --wave-color: #f5eff8; }
.impact { --wave-color: #11051c; }
.team { --wave-color: #f8f2fa; }
.contact { --wave-color: #09030f; }

footer { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr .7fr 1fr .85fr; gap: clamp(34px, 5vw, 90px); align-items: start; padding: 72px var(--pad) 58px; border: 0; background: #050108; color: #a99dad; font-size: .78rem; line-height: 1.65; }
footer strong { color: white; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.footer-brand, .footer-nav, .footer-contact, .footer-producer { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-alice { width: 112px; margin-bottom: 8px; }
.footer-brand p { margin: 0; }
.footer-brand p strong { color: var(--gold-light); font-size: inherit; letter-spacing: 0; text-transform: none; }
.footer-institutional { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.7fr); align-items: center; gap: 20px; width: min(100%,420px); margin-top: 12px; }
.footer-institutional img { display: block; width: 100%; max-height: 82px; object-fit: contain; }
.footer-nav a, .footer-contact > a:not(.button) { color: #d4cad8; transition: color .2s; }
.footer-nav a:hover, .footer-contact > a:not(.button):hover { color: var(--gold-light); }
.footer-contact .button { margin-top: 8px; }
.footer-producer { align-items: flex-end; text-align: right; }
.footer-milene { display: block; width: 150px; max-height: 100px; object-fit: contain; object-position: right center; }
.footer-producer span { max-width: 210px; }

.gallery-lightbox { position: fixed; z-index: 250; inset: 0; display: grid; grid-template-columns: 70px minmax(0,1fr) 70px; align-items: center; gap: 20px; padding: 40px; background: rgba(3,1,7,.94); backdrop-filter: blur(14px); }
.gallery-lightbox[hidden] { display: none; }
.gallery-lightbox figure { width: min(100%, 1320px); height: min(82vh, 940px); margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.gallery-lightbox figure img { max-width: 100%; max-height: calc(100% - 44px); object-fit: contain; box-shadow: 0 32px 90px rgba(0,0,0,.55); }
.gallery-lightbox figcaption { color: #e8dfeb; font-size: .84rem; letter-spacing: .04em; }
.lightbox-close, .lightbox-arrow { border: 1px solid rgba(255,255,255,.22); background: rgba(15,7,22,.72); color: white; cursor: pointer; }
.lightbox-close { position: absolute; top: 24px; right: 28px; width: 48px; height: 48px; border-radius: 50%; font-size: 2rem; }
.lightbox-arrow { width: 58px; height: 58px; padding: 10px; border: 0; border-radius: 0; background: transparent; }
.lightbox-arrow svg { width: 100%; height: 100%; fill: currentColor; }
.lightbox-prev svg { transform: rotate(90deg); }
.lightbox-next svg { transform: rotate(-90deg); }
.lightbox-arrow:hover, .lightbox-close:hover { border-color: var(--gold); color: var(--gold-light); }
.gallery-card { cursor: zoom-in; }

.reveal { opacity: 0; transform: translateY(35px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1050px) {
  .hero-stage { height: 178vh; }
  .site-header { display: flex; padding-left: clamp(24px, 5vw, 54px); padding-right: clamp(24px, 5vw, 54px); }
  .desktop-nav { display: none; }
  .header-cta { margin-left: auto; }
  .menu-toggle { display: block; margin-left: 12px; }
  .mobile-nav { position: fixed; z-index: 95; inset: 0; display: flex; flex-direction: column; gap: 22px; padding: 120px var(--pad) 45px; background: rgba(8,3,15,.98); transform: translateY(-105%); transition: transform .4s; }
  .mobile-nav.open { transform: none; }
  .mobile-nav a { padding-bottom: 12px; border: 0; font-family: var(--display); font-size: 2.3rem; text-transform: uppercase; }
  .story-grid, .benefits-grid, .contact { grid-template-columns: 1fr; }
  .story-visual { width: min(100%, 650px); max-width: 650px; margin: 40px auto 0; }
  .story-clock-back { width: 120%; }
  .story-clock-front { right: -18%; height: 102%; }
  .gallery-track { grid-auto-columns: 43vw; }
  .team-grid { grid-template-columns: repeat(2,1fr); }
  .team-grid .team-card:nth-child(n) { transform: none; }
  .benefits-grid { display: block; min-height: auto; }
  .sponsor-card { height: auto; aspect-ratio: 16/9; }
  .benefits-toggle { position: relative; right: auto; bottom: auto; margin: -24px auto 0; }
  .benefits { display: none; position: relative; top: auto; right: auto; left: auto; width: calc(100% - 72px); margin: 24px auto 0; opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .benefits.is-open { display: block; }
  .impact { grid-template-columns: 1fr; }
  .impact-note { grid-column: 1; margin-left: 0; }
  .impact-cta { grid-column: 1; margin-left: 0; }
  .contact { gap: 55px; }
}

@media (max-width: 700px) {
  :root { --pad: 20px; }
  .site-header { top: 0; left: 0; right: 0; bottom: auto; height: 82px; padding: 0 24px; display: flex; gap: 12px; border-radius: 0; }
  .site-header.scrolled { height: 82px; }
  .brand { width: 82px; }
  .header-cta { display: inline-flex; min-height: 44px; padding: 0 17px; margin-left: auto; font-size: .58rem; }
  .menu-toggle { width: 40px; height: 40px; padding: 8px; }
  .hero-stage { height: 126svh; }
  .hero-pin { min-height: 560px; height: 100svh; }
  .section { padding-top: 92px; padding-bottom: 92px; }
  .experience, .partnership, .impact, .team { padding-bottom: 150px; }
  .section h2 { font-size: clamp(3rem,15vw,4.7rem); }
  .side-art { display: none; }
  .story-grid { display: block; }
  .story-copy { padding-top: 20px; }
  /* O left de 635+115 era o par da largura antiga (650-230). A largura
     virou 768-274 num override posterior e este left ficou orfao, jogando
     o centro do logo para 997 em vez de 960. Some: sem ele o mobile usa a
     mesma formula do desktop, que ja centraliza. */
  .hero-canvas.mobile-scale .hero-tagline { left: 745px; }
  .hero-canvas.mobile-scale .hero-actions { left: 796px; }
  .hero-canvas.mobile-scale .hero-institutional { left: 755px; width: 410px; grid-template-columns: 150px 240px; gap: 20px; }
  .hero-canvas.mobile-scale { top: 50%; transform: translate(-50%,calc(-50% + var(--hero-mobile-shift))) scale(var(--hero-scale)); will-change: transform; }
  .hero-canvas.mobile-scale .hero-portal-bg { left: 184px; top: -235px; width: 1553px; height: 1508px; }
  .hero-canvas.mobile-scale .hero-portal-overlay { top: 730px; width: 1920px; height: 800px; }
  .hero-canvas.mobile-scale .hero-portal-mist { display: none; }
  .hero-cloud-group { will-change: transform; backface-visibility: hidden; }
  .hero-canvas.mobile-scale .scroll-indicator { top: 470px; }
  .story-visual { min-height: 500px; width: calc(100% + 40px); max-width: none; margin: 6px -20px -24px; }
  .story-clock-back { top: 3%; right: -3%; width: 132%; opacity: .55; }
  .story-clock-front { right: -28%; bottom: -12%; height: 106%; }
  .stage-photo-main, .stage-photo-small { right: auto; border-radius: 18px; }
  .story-visual blockquote { left: -3%; bottom: 26%; width: 215px; font-size: 1.45rem; }
  .experience-intro { display: flex; }
  .experience-intro h2 { margin: 0; }
  .gallery-track { grid-auto-columns: 82vw; gap: 12px; }
  .gallery-controls { justify-content: center; }
  .gallery-controls span { display: none; }
  .route { grid-template-columns: 1fr; margin: 55px 0 86px; }
  .partnership-title { max-width: 1030px; }
  .partnership-title h2 { font-size: clamp(3rem,15vw,4.7rem); line-height: 1.07; letter-spacing: -.02em; }
  .route article { display: block; min-height: 0; padding: 28px 24px 26px; }
  .route-number { font-size: clamp(4rem,5vw,6rem); }
  .route article h3 { margin: 30px 0 12px; font-size: 1.75rem; }
  .route article p { font-size: .9rem; line-height: 1.65; }
  .route > i { text-align: center; transform: rotate(90deg); }
  .benefits-grid { width: 100%; margin-inline: 0; }
  .sponsor-card { height: auto; aspect-ratio: auto; overflow: visible; border-radius: 0; background: transparent; box-shadow: none; }
  .sponsor-card::after { display: none; }
  .sponsor-card img { height: auto; aspect-ratio: 4/3; object-fit: cover; object-position: center; border-radius: 20px; }
  .sponsor-card div { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin: -38px 20px 0; padding: 22px 20px; border-radius: 10px; }
  .benefits-toggle { display: none; }
  .benefits { display: block; width: calc(100% - 40px); margin-top: 22px; padding: 34px 32px; border-radius: 16px; }
  .benefits-close { display: none; }
  .benefits h3 { font-size: clamp(2.35rem,10.5vw,3.5rem); }
  .benefits li { grid-template-columns: 1fr; gap: 7px; }
  .legal-note { width: calc(100% - 40px); margin: 30px auto 0; text-align: left; }
  .impact-art { left: -55%; bottom: -2%; width: 145vw; opacity: .08; }
  .impact-list article { grid-template-columns: 82px 1fr; gap: 15px; }
  .impact-list b { font-size: 3.2rem; }
  .impact-list h3 { font-size: 1.25rem; }
  .impact-note { margin-left: 0; }
  .impact-cta { margin-left: 0; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .team-card { height: 330px; }
  .team-front span { bottom: 58px; }
  .team-front h3 { font-size: 1.28rem; }
  .team-back { padding: 20px; }
  .team-back h3 { font-size: 1.6rem; }
  .team-back p { font-size: .75rem; }
  .contact { min-height: auto; }
  .contact-actions .button { width: 100%; font-size: .67rem; }
  .contact-email { font-size: .92rem; }
  .contact-decor { right: -55%; width: 130vw; opacity: .08; }
  footer { grid-template-columns: 1fr; gap: 34px; padding-top: 58px; text-align: center; }
  .footer-brand, .footer-nav, .footer-contact, .footer-producer { align-items: center; text-align: center; }
  .footer-producer { align-items: center; text-align: center; }
  .footer-institutional { grid-template-columns: minmax(0,1fr) minmax(0,1.7fr); width: min(100%,390px); gap: 20px; }
  .footer-milene { object-position: center; }
  .gallery-lightbox { grid-template-columns: 48px minmax(0,1fr) 48px; gap: 8px; padding: 70px 10px 20px; }
  .gallery-lightbox figure { height: 74vh; }
  .lightbox-arrow { width: 44px; height: 44px; }
  .gallery-card { cursor: grab; }
  .story { margin-top: clamp(-210px,-48vw,-160px); padding-top: 48px; }
  body:not(.hero-complete) .story .story-copy.reveal { opacity: 0; transform: translate3d(0,24px,0); transition: opacity .32s ease, transform .38s ease; }
  body.hero-complete .story .story-copy.reveal { opacity: 1; transform: none; }
  .experience { margin-top: -240px; padding-top: 42px; }
}

@media (max-width: 1050px), (max-aspect-ratio: 13/10) {
  .hero-canvas.mobile-scale .hero-cloud-left { left: -756px; transform: translate(calc(var(--hero-progress) * -440px), calc(var(--hero-progress) * -125px)); }
  .hero-canvas.mobile-scale .hero-cloud-right { left: 672px; transform: translate(calc(var(--hero-progress) * 595px), calc(var(--hero-progress) * -135px)); }
  .hero-canvas.mobile-scale .scroll-indicator { top: 580px; }
}

@media (max-width: 700px) {
  .hero-canvas.mobile-scale .hero-cloud-left { left: -560px; transform: translate3d(calc(var(--hero-progress) * -950px), calc(var(--hero-progress) * -125px), 0); }
  .hero-canvas.mobile-scale .hero-cloud-right { left: 470px; transform: translate3d(calc(var(--hero-progress) * 950px), calc(var(--hero-progress) * -135px), 0); }
  .hero-canvas.mobile-scale .scroll-indicator { top: 650px; }
}

@media (min-width: 471px) and (max-width: 700px) {
  .story { margin-top: 4svh; }
}

@media (max-width: 470px) {
  html.chrome-mobile .story { margin-top: clamp(-162px,-36vw,-112px); }
  .site-header { padding: 0 22px; }
  .brand { width: 72px; }
  .header-cta { min-height: 40px; padding: 0 12px; font-size: .52rem; letter-spacing: .1em; }
}

@media (max-width: 420px) {
  .team-grid { grid-template-columns: 1fr; }
  .team-card { height: 410px; }
}

@media (hover: none), (pointer: coarse) {
  .team-card:not(.flipped):hover .team-card-inner,
  .team-card:not(.flipped):focus .team-card-inner { transform: none; box-shadow: 0 20px 40px rgba(38,13,51,.12); }
  .team-card:not(.flipped):hover .team-back,
  .team-card:not(.flipped):focus .team-back { opacity: 0; transform: translateY(20px); }
  .team-card:not(.flipped):hover .team-front span,
  .team-card:not(.flipped):hover .team-front h3,
  .team-card:not(.flipped):focus .team-front span,
  .team-card:not(.flipped):focus .team-front h3 { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-stage { height: 100svh; }
  .hero-pin { position: relative; }
  .hero-cloud-left { transform: translate(-702px,-151px); }
  .hero-cloud-right { transform: translate(670px,-170px); }
  .reveal { opacity: 1; transform: none; transition: none; }
  .team-card-inner, .team-back { transition: none; }
}

/* ===========================================================
   REVISÃO VISUAL 18/09 — alinhamento com o livreto
   Bloco de override no fim do arquivo, de propósito: é
   reversível apagando daqui para baixo.
   =========================================================== */

/* 1. DIVISORES DE ONDA
   Eles nunca sumiram. Ficavam invisíveis quando as duas seções
   vizinhas tinham quase a mesma cor. A crista ganha um fio de luz
   e a altura passa a ser proporcional, para funcionar em todo
   breakpoint. */
.experience::before,
.partnership::before,
.impact::before,
.team::before,
.contact::before {
  --wave-h: clamp(54px, 6.4vw, 110px);
  height: var(--wave-h);
  top: calc(var(--wave-h) * -1 + 2px);
  filter: drop-shadow(0 -2px 0 var(--wave-edge, rgba(217,187,242,.42)));
}
.experience  { --wave-edge: rgba(217,187,242,.52); }
.partnership { --wave-edge: rgba(91,28,123,.22); }
.impact      { --wave-edge: rgba(217,187,242,.44); }
.team        { --wave-edge: rgba(91,28,123,.20); }
.contact     { --wave-edge: rgba(217,187,242,.38); }

/* 2. ESCALA TIPOGRÁFICA
   O salto entre título e corpo estava grande demais. O teto dos
   títulos desce e o corpo sobe, para o site ficar tão legível
   quanto o livreto. */
.section h2 { font-size: clamp(3rem, 6.2vw, 6.4rem); }
.story .section-heading h2 { font-size: clamp(2.9rem, 5.2vw, 5.6rem); }
.partnership-title h2 { font-size: clamp(3rem, 5vw, 5.6rem); }
.impact-heading h2 { font-size: clamp(2.9rem, 5.6vw, 5.8rem); }
.benefits h3 { font-size: clamp(2.2rem, 3.2vw, 3.6rem); }

.story-copy p { font-size: 1.22rem; line-height: 1.75; }
.experience-intro p,
.impact-heading p,
.partnership-title p { font-size: 1.28rem; line-height: 1.68; }
.route article p,
.impact-list span,
.benefits li span,
.sponsor-card p { font-size: 1.08rem; line-height: 1.65; }
.gallery-card span { font-size: 1rem; }
.legal-note { font-size: .92rem; }
.contact-copy > p { font-size: 1.12rem; }

/* Texto pequeno demais para ler. A ficha técnica era o pior caso. */
.team-front span { font-size: .74rem; }
.team-back p { font-size: .92rem; line-height: 1.62; }

/* 3. DISCIPLINA DO DOURADO
   O dourado passa a significar uma coisa só: dá para clicar.
   Os kickers e as tags saem dele e vão para a lavanda, que é a
   cor de apoio do livreto. */
.kicker { color: var(--lavender); }
.partnership .kicker { color: #7e4a94; }
.team .kicker { color: #814e98; }
.tags span { color: var(--lavender); }
.tags span::before { background: var(--lavender); }
.impact-note { color: var(--lavender); }

/* 4. CONTROLES DA GALERIA
   Os corações estavam grandes e colados no texto. */
.gallery-controls {
  gap: 30px;
  margin-top: 22px;
  font-size: .82rem;
  letter-spacing: .18em;
}
.gallery-controls span { font-size: .82rem; letter-spacing: .18em; }
.gallery-controls button {
  width: 34px;
  height: 34px;
  padding: 0;
  opacity: .82;
  transition: transform .25s, color .2s, opacity .2s;
}
.gallery-controls button:hover { opacity: 1; transform: scale(1.14); }

/* 5. BOTÕES
   A legenda do botão de patrocínio estava pequena e muito
   espaçada para o fundo dourado. */
.benefits-toggle {
  border-radius: 999px;
  padding: 0 30px;
  font-size: .9rem;
  letter-spacing: .07em;
  font-weight: 800;
}
.benefits-toggle b { font-size: 1.25rem; }
.button { letter-spacing: .09em; font-size: .8rem; }
.button-large { font-size: .88rem; }

/* Seta circular, no lugar do caractere de texto. */
.arrow-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: 4px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.arrow-circle svg { width: 13px; height: 13px; display: block; }
.button .arrow-circle svg path { stroke: var(--gold); }
.benefits-toggle .arrow-circle svg path { stroke: var(--gold); }

/* 6. FICHA TÉCNICA EM TRÊS COLUNAS
   Nove pessoas com a entrada da Karen Pecora. */
.team-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
.team-card { height: 470px; }

@media (max-width: 1100px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .team-grid { grid-template-columns: 1fr; }
  .gallery-controls { gap: 22px; }
  .gallery-controls button { width: 30px; height: 30px; }
}

/* 8. NAVEGAÇÃO
   A display decorativa em corpo pequeno prejudica a leitura.
   O menu passa para a sans, e a display fica só nos títulos. */
.desktop-nav a {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .12em;
}

/* 9. BARLOW CONDENSED NO LUGAR DA SCRAPBOOKER
   A Scrapbooker saiu do site inteiro. A Barlow Condensed é a mesma
   do livreto, e precisa de peso 600 para ter a presença que a
   Scrapbooker tinha em peso 400. */
.section h2,
.section h3,
.story-visual blockquote,
.gallery-card b,
.route-number,
.impact-list b,
.sponsor-card span,
.scroll-indicator span,
.mobile-nav a {
  font-family: var(--display);
  font-weight: 600;
}
.section h2 { letter-spacing: -.012em; }
.impact-list b { font-weight: 600; }
.route-number { font-weight: 600; }

/* ===========================================================
   REFINO 18/09 — segunda passada
   Ajuste do que já existe: contenção em telas grandes,
   escala de texto pequeno, espaçamento e logo do hero.
   =========================================================== */

/* 10. SETA DE LINK DE TEXTO
   Link de texto não leva a bolinha cheia do botão. Só a seta. */
.link-arrow {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 7px;
  vertical-align: -1px;
  color: var(--gold);
}
.link-arrow svg { width: 100%; height: 100%; display: block; }
.text-link:hover .link-arrow { color: var(--gold-light); }

/* 11. CONTENÇÃO EM TELA GRANDE, FEITA DO JEITO CERTO
   Errado: limitar a largura da SEÇÃO. A seção carrega o fundo, e
   limitar ela cortou o relógio e encolheu o rodapé.
   Certo: aumentar o padding lateral quando a tela passa do limite.
   O fundo continua sangrando de ponta a ponta, só o conteúdo é
   contido. */
.impact  { padding-inline: max(var(--pad), (100% - 1560px) / 2); }
.team    { padding-inline: max(var(--pad), (100% - 1400px) / 2); }
footer   { padding-inline: max(var(--pad), (100% - 1560px) / 2); }
.contact { padding-inline: max(var(--pad), (100% - 1100px) / 2); }

/* Só a coluna de texto do espetáculo é contida. A coluna visual
   fica livre para o relógio sangrar, que é o comportamento certo
   de arte de fundo. */

/* 12. CONTRAPARTIDA SOCIAL
   Antes: align-items baseline, que alinha a base do número gigante
   com a base do título pequeno e joga o título para baixo. É o que
   deixou torto.
   Agora: os dois começam no topo, com a altura de linha do número
   travada para a maiúscula dele nascer na mesma linha do título. */
.impact-list article {
  grid-template-columns: minmax(168px, auto) 1fr;
  gap: 36px;
  padding: 32px 0;
  align-items: start;
}
.impact-list b {
  font-size: clamp(3rem, 3.6vw, 4rem);
  line-height: 1;
  margin-top: -.08em;
  display: block;
}
.impact-list div { padding-top: 0; }
.impact-list h3 { margin: 0 0 9px; font-size: 1.3rem; line-height: 1.2; }
.impact-list span { font-size: 1.04rem; }

/* 13. RODAPÉ
   Estava em 12,5px. O fundo volta a sangrar, contido só por padding. */
footer { font-size: .95rem; line-height: 1.7; padding-top: 84px; grid-template-columns: 1.1fr .6fr 1fr .8fr; }
footer strong { font-size: .82rem; letter-spacing: .13em; }
.footer-alice { width: 132px; }
.footer-brand, .footer-nav, .footer-contact, .footer-producer { gap: 14px; }

/* 14. TEXTOS QUE AINDA ESTAVAM MIÚDOS */
.kicker { font-size: .82rem; letter-spacing: .2em; }
.text-link { font-size: 1rem; }
.tags span { font-size: .92rem; }
.benefits li b { font-size: 1.1rem; }
.route article h3 { font-size: 1.55rem; }
.gallery-controls, .gallery-controls span { font-size: .84rem; }
.team-front span { font-size: .82rem; letter-spacing: .1em; }

/* 15. TÍTULO DA FICHA TÉCNICA ALINHADO À ESQUERDA DE VERDADE
   O .section-heading tem max-width 950px. Com margin auto ele ficava
   centralizado dentro da grade e não batia com a primeira coluna de
   cartões. Agora encosta na esquerda, como o resto da seção. */
.team .section-heading { max-width: 760px; margin-inline: 0; }

/* 16. ARTE DE FUNDO DA FICHA TÉCNICA
   A arte é clara e a seção também. Escurece e desatura para virar
   textura em vez de mancha branca. */
.side-art-team {
  opacity: .14;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.1)) brightness(.55) saturate(.55);
}

/* 17. LOGO DO HERO
   Mais presença, e os blocos abaixo descem junto. */
.hero-logo {
  left: calc(576px + var(--hero-progress) * 137px);
  width: calc(768px + var(--hero-progress) * -274px);
}
.hero-tagline { top: calc(1652px + var(--hero-progress) * -810px); }
.hero-actions { top: calc(1797px + var(--hero-progress) * -865px); }
.hero-institutional { top: calc(1857px + var(--hero-progress) * -865px); }

/* 18. BOTÕES PADRONIZADOS
   O do hero era .button-large e os demais .button, então tinham
   alturas diferentes. Agora todos partem da mesma medida. */
.button, .button-large { min-height: 58px; padding: 0 30px; font-size: .8rem; letter-spacing: .09em; }
.button-small { min-height: 46px; padding: 0 22px; font-size: .7rem; }
.button, .benefits-toggle { white-space: nowrap; }
.benefits-toggle { min-height: 58px; }
.footer-contact .button { padding-left: 24px; padding-right: 7px; font-size: .74rem; letter-spacing: .07em; }

/* 19. DETECÇÃO DE MOBILE E DESKTOP, para o livreto */
.somente-desktop { display: inline-flex; }
.somente-mobile { display: none; }
html.e-mobile .somente-desktop { display: none; }
html.e-mobile .somente-mobile { display: inline-flex; }

@media (max-width: 1100px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .team-grid { grid-template-columns: 1fr; }
  .gallery-controls { gap: 22px; }
  .gallery-controls button { width: 30px; height: 30px; }
  .impact-list article { grid-template-columns: 1fr; gap: 10px; }
  .impact-list div { padding-top: 0; }
}

/* ===========================================================
   REFINO 18/09 — terceira passada
   =========================================================== */

/* 20. CEDILHA E TIL SENDO CORTADOS
   A Barlow Condensed tem cedilha e til que descem e sobem mais que
   a Scrapbooker. Com entrelinha em .86 eles encostavam na linha de
   baixo. A entrelinha abre e cada título ganha uma folga embaixo. */
.section h2,
.story .section-heading h2,
.partnership-title h2,
.impact-heading h2,
.experience-intro h2,
.benefits h3,
.contact h2 {
  line-height: .98;
  padding-bottom: .06em;
}
.section h3 { line-height: 1.18; }
.gallery-card b { line-height: 1.1; padding-bottom: .04em; }
.impact-list h3 { line-height: 1.25; }
.team-front h3 { line-height: 1.12; padding-bottom: .04em; }

/* 21. RELÓGIOS DE FUNDO COM MAIS PRESENÇA
   Nas duas seções que o Paulo pediu: ficha técnica e contrapartida
   social. Maiores, sem roubar a cena. */
.side-art-team {
  left: -160px;
  top: 12%;
  width: min(54vw, 760px);
  opacity: .2;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.1)) brightness(.6) saturate(.6);
}
.impact-art {
  left: -14%;
  bottom: -24%;
  width: min(76vw, 1080px);
  opacity: .16;
}

/* 22. BOTÃO
   O rótulo estava sumindo e o disco da seta era pequeno e longe da
   borda. Agora o texto é mais pesado e o padding é assimétrico: o
   lado do texto respira, o lado do disco quase encosta. */
.button, .button-large {
  padding-left: 30px;
  padding-right: 8px;
  gap: 16px;
  font-weight: 900;
}
.button-small { padding-left: 22px; padding-right: 7px; gap: 12px; }
.benefits-toggle { padding-left: 30px; padding-right: 8px; gap: 16px; font-weight: 900; }

.arrow-circle {
  width: 42px;
  height: 42px;
  margin-left: 0;
}
.arrow-circle svg { width: 18px; height: 18px; }
.button-small .arrow-circle { width: 32px; height: 32px; }
.button-small .arrow-circle svg { width: 14px; height: 14px; }

/* 23. MOBILE VEM POR ÚLTIMO
   Os blocos de override acima ficam no fim do arquivo e, por serem
   posteriores, venciam as media queries de celular que estão antes.
   Este bloco final devolve o comportamento mobile. */
@media (max-width: 700px) {
  footer {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-top: 58px;
    text-align: center;
  }
  .footer-brand, .footer-nav, .footer-contact, .footer-producer {
    align-items: center;
    text-align: center;
  }
  .footer-contact > a:not(.button) { word-break: break-word; }
  .footer-contact .button { padding-left: 26px; padding-right: 8px; }
  .team-grid { grid-template-columns: 1fr; }
  .impact-list article { grid-template-columns: 1fr; gap: 10px; }
  .impact-list div { padding-top: 0; }
  .gallery-controls { gap: 22px; }
  .gallery-controls button { width: 30px; height: 30px; }
  .arrow-circle { width: 36px; height: 36px; }
  .arrow-circle svg { width: 16px; height: 16px; }
}
@media (max-width: 1100px) and (min-width: 701px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===========================================================
   24. CONTRAPARTIDA SOCIAL REFEITA
   Fora as linhas de 1px, que o Paulo já tinha pedido para não usar.
   Entram blocos chapados, a mesma linguagem da lâmina 09 do livreto,
   que ele aprovou. Menos vão entre as coisas, mais presença.
   =========================================================== */
.impact {
  align-items: center;
  column-gap: clamp(40px, 5vw, 90px);
  padding-block: clamp(96px, 10vw, 150px);
}
.impact-heading h2 { margin-bottom: 22px; }
.impact-heading p { font-size: 1.18rem; max-width: 460px; }

.impact-list {
  display: grid;
  gap: 18px;
}
.impact-list article {
  display: grid;
  grid-template-columns: minmax(150px, auto) 1fr;
  gap: 30px;
  align-items: start;
  padding: 34px 38px;
  border: 0;
  border-radius: 22px;
  background: #24103a;
}
.impact-list article:nth-child(1) { background: #5b1c7b; }
.impact-list article:nth-child(2) { background: #1a0a2a; }
.impact-list article:nth-child(3) { background: #d9bbf2; }
.impact-list article:nth-child(3) b,
.impact-list article:nth-child(3) h3 { color: #12051f; }
.impact-list article:nth-child(3) span { color: #3b2a47; }
.impact-list b {
  color: var(--gold-light);
  font-size: clamp(2.8rem, 3.4vw, 3.9rem);
  line-height: 1;
  margin-top: -.08em;
}
.impact-list article:nth-child(2) b { color: var(--gold-light); }
.impact-list h3 { margin: 0 0 8px; color: white; font-size: 1.24rem; line-height: 1.2; }
.impact-list span { color: #e2d8e8; font-size: 1rem; line-height: 1.55; }
.impact-cta { margin-top: 30px; }

/* O relógio de fundo estava cortando na onda de cima. Ancora
   embaixo, com folga, e diminui um pouco. */
.impact-art {
  top: auto;
  bottom: -6%;
  left: -8%;
  width: min(52vw, 720px);
  opacity: .22;
}

@media (max-width: 980px) {
  .impact { grid-template-columns: 1fr; row-gap: 42px; }
  .impact-note, .impact-cta { grid-column: 1; }
}
@media (max-width: 700px) {
  .impact-list article { grid-template-columns: 1fr; gap: 12px; padding: 28px 26px; }
  .impact-art { width: min(90vw, 520px); bottom: -3%; left: -18%; }
}

/* ===========================================================
   25. BOTAO DA BARRA DE NAVEGACAO — ESTILO PROPRIO
   Ele nao tem seta, entao nao pode herdar o padding assimetrico
   que existe para abrir espaco para o circulo preto.
   =========================================================== */
.header-cta,
.header-cta.button-small {
  padding-left: 26px;
  padding-right: 26px;
  gap: 0;
  min-height: 48px;
  font-size: .74rem;
  letter-spacing: .1em;
  font-weight: 900;
}
@media (max-width: 980px) {
  .header-cta, .header-cta.button-small { padding-left: 18px; padding-right: 18px; min-height: 44px; font-size: .62rem; }
}
@media (max-width: 700px) {
  .header-cta, .header-cta.button-small { padding-left: 14px; padding-right: 14px; min-height: 40px; font-size: .55rem; letter-spacing: .08em; }
}

/* ===========================================================
   26. NUMEROS DOS CARDS SOCIAIS
   2.560 e 800 em branco; o 500 fica como esta, sobre a lavanda.
   Corpo maior, que estava pequeno para o peso que o numero tem.
   =========================================================== */
.impact-list b { font-size: clamp(3.6rem, 4.6vw, 5.2rem); }
.impact-list article:nth-child(1) b,
.impact-list article:nth-child(2) b { color: #ffffff; }
.impact-list article { grid-template-columns: minmax(190px, auto) 1fr; }
@media (max-width: 700px) {
  .impact-list b { font-size: clamp(3.2rem, 13vw, 4.2rem); }
}

/* ===========================================================
   27. RELOGIO DA SECAO SOCIAL
   Ancorado no canto inferior direito, menor, longe da onda de cima.
   =========================================================== */
.impact-art {
  top: auto;
  left: auto;
  right: -4%;
  bottom: -7%;
  width: min(34vw, 470px);
  opacity: .2;
}
@media (max-width: 700px) {
  .impact-art { right: -14%; bottom: -4%; width: min(70vw, 380px); }
}

/* O card do meio estava em rgb(26,10,42) contra uma secao em rgb(17,5,28):
   nove pontos de diferenca, ele sumia e virava um buraco entre os outros
   dois. Sobe para um violeta que se le como bloco. */
.impact-list article:nth-child(2) { background: #3d1359; }

/* ===========================================================
   28. PAR DE BOTOES: PRIMARIO DOURADO + SECUNDARIO DO BOOK
   O primario pede a conversa, o secundario abre a apresentacao.
   =========================================================== */
.cta-pair {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}
.cta-pair-large { justify-content: center; margin-top: 40px; }

.button-ghost {
  background: none;
  border: 1.5px solid rgba(217,187,242,.45);
  color: var(--lavender);
  box-shadow: none;
}
.button-ghost:hover {
  border-color: var(--lavender);
  background: rgba(217,187,242,.12);
  box-shadow: none;
}
.button-ghost .arrow-circle svg path { stroke: #11051c; }
.button-ghost .arrow-circle { background: var(--lavender); }

/* ===========================================================
   29. FICHA TECNICA: NUVENS NO LUGAR DOS RELOGIOS
   Uma alta na esquerda em cima, uma larga na direita embaixo.
   O balanco e diagonal, nao simetrico.
   =========================================================== */
.team-cloud {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.team-cloud-left {
  left: -7%;
  top: 3%;
  width: min(30vw, 430px);
  opacity: .5;
}
.team-cloud-right {
  right: -9%;
  bottom: 2%;
  width: min(40vw, 600px);
  opacity: .45;
}
@media (max-width: 980px) {
  .team-cloud-left { width: 46vw; left: -16%; opacity: .38; }
  .team-cloud-right { width: 62vw; right: -20%; opacity: .34; }
}
@media (max-width: 700px) {
  .team-cloud-left { width: 62vw; left: -26%; top: 1%; opacity: .3; }
  .team-cloud-right { width: 86vw; right: -34%; opacity: .26; }
}

/* ===========================================================
   30. CONTATO
   Estava com 720px de altura minima e tres elementos soltos no
   meio. Agora o ritmo e fechado e o bloco tem dois caminhos:
   conversar agora, ou ler a apresentacao antes.
   =========================================================== */
.contact {
  min-height: 0;
  padding-block: clamp(100px, 11vw, 168px);
  row-gap: 0;
}
.contact-copy > p { margin-top: 18px; max-width: 640px; }
.contact .cta-pair-large { margin-top: 42px; }

.contact-meta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
}
.contact-email {
  margin-top: 0;
  border-bottom: 1px solid rgba(255,255,255,.3);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
}
.contact-status {
  margin: 0;
  color: rgba(217,187,242,.72);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.producer-logo {
  position: relative;
  z-index: 2;
  width: 132px;
  margin-top: 46px;
  opacity: .85;
}
.contact-decor { position: absolute; z-index: 0; pointer-events: none; }
.contact-decor-right { right: -8%; bottom: -14%; left: auto; top: auto; width: min(44vw, 640px); opacity: .16; }
.contact-decor-left  { left: -12%; top: -8%; right: auto; bottom: auto; width: min(26vw, 380px); opacity: .1; }
@media (max-width: 700px) {
  .contact { padding-block: clamp(76px, 18vw, 110px); }
  .contact .cta-pair-large { flex-direction: column; align-items: stretch; width: 100%; }
  .contact .cta-pair-large .button { width: 100%; }
  .contact-decor-right { right: -40%; bottom: -8%; width: 120vw; opacity: .1; }
  .contact-decor-left { left: -45%; top: -3%; width: 90vw; opacity: .07; }
  .contact-status { font-size: .68rem; letter-spacing: .08em; }
}

@media (max-width: 700px) {
  /* No celular os dois botoes empilham; larguras diferentes ficam tortas. */
  .cta-pair { flex-direction: column; align-items: stretch; width: 100%; }
  .cta-pair .button { width: 100%; }
}

/* ===========================================================
   31. FICHA TECNICA: NUVENS MAIORES
   O Paulo pediu presenca de verdade nas laterais.
   =========================================================== */
.team-cloud-left  { left: -12%; top: -2%;  width: min(46vw, 700px); opacity: .58; }
.team-cloud-right { right: -13%; bottom: -3%; width: min(56vw, 860px); opacity: .5; }
@media (max-width: 980px) {
  .team-cloud-left  { width: 62vw; left: -22%; opacity: .4; }
  .team-cloud-right { width: 82vw; right: -26%; opacity: .36; }
}
@media (max-width: 700px) {
  .team-cloud-left  { width: 78vw; left: -32%; top: 0; opacity: .3; }
  .team-cloud-right { width: 104vw; right: -40%; opacity: .26; }
}

/* ===========================================================
   32. CONTATO: DUAS COLUNAS, COM O PROXIMO PASSO
   Estava uma pilha centralizada com muito ar. Agora a esquerda
   convida e a direita responde a pergunta que trava o patrocinio:
   o que acontece depois que eu disser sim.
   =========================================================== */
.contact {
  display: grid;
  grid-template-columns: 1fr .92fr;
  column-gap: clamp(48px, 6vw, 110px);
  align-items: center;
  text-align: left;
  min-height: 0;
  padding-block: clamp(104px, 11vw, 176px);
  padding-inline: max(var(--pad), (100% - 1360px) / 2);
}
.contact-copy { position: relative; z-index: 2; display: block; align-items: stretch; }
.contact h2 { max-width: none; }
.contact-copy > p { margin-top: 18px; max-width: 520px; }
.contact .cta-pair { margin-top: 36px; justify-content: flex-start; }
.contact-meta { align-items: flex-start; margin-top: 34px; gap: 10px; }
.contact-status { color: rgba(217,187,242,.7); }

.contact-steps {
  position: relative;
  z-index: 2;
  padding: clamp(34px, 3vw, 48px) clamp(30px, 2.8vw, 44px);
  border-radius: 26px;
  background: rgba(217,187,242,.07);
  backdrop-filter: blur(3px);
}
.steps-title {
  display: block;
  margin-bottom: 26px;
  color: var(--lavender);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.contact-steps ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 24px; }
.contact-steps li { display: grid; grid-template-columns: 54px 1fr; gap: 18px; align-items: start; }
.contact-steps b {
  color: rgba(217,187,242,.45);
  font-family: var(--display);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1;
}
.contact-steps h3 { margin: 0 0 6px; color: white; font-size: 1.16rem; line-height: 1.25; }
.contact-steps span { color: #d7cbdf; font-size: .98rem; line-height: 1.6; }
.contact-steps .producer-logo { width: 116px; margin-top: 34px; opacity: .8; }

.contact-decor-top { left: 26%; top: -16%; right: auto; bottom: auto; width: min(38vw, 560px); opacity: .09; }

@media (max-width: 980px) {
  .contact { grid-template-columns: 1fr; row-gap: 48px; }
}
@media (max-width: 700px) {
  .contact { padding-block: clamp(76px, 18vw, 110px); }
  .contact-steps { padding: 30px 24px; border-radius: 20px; }
  .contact-steps li { grid-template-columns: 42px 1fr; gap: 14px; }
  .contact-steps b { font-size: 1.8rem; }
  .contact-decor-top { display: none; }
}

/* ===========================================================
   33. NUVENS: SO A QUE FUNCIONA
   O Paulo reprovou a da esquerda da ficha tecnica e as do
   contato: cropavam na borda e nao encostavam em nada. Sobra a
   da direita da ficha tecnica, que se dissolve no fundo claro.
   Espaco vazio e melhor que enfeite mal encaixado.
   =========================================================== */
.team-cloud-right { right: -10%; bottom: -4%; width: min(58vw, 900px); opacity: .52; }
@media (max-width: 980px) { .team-cloud-right { width: 86vw; right: -24%; opacity: .38; } }
@media (max-width: 700px) { .team-cloud-right { width: 106vw; right: -38%; opacity: .28; } }

/* O contato ficou sem decoracao nenhuma, entao o cartao de passos
   precisa segurar a direita sozinho. */
.contact-steps { border: 1px solid rgba(217,187,242,.13); }

/* ===========================================================
   34. BOTAO DO BOOK DENTRO DO TEXTO
   Era link de texto com seta diagonal. Virou botao secundario.
   =========================================================== */
.book-inline { margin-top: 28px; align-self: flex-start; }

/* ===========================================================
   35. MOBILE: O ICONE SEMPRE ENCOSTADO NA DIREITA
   Botao de largura cheia com conteudo centralizado deixava o
   circulo boiando no meio. Agora o texto vai para a esquerda e o
   icone para a extremidade, em todo botao do site.
   =========================================================== */
@media (max-width: 700px) {
  .button,
  .button-large,
  .button-small,
  .benefits-toggle {
    justify-content: space-between;
    text-align: left;
  }
  .cta-pair .button,
  .contact .cta-pair .button,
  .book-inline { width: 100%; }
  .book-inline { align-self: stretch; }
  .header-cta,
  .header-cta.button-small { justify-content: center; width: auto; }
}

/* ===========================================================
   36. MOBILE: BOTOES TODOS DA MESMA LARGURA, E SEM ESTOURAR
   O rotulo "Falar com a produção" com nowrap dava 367px de
   min-content e empurrava a coluna da contrapartida social para
   fora da tela. Aperta o botao e destrava o minimo da grid.
   =========================================================== */
@media (max-width: 700px) {
  .impact, .impact-heading, .impact-list, .contact, .contact-copy, .story-copy { min-width: 0; }

  .button, .button-large, .button-small {
    padding-left: 22px;
    padding-right: 7px;
    gap: 10px;
    font-size: .7rem;
    letter-spacing: .07em;
  }
  .arrow-circle { width: 34px; height: 34px; }
  .arrow-circle svg { width: 15px; height: 15px; }

  /* Uma largura so: todo botao de secao ocupa a linha inteira,
     assim o icone fica sempre no mesmo lugar ao rolar a pagina.
     O da barra de navegacao continua acompanhando o texto. */
  .button, .button-large, .button-small { width: 100%; }
  .header-cta, .header-cta.button-small { width: auto; }
  .hero-actions .button, .footer-contact .button, .section-cta { width: 100%; }
}

/* O bloco 26 redefiniu as colunas do card social fora de media
   query e derrubou a regra de celular que vinha antes. Mesma
   armadilha de sempre: override tardio ganha de media query. */
@media (max-width: 700px) {
  .impact-list article { grid-template-columns: 1fr; gap: 10px; padding: 26px 24px; }
}

/* ===========================================================
   37. NUVENS DE FUNDO NAS SECOES CLARAS
   Como no livreto: grandes, ocupando espaco de fundo de verdade,
   e fundidas no papel em vez de coladas por cima.

   Tres decisoes que fazem a diferenca:
   1) mix-blend-mode: multiply. Sobre fundo claro, o branco da
      nuvem some e so o roxo fica. E o que faz ela virar fundo em
      vez de adesivo.
   2) A borda dura do PNG fica sempre FORA da tela. So a parte
      macia do meio aparece, entao nao existe corte visivel.
   3) Nunca encostam no topo da secao, que e onde mora a onda
      divisoria. Ficam do meio para baixo.
   =========================================================== */
.bg-cloud {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: multiply;
}

/* --- Parceria: 2740px de papel claro que estava vazio --- */
.cloud-partner-a { left: -26%; top: 14%;  width: min(64vw, 940px); opacity: .46; }
.cloud-partner-b { right: -24%; top: 40%; width: min(72vw, 1080px); opacity: .4; }
.cloud-partner-c { left: -30%; bottom: 4%; width: min(78vw, 1160px); opacity: .34; transform: scaleX(-1); }

/* --- Ficha tecnica: a da direita ja funcionava, entra a do meio --- */
.cloud-team-mid { left: -34%; top: 38%; width: min(70vw, 1040px); opacity: .42; }
.team-cloud-right { mix-blend-mode: multiply; opacity: .62; }

@media (max-width: 980px) {
  .cloud-partner-a { left: -40%; width: 96vw; opacity: .34; }
  .cloud-partner-b { right: -44%; width: 104vw; opacity: .3; }
  .cloud-partner-c { left: -48%; width: 110vw; opacity: .26; }
  .cloud-team-mid  { left: -52%; width: 108vw; opacity: .3; }
}
@media (max-width: 700px) {
  /* No celular a coluna e estreita e a nuvem vira mancha atras do
     texto. Fica so a da ficha tecnica, que cai em area vazia. */
  .cloud-partner-a, .cloud-partner-b, .cloud-partner-c { display: none; }
  .cloud-team-mid { left: -70%; top: 44%; width: 150vw; opacity: .22; }
}

/* ===========================================================
   38. MOBILE: TEXTO CENTRADO, ICONE ANCORADO NA DIREITA
   O space-between jogava o texto para a esquerda e deixava um
   vao no meio. Agora o rotulo centraliza na largura toda e o
   icone sai do fluxo, preso na extremidade. As duas coisas que o
   Paulo pediu, ao mesmo tempo.
   =========================================================== */
@media (max-width: 700px) {
  .button, .button-large, .button-small, .benefits-toggle {
    position: relative;
    justify-content: center;
    text-align: center;
    padding-left: 22px;
    padding-right: 22px;
    gap: 0;
    font-size: .84rem;
    letter-spacing: .08em;
    min-height: 62px;
  }
  .button .arrow-circle,
  .button-large .arrow-circle,
  .button-small .arrow-circle,
  .benefits-toggle .arrow-circle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    margin: 0;
    width: 40px;
    height: 40px;
  }
  .arrow-circle svg { width: 17px; height: 17px; }

  /* O texto nao pode correr por baixo do icone. */
  .button, .button-large, .button-small, .benefits-toggle { padding-right: 58px; padding-left: 58px; }

  /* O da barra de navegacao nao tem icone, entao volta a ser
     simetrico, so que com a letra maior. */
  .header-cta, .header-cta.button-small {
    padding-left: 20px;
    padding-right: 20px;
    font-size: .72rem;
    letter-spacing: .07em;
    min-height: 44px;
  }
}
/* Na barra de navegacao do desktop a letra tambem sobe um ponto. */
.header-cta, .header-cta.button-small { font-size: .82rem; }
@media (max-width: 980px) {
  .header-cta, .header-cta.button-small { font-size: .7rem; }
}

/* ===========================================================
   39. NUVENS ANCORADAS PELO PROPRIO TAMANHO, NAO PELA TELA
   O bug do 4K: `left: -34%` e 34% da LARGURA DA SECAO. A 1920 da
   -653px e sobra nuvem na tela; a 3840 da -1306px e a nuvem sai
   inteira de cena, porque a largura dela estava travada em 1040px.
   A da direita sobreviveu por acaso, so porque o deslocamento
   dela era menor.

   Agora o deslocamento e uma fracao da PROPRIA nuvem, via
   translateX. Seja qual for a tela, a mesma parte dela fica
   visivel. E a largura passa a crescer com o viewport em vez de
   travar, para nao virar selinho no 4K.
   =========================================================== */
.cloud-partner-a,
.cloud-partner-b,
.cloud-partner-c,
.cloud-team-mid,
.team-cloud-right {
  width: clamp(520px, 58vw, 1700px);
}

.cloud-partner-a { left: 0;  right: auto; transform: translateX(-44%); }
.cloud-partner-b { right: 0; left: auto;  transform: translateX(42%); }
.cloud-partner-c { left: 0;  right: auto; transform: translateX(-48%) scaleX(-1); }
.cloud-team-mid  { left: 0;  right: auto; transform: translateX(-46%); }
.team-cloud-right{ right: 0; left: auto;  transform: translateX(18%); }

@media (max-width: 980px) {
  .cloud-partner-a, .cloud-partner-b, .cloud-partner-c,
  .cloud-team-mid, .team-cloud-right { width: clamp(420px, 104vw, 900px); }
  .cloud-partner-a { transform: translateX(-52%); }
  .cloud-partner-b { transform: translateX(50%); }
  .cloud-partner-c { transform: translateX(-56%) scaleX(-1); }
  .cloud-team-mid  { transform: translateX(-54%); }
  .team-cloud-right{ transform: translateX(30%); }
}
@media (max-width: 700px) {
  .cloud-team-mid, .team-cloud-right { width: clamp(360px, 150vw, 720px); }
  .cloud-team-mid  { left: 0; top: 44%; transform: translateX(-58%); }
  .team-cloud-right{ right: 0; transform: translateX(34%); }
}

/* ===========================================================
   40. DIVISORIAS: A ONDA TEM QUE CRESCER JUNTO COM A TELA
   Elas nunca sumiram, elas ACHATARAM. A altura estava travada em
   110px por um clamp. A 1440 isso e 6,5% da largura e a curva se
   le; a 3840 vira 2,88%, e o mesmo SVG esticado em 3840px de
   largura com 110px de altura desenha praticamente uma reta.

   Sem teto util: em 6.4vw a proporcao fica identica em qualquer
   largura, que e o que o Paulo aprovou a 1920.
   =========================================================== */
.experience::before,
.partnership::before,
.impact::before,
.team::before,
.contact::before {
  --wave-h: clamp(54px, 6.4vw, 260px);
  height: var(--wave-h);
  top: calc(var(--wave-h) * -1 + 2px);
}

/* ===========================================================
   41. FOTO NOVA DO PAULO (card 9)
   A foto e quase do mesmo formato do card, entao `cover` sozinho
   nao corta nada e sobra camiseta. Um scale com origem no rosto
   fecha o enquadramento e come o predio do fundo, deixando ela na
   mesma regua dos outros retratos.
   =========================================================== */

/* ===========================================================
   42. ESPACAMENTO CONTRA A ONDULACAO
   Erro meu, e o Paulo viu antes de mim. A onda de divisoria nao
   fica ENTRE as secoes: ela sobe por cima da secao anterior, com
   a propria altura. Quando eu soltei o teto de 110px para 6.4vw,
   ela passou a comer muito mais espaco da secao de cima, e o
   conteudo ficou esmagado contra a curva.

   Medido a 1920, sobra real entre o ultimo elemento e o inicio
   da onda ANTES desta correcao:
     story 2px | experiencia 17px | parceria 52px | impacto -8px
   Ou seja: o botao da contrapartida social estava DEBAIXO da onda.
   Enquanto isso o topo de todas elas tinha 150 a 176px de folga.
   E exatamente o que o olho ve: muito ar em cima, nada embaixo.

   A correcao: quem tem onda embaixo ganha, no padding inferior, a
   altura da onda somada ao seu proprio respiro. Assim a folga
   visual embaixo volta a bater com a de cima, em qualquer largura,
   porque as duas coisas crescem pela mesma variavel.
   =========================================================== */
:root {
  --wave-h: clamp(54px, 6.4vw, 260px);
}

.experience::before,
.partnership::before,
.impact::before,
.team::before,
.contact::before {
  height: var(--wave-h);
  top: calc(var(--wave-h) * -1 + 2px);
}

/* O respiro proprio de cada secao, igual ao que ela ja tinha. */
.story      { --respiro: clamp(72px, 6.5vw, 125px); }
.experience { --respiro: clamp(96px, 9.1vw, 175px); }
.partnership{ --respiro: clamp(96px, 9.1vw, 175px); }
.impact     { --respiro: clamp(96px, 7.8vw, 150px); }
.team       { --respiro: clamp(96px, 9.1vw, 175px); }

.story,
.experience,
.partnership,
.impact,
.team {
  padding-bottom: calc(var(--respiro) + var(--wave-h));
}

/* Ajuste fino: medido depois da correcao acima, tres secoes ainda
   ficavam curtas (story 125, experiencia 140, impacto 115) contra
   os 175 do topo das vizinhas. Experiencia e impacto tem um filho
   que avanca 35px alem do fim do bloco, dai a compensacao. Alvo:
   a mesma folga de 175 embaixo e em cima, em todas. */
.story      { --respiro: clamp(96px, 9.1vw, 175px); }
.experience { --respiro: clamp(115px, 10.9vw, 210px); }
.impact     { --respiro: clamp(115px, 10.9vw, 210px); }

/* O topo do impacto era o unico fora do compasso: 150 contra os
   175 que a parceria deixava embaixo. */
.impact { padding-top: clamp(96px, 9.1vw, 175px); }

/* ===========================================================
   43. UM COMPASSO SO, PARA TODAS AS SECOES E TODAS AS LARGURAS
   A tentativa anterior casava em cima e embaixo a 1920 e a 3840,
   mas desandava a 1440 (embaixo 122, em cima 173). Motivo: os
   paddings de topo vinham de clamps diferentes por secao, com
   curvas diferentes, entao nenhuma formula unica de rodape ia
   acompanhar todos eles em toda largura.

   Correcao de raiz: o topo tambem passa a sair da MESMA variavel.
   Com isso a folga de cima e a de baixo sao a mesma conta em
   qualquer viewport, por construcao, e nao por ajuste manual.

   A compensacao de 35px existe porque na experiencia e no impacto
   o ultimo bloco avanca 35px alem do fim do conteudo. Medido, e
   constante, nao proporcional.
   =========================================================== */
:root {
  --wave-h: clamp(54px, 6.4vw, 260px);
  --respiro: clamp(96px, 9.1vw, 175px);
}

.story,
.experience,
.partnership,
.impact,
.team,
.contact {
  padding-top: var(--respiro);
}

.story,
.experience,
.partnership,
.impact,
.team {
  padding-bottom: calc(var(--respiro) + var(--wave-h) + var(--compensa, 0px));
}

.experience,
.impact { --compensa: 35px; }

.contact { padding-bottom: var(--respiro); }

/* Os `--respiro` que eu tinha declarado por secao no bloco 42
   continuavam valendo: variavel declarada NO proprio elemento
   sempre ganha da que ele herdaria do :root, nao importa a ordem
   no arquivo. Era por isso que 1440 seguia alternando 131 e 157.
   Todas voltam para a variavel unica; so a compensacao fica. */
.story,
.experience,
.partnership,
.impact,
.team,
.contact { --respiro: clamp(96px, 9.1vw, 175px); }

/* ===========================================================
   44. LOGO NO CELULAR
   Geometricamente ele esta certo: proporcao exata do SVG, centro
   vertical batendo com o botao e o menu em 41px, sem transform.
   A inclinacao esta DESENHADA no arquivo, e uma onda de proposito
   do lettering. O que acontece e que a 62px essa onda para de
   parecer estilo e passa a parecer torto, e ele ainda era o menor
   elemento da barra. Cresce para ler como desenho.
   =========================================================== */
@media (max-width: 700px) {
  .brand { width: 88px; }
  .brand img { max-height: 48px; }
}

/* O logo nao estava crescendo porque e item de flex e estava
   encolhendo para caber ao lado do botao. Trava o tamanho dele e
   deixa a sobra para os outros, que e a ordem certa de prioridade
   numa barra de marca. */
@media (max-width: 700px) {
  .brand { flex: 0 0 88px; width: 88px; }
}

/* Com o logo travado em 88px o botao passou a empurrar o menu
   para fora da tela. Em telas estreitas quem cede e o botao, nao
   a marca nem o menu. */
@media (max-width: 470px) {
  .header-cta, .header-cta.button-small {
    flex: 0 1 auto;
    min-width: 0;
    padding-left: 14px;
    padding-right: 14px;
    font-size: .6rem;
    letter-spacing: .05em;
  }
  .menu-toggle { flex: 0 0 auto; }
}

/* ===========================================================
   45. LOGO TORTO NO MOBILE — MEDIDO E CORRIGIDO
   Rasterizei o SVG e calculei a regressao ponderada do centroide
   de tinta por coluna, nas 442 colunas com desenho: o lettering
   SOBE 1,56 grau da esquerda para a direita. Nao era impressao,
   e nao era o centro do box. Era o desenho torto mesmo.
   Contra-rotacao de 1,56 grau deixa a palavra no prumo.
   =========================================================== */
@media (max-width: 700px) {
}

/* ===========================================================
   46. LOGO DO HERO — O QUE ESTAVA TORTO DE VERDADE
   Na rodada anterior eu corrigi o logo do header e dei o assunto
   por encerrado. O que o Paulo estava vendo era o grande, do hero,
   que usa OUTRO arquivo: Alice-logo (2).svg.

   Medido pelo mesmo metodo (regressao ponderada do centroide de
   tinta por coluna, sobre o SVG rasterizado):
     Alice-logo (1).svg, header ... sobe 1,57 grau
     Alice-logo (2).svg, hero ..... sobe 1,31 grau
     so a palavra ALICE do (2) .... sobe 3,30 grau

   Corrijo pelo conjunto, 1,31 grau, e nao pelos 3,30 da palavra
   sozinha: o "NO PAIS DAS MARAVILHAS" e desenhado em arco de
   proposito, e endireitar so a palavra jogaria a linha de baixo
   para o outro lado.
   =========================================================== */
@media (max-width: 700px) {
}

/* ===========================================================
   47. ANGULO FINAL DOS DOIS LOGOS, ACHADO POR VARREDURA
   As correcoes de 1,31 e 1,56 grau nao zeraram: sobrou 0,44 e
   0,46 grau. Motivo: medir a inclinacao do arquivo parado e
   subtrair NAO e a mesma coisa que zerar o residuo. A regressao
   do centroide por coluna carrega um vies das proprias formas das
   letras, e esse vies so some iterando.

   Entao em vez de calcular, varri: rotacionei de 0 a 2,8 grau
   medindo o residuo em cada passo, e peguei onde ele cruza zero.

     hero, Alice-logo (2)  ->  1,8: -0,113 | 2,0: +0,036  => 1,95
     header, Alice-logo (1) -> 2,2: -0,029 | 2,5: +0,202  => 2,24
   =========================================================== */
@media (max-width: 700px) {
}

/* Enquadramento das quatro fichas novas (23/09/2026). Cada foto veio
   com o rosto numa altura diferente; sem isto o corte pega tronco. */

/* ===========================================================
   ENQUADRAMENTO DOS RETRATOS
   Cada foto veio com o rosto numa altura diferente, entao o corte
   e ajustado um a um. A ordem dos cards segue a hierarquia do
   livreto: direcao primeiro, depois os nomes de maior peso.
   =========================================================== */


@media (max-width: 700px) {
  .team-grid .team-card:nth-child(1) .team-front img { object-position: center 24%; } /* Milene Rodrigues */
.team-grid .team-card:nth-child(2) .team-front img { object-position: center 30%; } /* Giovana Zotti */
.team-grid .team-card:nth-child(3) .team-front img { object-position: center 20%; } /* Tábatha Almeida */
.team-grid .team-card:nth-child(4) .team-front img { object-position: center 20%; } /* Renato Bellini */
.team-grid .team-card:nth-child(5) .team-front img { object-position: center 20%; } /* Cris Tákkahashi */
.team-grid .team-card:nth-child(6) .team-front img { object-position: center 14%; } /* João Eller */
.team-grid .team-card:nth-child(7) .team-front img { object-position: center 19%; } /* Karen Pecora */
.team-grid .team-card:nth-child(8) .team-front img { object-position: center 18%; } /* Thiago Magnata */
.team-grid .team-card:nth-child(9) .team-front img { object-position: center 20%; } /* Rafael Vasconcelos */
.team-grid .team-card:nth-child(10) .team-front img { object-position: center 16%; } /* Victor Ribeiro */
.team-grid .team-card:nth-child(11) .team-front img { object-position: center 16%; } /* Maristela Bueno */
.team-grid .team-card:nth-child(12) .team-front img { object-position: center 21%; } /* Victor Scaramal */
.team-grid .team-card:nth-child(13) .team-front img { object-position: center 12%; } /* Paulo Silvano */
.team-grid .team-card:nth-child(13) .team-front img { transform: scale(1.34); transform-origin: 46% 26%; } /* Paulo Silvano */

/* ===========================================================
   48. HERO NO CELULAR: SAIR DE LAYOUT E IR PARA COMPOSIÇÃO
   As três camadas do portal animavam left, top, width e height
   junto com --hero-progress. Isso obriga o navegador a refazer
   layout e repintar a cada frame de rolagem, e duas delas ainda
   carregam máscara de gradiente, que é das coisas mais caras de
   repintar. No desktop passa; num celular, engasga.

   Aqui a geometria vira fixa e todo o movimento passa a ser
   transform. Transform roda na GPU, sem layout e sem repaint.
   Os números são os mesmos, convertidos:

     portal-bg    largura 1553 → 1763  =  scale 1 + 0,13525·p
     portal-mist  largura 2160 → 2560  =  scale 1 + 0,18519·p
     overlay      altura   800 → 492   =  scaleY 1 − 0,385·p

   As nuvens já usavam transform e não precisaram mudar.
   =========================================================== */
.hero-portal-bg {
  left: 184px;
  top: -334px;
  width: 1553px;
  height: 1508px;
  transform-origin: 0 0;
  transform:
    translate3d(calc(var(--hero-progress) * -106px), calc(var(--hero-progress) * -92px), 0)
    scale(calc(1 + var(--hero-progress) * 0.13525));
}
.hero-portal-overlay {
  top: 730px;
  height: 800px;
  transform-origin: 0 0;
  transform:
    translate3d(0, calc(var(--hero-progress) * -300px), 0)
    scaleY(calc(1 - var(--hero-progress) * 0.385));
}
.hero-portal-mist {
  left: -120px;
  top: 500px;
  width: 2160px;
  height: 1215px;
  transform-origin: 0 0;
  transform:
    translate3d(calc(var(--hero-progress) * -200px), calc(var(--hero-progress) * -430px), 0)
    scale(calc(1 + var(--hero-progress) * 0.18519));
}

/* Promove as camadas para a GPU e impede que o navegador as
   rasterize de novo a cada passo da animação. */
.hero-portal-bg,
.hero-portal-overlay,
.hero-portal-mist,
.hero-cloud-left,
.hero-cloud-right {
  will-change: transform;
  backface-visibility: hidden;
}

/* ===========================================================
   49. O PESO DO HERO
   As quatro imagens do hero eram PNG e somavam 4,8 MB. PNG é
   péssimo para arte pintada: guarda cada pixel sem perda numa
   imagem que não precisa disso. Em WebP, com alfa preservado nas
   que têm transparência, as mesmas quatro dão 355 KB.

   No celular isso conta duas vezes: menos download e, sobretudo,
   menos decodificação, que é o que trava a primeira rolagem.
   =========================================================== */
.hero-portal-bg { background-image: url("assets/New Hero Section/bg-central_4.webp"); }
.hero-portal-mist { background-image: url("assets/New Hero Section/alice_foreground_mist_true_alpha.webp"); }
.cloud-back-left, .cloud-front-left, .cloud-back-right, .cloud-front-right {
  background-image: url("assets/New Hero Section/assets-alice_3_2.webp");
}
.cloud-middle-left, .cloud-middle-right {
  background-image: url("assets/New Hero Section/assets-alice_7_1.webp");
}