/* O Reencontro — Capability Composition V3
   One exhibition physics; twelve internal grammars. */

.capability-composition {
  --paper: #f4eee3;
  --paper-bright: #fffaf2;
  --ink: #211915;
  --copper: #c9683f;
  --line: rgba(33, 25, 21, .14);
  position: relative;
  min-height: 100vh;
  padding: clamp(5.5rem, 8vw, 8rem) clamp(1rem, 4vw, 5.5rem) clamp(5rem, 8vw, 8rem);
  overflow: clip;
  color: var(--ink);
  background:
    radial-gradient(circle at 72% 18%, rgba(255, 255, 255, .96), transparent 28%),
    radial-gradient(circle at 18% 78%, rgba(218, 133, 88, .13), transparent 32%),
    linear-gradient(145deg, var(--paper-bright), var(--paper) 68%);
  isolation: isolate;
}

.capability-composition::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .34;
  background-image:
    linear-gradient(rgba(33, 25, 21, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33, 25, 21, .045) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse at 50% 55%, #000 18%, transparent 78%);
}

.capability-composition::after {
  position: absolute;
  z-index: -1;
  top: 27%;
  left: -5%;
  content: "POSSIBILIDADES";
  color: rgba(33, 25, 21, .025);
  font-size: clamp(6rem, 16vw, 19rem);
  font-weight: 900;
  letter-spacing: -.08em;
  transform: rotate(-7deg);
  white-space: nowrap;
}

.capability-composition__intro {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .5fr);
  align-items: end;
  gap: clamp(2rem, 6vw, 9rem);
  max-width: 1620px;
  margin: 0 auto clamp(2.5rem, 4vw, 4.5rem);
}

.capability-kicker {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 -1.2rem;
  font-size: .63rem;
  font-weight: 850;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.capability-kicker span {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  color: var(--paper-bright);
  background: var(--ink);
  border-radius: 50%;
}

.capability-composition h2 {
  max-width: 17ch;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 5.35vw, 7rem);
  font-weight: 400;
  line-height: .88;
  letter-spacing: -.065em;
}

.capability-composition h2 em {
  color: var(--copper);
  font-weight: 400;
}

.capability-composition__intro > p:last-child {
  max-width: 31rem;
  margin: 0 0 .35rem;
  color: rgba(33, 25, 21, .68);
  font-size: clamp(.85rem, 1.02vw, 1.05rem);
  line-height: 1.7;
}

.concept-wall {
  position: relative;
  z-index: 4;
  width: min(100%, 1680px);
  height: clamp(900px, 70vw, 1000px);
  margin: 0 auto;
  perspective: 1800px;
  transform-style: preserve-3d;
}

.concept-wall__legend {
  position: absolute;
  z-index: 30;
  top: 0;
  right: 1.5%;
  left: 1.5%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  color: rgba(33, 25, 21, .5);
  font-size: .52rem;
  font-weight: 850;
  letter-spacing: .14em;
}

.concept-wall__legend i { height: 1px; background: var(--line); }

.concept-wall__axis {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.concept-wall__axis--x {
  right: 1%;
  bottom: 12%;
  left: 1%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 104, 63, .24), transparent);
  transform: rotate(-4deg);
}

.concept-wall__axis--y {
  top: 6%;
  bottom: 2%;
  left: 51%;
  width: 1px;
  background: linear-gradient(transparent, rgba(33, 25, 21, .16), transparent);
  transform: rotate(7deg);
}

.concept-tile {
  --tile-rotate: 0deg;
  --tile-depth: 0px;
  position: absolute;
  z-index: 2;
  display: block;
  margin: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  opacity: 0;
  transform: translate3d(0, 34px, var(--tile-depth)) rotate(var(--tile-rotate)) scale(.94);
  transform-origin: 50% 70%;
  transition:
    opacity .8s var(--ease),
    filter .45s var(--ease),
    transform .72s var(--ease);
  transition-delay: calc(var(--order, 0) * 46ms);
}

.capability-composition.is-visible .concept-tile {
  opacity: 1;
  transform: translate3d(0, 0, var(--tile-depth)) rotate(var(--tile-rotate)) scale(1);
}

.concept-tile:hover,
.concept-tile:focus-visible {
  z-index: 40;
  outline: none;
  filter: saturate(1.08);
  transform: translate3d(0, -13px, 88px) rotate(0deg) scale(1.055);
}

.concept-tile:focus-visible .mini-browser { box-shadow: 0 0 0 3px var(--paper-bright), 0 0 0 6px var(--copper), 0 35px 90px rgba(31, 23, 18, .3); }

.concept-tile__status {
  position: absolute;
  z-index: 4;
  top: .38rem;
  right: .45rem;
  padding: .28rem .42rem;
  color: rgba(255, 255, 255, .84);
  background: rgba(13, 11, 10, .72);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  font-size: clamp(.3rem, .46vw, .48rem);
  font-weight: 850;
  letter-spacing: .1em;
}

.concept-tile__caption {
  display: flex;
  justify-content: space-between;
  gap: .65rem;
  margin-top: .5rem;
  padding: 0 .15rem;
  color: var(--ink);
}

.concept-tile__caption b {
  font-size: clamp(.42rem, .58vw, .62rem);
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.concept-tile__caption em {
  color: rgba(33, 25, 21, .56);
  font-family: Georgia, serif;
  font-size: clamp(.45rem, .63vw, .66rem);
}

.mini-browser {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(20, 16, 14, .22);
  border-radius: clamp(.45rem, .8vw, .9rem);
  box-shadow: 0 24px 65px rgba(31, 23, 18, .22), inset 0 1px rgba(255, 255, 255, .55);
  container-type: inline-size;
  transition: box-shadow .45s var(--ease);
}

.mini-browser__bar {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3, 5px) 1fr;
  align-items: center;
  gap: 4px;
  height: clamp(14px, 1.45vw, 23px);
  padding: 0 .48rem;
  color: rgba(255, 255, 255, .62);
  background: #171311;
  font-style: normal;
}

.mini-browser__bar b {
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, .3);
  border-radius: 50%;
}

.mini-browser__bar b:first-child { background: #cb6541; }
.mini-browser__bar em { justify-self: center; font-size: clamp(.28rem, .45cqw, .42rem); letter-spacing: .08em; }

.mini-page {
  position: absolute;
  inset: clamp(14px, 1.45vw, 23px) 0 0;
  display: block;
  overflow: hidden;
}

/* Placement: overlapping field, not a catalog grid. */
.concept-tile--abertura { --order: 1; --tile-rotate: -4.5deg; --tile-depth: 20px; top: 8%; left: 1%; z-index: 8; width: 28%; }
.concept-tile--aurea { --order: 2; --tile-rotate: 1.2deg; --tile-depth: 56px; top: 2%; left: 27%; z-index: 11; width: 33%; }
.concept-tile--viva { --order: 3; --tile-rotate: 5deg; --tile-depth: 16px; top: 8%; left: 61%; z-index: 7; width: 20%; }
.concept-tile--fluxo { --order: 4; --tile-rotate: 1.5deg; --tile-depth: 70px; top: 29%; left: 3%; z-index: 14; width: 29%; }
.concept-tile--nexa { --order: 5; --tile-rotate: -4deg; --tile-depth: 24px; top: 27%; left: 31%; z-index: 8; width: 22%; }
.concept-tile--brasa { --order: 6; --tile-rotate: -2deg; --tile-depth: 82px; top: 25%; left: 54%; z-index: 16; width: 31%; }
.concept-tile--apex { --order: 7; --tile-rotate: -4deg; --tile-depth: 18px; top: 52%; left: 0; z-index: 7; width: 28%; }
.concept-tile--mara { --order: 8; --tile-rotate: 4deg; --tile-depth: 94px; top: 48%; left: 25%; z-index: 18; width: 20%; }
.concept-tile--no { --order: 9; --tile-rotate: -2deg; --tile-depth: 52px; top: 49%; left: 43%; z-index: 12; width: 27%; }
.concept-tile--oca { --order: 10; --tile-rotate: 4.5deg; --tile-depth: 12px; top: 53%; left: 70%; z-index: 6; width: 27%; }
.concept-tile--rumo { --order: 11; --tile-rotate: 2.5deg; --tile-depth: 72px; top: 64%; left: 13%; z-index: 14; width: 29%; }
.concept-tile--claro { --order: 12; --tile-rotate: -3deg; --tile-depth: 34px; top: 63%; left: 48%; z-index: 9; width: 33%; }

.concept-tile--viva .mini-browser,
.concept-tile--mara .mini-browser { aspect-ratio: 4 / 5; }

/* 01 — launch / temporal story. */
.mini-page--abertura {
  color: #fff1df;
  background: radial-gradient(circle at 78% 38%, #5830f7, transparent 34%), linear-gradient(145deg, #1d0a22, #09070d);
}
.mini-page--abertura::after { position: absolute; inset: 0; content: ""; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px); background-size: 11cqw 11cqw; mask-image: radial-gradient(circle at 55% 45%,#000,transparent 75%); }
.mini-page--abertura small { position:absolute; z-index:2; top:8%; left:6%; font-size:2.1cqw; letter-spacing:.14em; }
.mini-page--abertura strong { position:absolute; z-index:2; left:5.5%; bottom:16%; font-size:10.2cqw; line-height:.76; letter-spacing:-.07em; }
.mini-page--abertura strong em { color:#ff7350; font-family:Georgia,serif; font-weight:400; }
.mini-page--abertura > i { position:absolute; top:6%; right:5%; color:#ffad78; font-size:18cqw; font-style:normal; font-weight:900; line-height:1; opacity:.7; }
.mini-page--abertura > b { position:absolute; z-index:2; right:5%; bottom:6%; padding:2.4cqw 3cqw; color:#190b19; background:#ffad78; border-radius:999px; font-size:2cqw; letter-spacing:.08em; }

/* 02 — real estate / spatial walkthrough. */
.mini-page--aurea { color:#f5eee4; background:#252720; }
.mini-page--aurea img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.62) contrast(1.08); }
.mini-page--aurea::after { position:absolute; inset:0; content:""; background:linear-gradient(180deg,rgba(10,12,10,.12),rgba(10,12,10,.76)),linear-gradient(90deg,rgba(10,12,10,.48),transparent 70%); }
.mini-page--aurea small { position:absolute; z-index:2; top:8%; left:6%; padding-bottom:3cqw; border-bottom:1px solid rgba(255,255,255,.48); font-size:1.8cqw; letter-spacing:.18em; }
.mini-page--aurea strong { position:absolute; z-index:2; left:6%; bottom:16%; font-family:Georgia,serif; font-size:9.2cqw; font-weight:400; line-height:.82; letter-spacing:-.05em; }
.mini-page--aurea strong em { color:#dab980; }
.mini-page--aurea > b { position:absolute; z-index:2; right:5%; bottom:6%; font-size:1.7cqw; letter-spacing:.12em; }

/* 03 — pet care / tactile play. */
.mini-page--viva { color:#1b2363; background:linear-gradient(145deg,#c7f366,#9debd1); }
.mini-page--viva::before { position:absolute; right:-28%; bottom:-12%; width:100%; aspect-ratio:1; content:""; background:#6551f2; border-radius:50%; }
.mini-page--viva > strong { position:absolute; z-index:3; top:5%; left:7%; color:#2a3dff; font-size:15cqw; letter-spacing:-.09em; }
.mini-page--viva img { position:absolute; z-index:2; right:-5%; bottom:0; width:84%; height:58%; object-fit:cover; clip-path:ellipse(48% 49%); filter:saturate(.75) contrast(1.12); mix-blend-mode:luminosity; }
.mini-page--viva small { position:absolute; z-index:4; top:30%; left:7%; font-size:6.1cqw; font-weight:950; line-height:.85; letter-spacing:-.04em; }
.mini-page--viva > i { position:absolute; z-index:4; left:7%; bottom:6%; padding:3cqw 4cqw; color:#fff; background:#ff456d; border-radius:999px; font-size:2.8cqw; font-style:normal; font-weight:900; }

/* 04 — SaaS / live operational UI. */
.mini-page--fluxo { padding:5cqw 5cqw 4cqw 15cqw; color:#e8fff5; background:#081b18; }
.fluxo-side { position:absolute; inset:0 auto 0 0; width:10cqw; padding-top:5cqw; color:#6fffc6; background:#102b26; font-size:4.6cqw; font-style:normal; line-height:2.8; text-align:center; }
.mini-page--fluxo > small { display:block; color:#75dfbd; font-size:1.7cqw; letter-spacing:.15em; }
.mini-page--fluxo > strong { display:block; margin-top:2.6cqw; font-size:7cqw; letter-spacing:-.055em; }
.fluxo-chart { position:relative; display:flex; height:23cqw; margin:4cqw 0; align-items:end; gap:2cqw; border-bottom:1px solid rgba(111,255,198,.3); }
.fluxo-chart b { flex:1; height:var(--h); background:linear-gradient(#6fffc6,#26a97b); border-radius:2cqw 2cqw 0 0; }
.fluxo-chart b:nth-child(1){--h:30%}.fluxo-chart b:nth-child(2){--h:52%}.fluxo-chart b:nth-child(3){--h:44%}.fluxo-chart b:nth-child(4){--h:72%}.fluxo-chart b:nth-child(5){--h:64%}.fluxo-chart b:nth-child(6){--h:90%}
.fluxo-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:2cqw; }
.fluxo-metrics b { padding:2.2cqw; background:#12332c; border:1px solid rgba(111,255,198,.2); border-radius:2cqw; font-size:4cqw; }
.fluxo-metrics em { display:block; margin-top:1cqw; color:#75a99a; font-size:1.5cqw; font-style:normal; font-weight:500; }

/* 05 — clinic / editorial trust. */
.mini-page--nexa { padding:6cqw; color:#253738; background:linear-gradient(145deg,#eef5ee,#dbe8e2); }
.mini-page--nexa::after { position:absolute; right:-15%; bottom:-28%; width:67%; aspect-ratio:1; content:""; border:1px solid rgba(61,112,101,.28); border-radius:50%; box-shadow:0 0 0 6cqw rgba(255,255,255,.2),0 0 0 12cqw rgba(61,112,101,.06); }
.mini-page--nexa > small { display:block; font-size:1.6cqw; letter-spacing:.15em; }
.mini-page--nexa > strong { position:relative; z-index:2; display:block; margin-top:7cqw; font-family:Georgia,serif; font-size:8.2cqw; font-weight:400; line-height:.9; letter-spacing:-.05em; }
.mini-page--nexa > strong em { color:#4f8378; }
.nexa-orbit { position:absolute; right:7%; bottom:21%; display:grid; width:23cqw; aspect-ratio:1; place-items:center; border:1px solid #6f9b91; border-radius:50%; }
.nexa-orbit i { position:absolute; inset:15%; border:1px solid rgba(79,131,120,.45); border-radius:50%; }
.nexa-orbit b { font-family:Georgia,serif; font-size:6cqw; font-weight:400; }
.nexa-orbit em { position:absolute; bottom:-4cqw; font-size:1.7cqw; letter-spacing:.1em; }
.nexa-cta { position:absolute; left:6cqw; bottom:5cqw; padding:2.4cqw 3cqw; color:#edf5f0; background:#315e56; border-radius:999px; font-size:1.7cqw; letter-spacing:.08em; }

/* 06 — restaurant / sensory editorial. */
.mini-page--brasa { padding:5cqw; color:#ffe6cf; background:radial-gradient(circle at 75% 30%,#a51f10,transparent 30%),#1b0906; }
.mini-page--brasa::after { position:absolute; top:-20%; right:-8%; width:45%; height:150%; content:""; background:linear-gradient(100deg,transparent,#ff4b1f,transparent); filter:blur(3cqw); opacity:.4; transform:rotate(16deg); }
.mini-page--brasa small { position:relative; z-index:2; font-size:1.7cqw; letter-spacing:.18em; }
.mini-page--brasa strong { position:absolute; z-index:2; top:12%; left:5%; font-size:25cqw; line-height:.63; letter-spacing:-.11em; }
.mini-page--brasa > i { position:absolute; z-index:2; top:15%; right:5%; font-size:2cqw; font-style:normal; letter-spacing:.12em; writing-mode:vertical-rl; }
.mini-page--brasa > b { position:absolute; z-index:2; right:5%; bottom:6%; padding:2.4cqw 3cqw; color:#1b0906; background:#ffb37c; font-size:1.8cqw; letter-spacing:.08em; }

/* 07 — hardware / exploded anatomy. */
.mini-page--apex { padding:5cqw; color:#dff6ff; background:radial-gradient(circle at 61% 48%,#143e85,transparent 34%),#030914; }
.mini-page--apex::after { position:absolute; inset:0; content:""; opacity:.23; background-image:linear-gradient(rgba(96,182,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(96,182,255,.25) 1px,transparent 1px); background-size:8cqw 8cqw; }
.mini-page--apex > small { position:relative; z-index:2; color:#71c4ff; font-size:1.7cqw; letter-spacing:.16em; }
.mini-page--apex > strong { position:absolute; z-index:2; left:5%; bottom:10%; font-size:8cqw; line-height:.82; letter-spacing:-.05em; }
.apex-core { position:absolute; z-index:3; top:17%; right:10%; width:33cqw; aspect-ratio:1; border:1px solid #67b9ff; transform:rotate(45deg); }
.apex-core i { position:absolute; inset:var(--i); border:1px solid rgba(103,185,255,.56); }
.apex-core i:nth-child(1){--i:12%}.apex-core i:nth-child(2){--i:25%}.apex-core i:nth-child(3){--i:38%}
.apex-core b { position:absolute; inset:0; display:grid; place-items:center; color:#89d8ff; font-size:7cqw; transform:rotate(-45deg); }
.mini-page--apex > em { position:absolute; z-index:2; right:5%; bottom:6%; color:#75b6db; font-size:1.7cqw; font-style:normal; letter-spacing:.1em; }

/* 08 — creator / collage. */
.mini-page--mara { color:#fff5e8; background:#ee4b2d; }
.mini-page--mara img { position:absolute; right:-22%; bottom:0; width:105%; height:72%; object-fit:cover; filter:grayscale(1) contrast(1.2); mix-blend-mode:multiply; }
.mini-page--mara::after { position:absolute; inset:0; content:""; background:linear-gradient(180deg,transparent 42%,rgba(40,9,4,.55)); }
.mini-page--mara small { position:absolute; z-index:2; top:5%; left:6%; width:60%; font-size:2.2cqw; line-height:1.4; letter-spacing:.12em; }
.mini-page--mara strong { position:absolute; z-index:3; top:16%; left:4%; font-size:16cqw; line-height:.7; letter-spacing:-.09em; }
.mini-page--mara > i { position:absolute; z-index:4; right:5%; top:37%; padding:2cqw; color:#15100d; background:#e7ff55; font-size:4cqw; font-style:normal; font-weight:950; line-height:.8; transform:rotate(7deg); }
.mini-page--mara > b { position:absolute; z-index:4; left:5%; bottom:5%; font-size:2cqw; letter-spacing:.12em; }

/* 09 — e-commerce / product continuity. */
.mini-page--no { padding:5cqw; color:#241d18; background:#f1eadf; }
.mini-page--no small { font-size:1.6cqw; letter-spacing:.15em; }
.mini-page--no > strong { position:absolute; left:5%; bottom:10%; font-family:Georgia,serif; font-size:8.8cqw; font-weight:400; line-height:.84; letter-spacing:-.055em; }
.no-objects { position:absolute; top:13%; right:5%; width:49%; height:56%; }
.no-objects i { position:absolute; bottom:0; display:block; background:var(--c); box-shadow:0 10px 24px rgba(43,32,25,.17); }
.no-objects i:nth-child(1){--c:#ba754d;left:0;width:29%;height:76%;border-radius:48% 48% 18% 18%}
.no-objects i:nth-child(2){--c:#26231f;left:35%;width:26%;height:48%;border-radius:50% 50% 12% 12%}
.no-objects i:nth-child(3){--c:#d7bf88;right:0;width:31%;height:91%;clip-path:polygon(25% 0,75% 0,100% 100%,0 100%)}
.mini-page--no > b { position:absolute; right:5%; bottom:6%; font-size:1.6cqw; letter-spacing:.1em; }

/* 10 — architecture / morphing plan. */
.mini-page--oca { padding:5cqw; color:#151515; background:#ededeb; }
.mini-page--oca > small { font-size:1.55cqw; letter-spacing:.14em; }
.mini-page--oca > strong { position:absolute; left:5%; bottom:9%; font-family:Georgia,serif; font-size:8.5cqw; font-weight:400; line-height:.88; letter-spacing:-.05em; }
.mini-page--oca > strong em { color:#d15f37; }
.oca-plan { position:absolute; top:12%; right:5%; width:49%; height:59%; border:1px solid #252525; }
.oca-plan i { position:absolute; display:block; background:#252525; }
.oca-plan i:nth-child(1){top:31%;left:0;width:65%;height:1px}.oca-plan i:nth-child(2){top:0;left:44%;width:1px;height:76%}.oca-plan i:nth-child(3){right:18%;bottom:0;width:1px;height:52%}.oca-plan i:nth-child(4){right:0;bottom:35%;width:42%;height:1px}
.oca-plan b { position:absolute; right:4%; top:4%; color:#d15f37; font-size:4.5cqw; }
.oca-index { position:absolute; right:5%; bottom:6%; font-size:1.5cqw; letter-spacing:.12em; }

/* 11 — education / journey map. */
.mini-page--rumo { padding:5cqw; color:#171713; background:#edff57; }
.mini-page--rumo small { font-size:1.6cqw; letter-spacing:.14em; }
.mini-page--rumo > strong { display:block; margin-top:5cqw; font-size:9cqw; line-height:.8; letter-spacing:-.07em; }
.rumo-path { position:absolute; right:6%; bottom:20%; left:6%; display:grid; grid-template-columns:auto 1fr auto 1fr auto; align-items:center; }
.rumo-path i { display:grid; width:7cqw; aspect-ratio:1; place-items:center; color:#edff57; background:#171713; border-radius:50%; font-size:1.8cqw; font-style:normal; }
.rumo-path b { height:2px; background:#171713; }
.mini-page--rumo > em { position:absolute; right:6%; bottom:6%; font-size:1.7cqw; font-style:normal; font-weight:900; letter-spacing:.1em; }

/* 12 — fintech / data narrative. */
.mini-page--claro { padding:5cqw; color:#dfffee; background:#08231a; }
.mini-page--claro small { color:#73e7aa; font-size:1.6cqw; letter-spacing:.14em; }
.mini-page--claro > strong { display:block; margin-top:4cqw; font-family:Georgia,serif; font-size:8cqw; font-weight:400; line-height:.87; letter-spacing:-.05em; }
.claro-chart { position:absolute; right:5%; bottom:22%; left:5%; display:flex; height:24%; align-items:end; gap:1.5cqw; border-bottom:1px solid rgba(115,231,170,.35); }
.claro-chart i { flex:1; height:var(--h); background:linear-gradient(#b8ff72,#3db87d); clip-path:polygon(45% 0,100% 25%,100% 100%,0 100%,0 45%); }
.claro-chart i:nth-child(1){--h:26%}.claro-chart i:nth-child(2){--h:39%}.claro-chart i:nth-child(3){--h:53%}.claro-chart i:nth-child(4){--h:72%}.claro-chart i:nth-child(5){--h:94%}
.mini-page--claro > b { position:absolute; left:5%; bottom:6%; font-size:1.7cqw; letter-spacing:.08em; }
.mini-page--claro > b em { color:#b8ff72; font-style:normal; }

.capability-composition__note {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1620px;
  margin: clamp(2rem, 4vw, 4rem) auto 0;
  padding-top: 1.2rem;
  color: rgba(33, 25, 21, .62);
  border-top: 1px solid var(--line);
  font-family: Georgia, serif;
  font-size: clamp(.95rem, 1.3vw, 1.25rem);
}
.capability-composition__note span { color: var(--copper); font-family: inherit; }

/* Collection dialog — opens the why behind the visual hypothesis. */
.concept-dialog {
  width: min(1180px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: clamp(1.4rem, 3vw, 3.5rem);
  overflow: auto;
  color: #f7eee3;
  background: #15110f;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: clamp(1.1rem, 2vw, 2rem);
  box-shadow: 0 40px 160px rgba(0, 0, 0, .64);
}
.concept-dialog::backdrop { background: rgba(14, 10, 8, .72); backdrop-filter: blur(13px); }
.concept-dialog[open] { animation: concept-dialog-in .48s var(--ease) both; }
@keyframes concept-dialog-in { from { opacity:0; transform:translateY(24px) scale(.98); } }
.concept-dialog__close { position:absolute; top:1rem; right:1rem; display:grid; width:42px; height:42px; place-items:center; color:#f7eee3; background:transparent; border:1px solid rgba(255,255,255,.22); border-radius:50%; font-size:1.4rem; }
.concept-dialog__head { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(240px,.5fr); align-items:end; gap:2rem; padding-right:3rem; }
.concept-dialog__head > p:first-child { grid-column:1/-1; margin:0 0 -.8rem; color:#c98762; font-size:.6rem; font-weight:850; letter-spacing:.15em; }
.concept-dialog__head h2 { margin:0; font-family:Georgia,serif; font-size:clamp(3.2rem,7vw,7rem); font-weight:400; line-height:.82; letter-spacing:-.06em; }
.concept-dialog__head > p:last-child { margin:0; color:rgba(247,238,227,.62); line-height:1.6; }
.concept-dialog__collection { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin:3rem 0 2rem; }
.collection-frame { position:relative; min-height:260px; padding:1.3rem; overflow:hidden; color:#211915; background:var(--frame-bg,#efe5d7); border-radius:1.2rem; }
.collection-frame::after { position:absolute; right:-20%; bottom:-38%; width:85%; aspect-ratio:1; content:""; background:var(--frame-accent,#c9683f); border-radius:50%; opacity:.16; }
.collection-frame:nth-child(2){--frame-bg:#c9683f;--frame-accent:#fff;color:#fff6ec}.collection-frame:nth-child(3){--frame-bg:#e6cfaa;--frame-accent:#211915}
.collection-frame > span { position:relative; z-index:2; font-size:.55rem; font-weight:900; letter-spacing:.14em; }
.collection-frame h3 { position:relative; z-index:2; margin:5rem 0 1rem; font-family:Georgia,serif; font-size:clamp(2rem,3vw,3.4rem); font-weight:400; line-height:.9; letter-spacing:-.04em; }
.collection-frame p { position:relative; z-index:2; max-width:24ch; margin:0; font-size:.78rem; line-height:1.5; }
.collection-frame b { position:absolute; z-index:2; right:1.2rem; bottom:1.1rem; font-size:.52rem; letter-spacing:.14em; }
.concept-dialog__route { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.16); }
.concept-dialog__route p { margin:0; padding:1.2rem 1rem 0 0; }
.concept-dialog__route span { display:block; margin-bottom:.55rem; color:#c98762; font-size:.5rem; font-weight:900; letter-spacing:.15em; }
.concept-dialog__route strong { display:block; color:rgba(247,238,227,.72); font-family:Georgia,serif; font-size:.82rem; font-weight:400; line-height:1.35; }

@media (max-width: 1180px) {
  .concept-wall { height: 820px; }
  .concept-tile--abertura { left:0; width:32%; }
  .concept-tile--aurea { left:28%; width:36%; }
  .concept-tile--viva { left:70%; width:23%; }
  .concept-tile--fluxo { width:34%; }
  .concept-tile--nexa { left:33%; width:26%; }
  .concept-tile--brasa { left:58%; width:36%; }
  .concept-tile--apex { width:32%; }
  .concept-tile--mara { left:27%; width:24%; }
  .concept-tile--no { left:46%; width:31%; }
  .concept-tile--oca { left:72%; width:27%; }
  .concept-tile--rumo { left:9%; width:34%; }
  .concept-tile--claro { left:48%; width:38%; }
}

@media (max-width: 760px) {
  .capability-composition { padding:5.2rem .65rem 4.5rem; }
  .capability-composition__intro { display:block; padding:0 .45rem; }
  .capability-kicker { margin:0 0 1.5rem; }
  .capability-composition h2 { max-width:11ch; font-size:clamp(3.35rem,13.5vw,5.4rem); }
  .capability-composition__intro > p:last-child { margin-top:1.5rem; font-size:.84rem; }
  .concept-wall { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:.42rem; height:auto; padding-top:2.8rem; perspective:none; }
  .concept-wall__legend { right:.45rem; left:.45rem; font-size:.4rem; }
  .concept-wall__axis { display:none; }
  .concept-tile,
  .capability-composition.is-visible .concept-tile,
  .concept-tile:hover,
  .concept-tile:focus-visible { position:relative; inset:auto; z-index:1; width:auto; opacity:1; filter:none; transform:rotate(var(--mobile-rotate,0deg)); }
  .concept-tile:nth-of-type(3n+1){--mobile-rotate:-1.3deg}.concept-tile:nth-of-type(3n+2){--mobile-rotate:.8deg}.concept-tile:nth-of-type(3n){--mobile-rotate:-.4deg}
  .concept-tile__status { top:.2rem; right:.22rem; padding:.18rem .24rem; font-size:.25rem; }
  .concept-tile__caption { display:none; }
  .mini-browser,
  .concept-tile--viva .mini-browser,
  .concept-tile--mara .mini-browser { aspect-ratio:4 / 5; border-radius:.38rem; box-shadow:0 9px 22px rgba(31,23,18,.2); }
  .mini-browser__bar { height:12px; grid-template-columns:repeat(3,3px) 1fr; gap:2px; padding:0 .25rem; }
  .mini-browser__bar b { width:3px; height:3px; }
  .mini-browser__bar em { font-size:.22rem; }
  .mini-page { inset:12px 0 0; }
  .capability-composition__note { display:block; margin:2rem .45rem 0; font-size:.9rem; line-height:1.5; }
  .capability-composition__note span { display:block; }
  .concept-dialog { width:calc(100vw - 1rem); max-height:calc(100dvh - 1rem); padding:1.2rem; border-radius:1rem; }
  .concept-dialog__head { display:block; padding-right:2.5rem; }
  .concept-dialog__head > p:first-child { margin-bottom:.7rem; }
  .concept-dialog__head h2 { font-size:3.4rem; }
  .concept-dialog__head > p:last-child { margin-top:1rem; font-size:.82rem; }
  .concept-dialog__collection { grid-template-columns:1fr; margin:1.8rem 0; }
  .collection-frame { min-height:190px; }
  .collection-frame h3 { margin-top:2.8rem; }
  .concept-dialog__route { grid-template-columns:1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .concept-tile,
  .concept-dialog[open] { animation:none !important; transition-duration:.01ms !important; }
}