.ea-about {
  --about-dark: #101113;
  --about-soft: #d0d0d4;
  --about-edge: var(--alan-ui-line);
  --about-caption: var(--alan-ui-muted);
  --about-radius: 1rem;
  --about-gap: clamp(1.75rem, 5vw, 5.5rem);
  --about-display: clamp(2.8rem, 7vw, 7rem);
  background: var(--alan-ui-paper);
  color: var(--alan-ui-ink);
  font-family: var(--alan-ui-font-sans);
  overflow-wrap: break-word;
}
.ea-about *, .ea-about *::before, .ea-about *::after { box-sizing: border-box; }
.ea-about :where(h1,h2,h3,p,figure,ul,ol) { margin: 0; }
.ea-about :is(ol,ul) { padding: 0; list-style: none; }
.ea-about :is(a,button,summary,input):focus-visible {
  outline: 2px solid var(--alan-ui-focus);
  outline-offset: 5px;
}
.ea-about :is(.ea-about-dark,.ea-about-atlas) :is(a,button,summary,input):focus-visible {
  outline-color: var(--alan-ui-paper);
}
.ea-about :is(section,header)[id] {
  scroll-margin-top: calc(var(--alan-ui-header-height) + 1rem + var(--wp-admin--admin-bar--height, 0px));
}
.ea-about-wrap {
  width: min(var(--alan-ui-content-max), calc(100% - 2 * var(--alan-ui-gutter)));
  margin-inline: auto;
}
.ea-about-kicker, .ea-about-edition {
  font: 650 .6875rem/1.5 var(--alan-ui-font-sans);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.ea-about :is(h1,h2,h3) {
  font-family: inherit;
  font-weight: var(--alan-ui-heading-weight);
  color: inherit;
  text-wrap: balance;
}
.ea-about h2 {
  font-size: var(--about-display);
  line-height: .95;
  letter-spacing: -.064em;
  word-spacing: .055em;
  max-width: 14ch;
}
.ea-about h3 {
  font-size: clamp(1.6rem, 3vw, 3rem);
  line-height: 1.02;
  letter-spacing: -.05em;
}
.ea-about-lead {
  font-size: clamp(1.16rem, 2vw, 1.65rem);
  letter-spacing: -.025em;
  line-height: 1.42;
  max-width: 33ch;
}
.ea-about-prose { max-width: 56ch; font-size: clamp(1rem, 1.38vw, 1.2rem); line-height: 1.68; }
.ea-about :is(.ea-about-prose,.ea-about-lead) p + p { margin-top: 1em; }
.ea-about-link {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  width: fit-content;
  min-height: 44px;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .3em;
  text-decoration-thickness: 1px;
}
.ea-about-link:hover { text-decoration-thickness: 2px; }
.ea-about-prose + .ea-about-link, .ea-about-prose .ea-about-link { margin-top: 1rem; }
.ea-about-arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--about-edge);
  border-radius: 50%;
  transition: background .22s ease, color .22s ease;
}
.ea-about-link:hover .ea-about-arrow { color: var(--alan-ui-paper); background: var(--alan-ui-ink); }

.ea-about-hero { padding: .65rem 0 clamp(2.5rem, 5.5vw, 5rem); }
.ea-about-hero__layout {
  display: grid;
  grid-template: 'copy photo' auto / minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: var(--about-gap);
  row-gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding-top: clamp(1.35rem, 3vw, 2.7rem);
}
.ea-about-hero__copy { grid-area: copy; }
.ea-about-hero__image { grid-area: photo; width: 100%; }
.ea-about-hero h1 {
  max-width: 8ch;
  margin: .16em 0 .18em;
  font-size: clamp(4.9rem, 10.65vw, 10rem);
  line-height: .86;
  letter-spacing: -.07em;
  word-spacing: .065em;
  text-wrap: wrap;
}
.ea-about-hero__explore { margin-top: 1.1rem; font-size: .875rem; text-decoration: none; }
.ea-about-media { min-width: 0; }
.ea-about-media__frame {
  position: relative;
  display: grid;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 4 / 3;
  background: #e3e3e6;
  border-radius: var(--about-radius);
}
.ea-about-media img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: var(--about-x, 50%) var(--about-y, 50%);
  filter: grayscale(1) contrast(1.07);
}
.ea-about-media figcaption, .ea-about-book figcaption, .ea-about-route__map figcaption, .ea-about-wave figcaption, .ea-about-code figcaption {
  color: var(--about-caption);
  margin-top: .75rem;
  font-size: .78rem;
  line-height: 1.5;
}
.ea-about-media--hero .ea-about-media__frame { aspect-ratio: 4 / 4.78; background: #292a2c; }
.ea-about-media--hero img { filter: grayscale(1) contrast(1.19) brightness(.9); }
.ea-about-media--hero .ea-about-media__frame::after {
  position: absolute;
  inset: 0;
  border: 1px solid #ffffff25;
  border-radius: inherit;
  background: linear-gradient(0deg, #0003, transparent 42%);
  content: '';
  pointer-events: none;
}
.ea-about-media--eualan .ea-about-media__frame { aspect-ratio: 16 / 10; }
.ea-about-media--eualan img { transform: scale(1.12); }
.ea-about-media--continua .ea-about-media__frame { aspect-ratio: 5 / 4; }
.ea-about-media__slate {
  display: grid;
  position: relative;
  place-items: center;
  min-height: 0;
  color: #49494f;
  background: repeating-linear-gradient(135deg, #0000 0 11px, #00000009 11px 12px), #e9e9ec;
}
.ea-about-media__slate span {
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ea-about-media__slate i { position: absolute; width: 14px; height: 14px; border: solid currentColor; }
.ea-about-media__slate i:nth-child(1) { top: 14%; left: 11%; border-width: 1px 0 0 1px; }
.ea-about-media__slate i:nth-child(2) { top: 14%; right: 11%; border-width: 1px 1px 0 0; }
.ea-about-media__slate i:nth-child(3) { bottom: 14%; left: 11%; border-width: 0 0 1px 1px; }
.ea-about-media__slate i:nth-child(4) { bottom: 14%; right: 11%; border-width: 0 1px 1px 0; }

.ea-about-index {
  background: var(--alan-ui-surface);
  border-block: 1px solid var(--about-edge);
}
.ea-about-index__layout {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: .9rem;
  padding-block: .9rem;
}
.ea-about-index ol { display: flex; flex-wrap: wrap; gap: .2rem 1.35rem; }
.ea-about-index a {
  min-height: 44px;
  display: inline-flex;
  gap: .42rem;
  align-items: center;
  color: inherit;
  text-decoration: none;
  font-size: .8rem;
  font-weight: 540;
}
.ea-about-index__toggle { display: none; }
.ea-about-index a:hover, .ea-about-index [aria-current="location"] { text-decoration: underline; text-underline-offset: .3em; }

.ea-about-chapter { padding: clamp(4.75rem, 9vw, 10rem) 0; }
.ea-about-chapter__head { margin-bottom: clamp(1.6rem, 5vw, 4.5rem); }
.ea-about-chapter__head .ea-about-kicker { margin-bottom: clamp(1.25rem, 3vw, 2.4rem); }
.ea-about-chapter__lead { margin-top: calc(-1 * clamp(.4rem, 1.6vw, 1.4rem)); margin-bottom: clamp(2.25rem, 5.6vw, 5rem); }
.ea-about-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--about-gap); align-items: start; }
.ea-about-dark {
  --about-edge: #ffffff31;
  --about-caption: #b8b8bf;
  background: var(--about-dark);
  color: var(--alan-ui-paper);
}
.ea-about-dark .ea-about-prose { color: #e2e2e7; }
.ea-about-route {
  margin-bottom: clamp(2rem, 5vw, 4.4rem);
  background: var(--alan-ui-surface);
  border-radius: var(--about-radius);
  padding: clamp(1rem, 3vw, 2.75rem);
  display: grid;
  align-items: end;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr);
}
.ea-about-route__clock { color: var(--alan-ui-accent); font-size: clamp(2.7rem, 6vw, 6.2rem); line-height: .95; letter-spacing: -.08em; }
.ea-about-route__cities { display: flex; justify-content: space-between; gap: .5rem; font-size: .84rem; font-weight: 600; }
.ea-about-route__map svg { display: block; width: 100%; height: clamp(3.25rem, 8vw, 6.5rem); overflow: visible; }
.ea-about-route__map path { fill: none; stroke: var(--alan-ui-accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ea-about-route__map .ea-about-route__trace { stroke: #c8c9cd; stroke-dasharray: 3 5; }
.ea-about-route__map circle { fill: var(--alan-ui-accent); }
.ea-about-route__story .ea-about-media__frame { aspect-ratio: 16 / 9; }

.ea-about-chapter--intervalo { background: #101113; }
.ea-about-discovery { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.ea-about-discovery__copy { padding-block: clamp(1rem, 7vw, 7rem) clamp(1rem, 7vw, 7rem); }
.ea-about-book__scene {
  aspect-ratio: 5 / 4;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  overflow: hidden;
  perspective: 720px;
  border-radius: var(--about-radius);
  border: 1px solid var(--about-edge);
  background: radial-gradient(ellipse at 46% 78%, #303239, #141517 63%);
}
.ea-about-book__beam {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 52% 43%, #e5e7ec40, transparent 62%);
}
.ea-about-book__volume {
  width: 39%;
  max-width: 15rem;
  aspect-ratio: 3 / 4.45;
  position: relative;
  border-radius: .25rem .65rem .65rem .2rem;
  background: linear-gradient(95deg, #30333b 0 3%, #e8e8ed 4% 6%, #c7c7cc 7%, #ededf1 16%);
  color: #181a20;
  transform: rotateZ(-11deg) rotateY(-11deg);
  box-shadow: .7rem .9rem 0 -.45rem #83858e, 1.15rem 1.65rem 2.8rem #000b;
}
.ea-about-book__cover {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  gap: .2rem;
  padding: 10% 10% 8% 13%;
}
.ea-about-book__cover span:first-child {
  font-size: clamp(.38rem, .65vw, .65rem);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.ea-about-book__cover span:last-child { font-size: clamp(.63rem, 1.5vw, 1.45rem); font-weight: 680; letter-spacing: -.045em; }
.ea-about-book__cover small { display: block; margin-top: .3em; font-size: .56em; font-weight: 450; letter-spacing: 0; }
.ea-about-book__cover svg { display: block; width: 100%; stroke: #272a33; stroke-width: 1; }
.ea-about-book__cover svg circle { fill: #272a33; }
.ea-about-concepts { margin-top: clamp(1.5rem, 4vw, 3.5rem); }
.ea-about-concepts figcaption { color: var(--about-caption); }
.ea-about-concepts ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .85rem; }
.ea-about-concepts li { border-top: 1px solid var(--about-edge); padding: .75rem .45rem .75rem 0; font-size: .9rem; }
.ea-about-concepts li::before { content: '·'; margin-right: .65rem; font-weight: bold; }

.ea-about-chapter--estrutura { background: var(--alan-ui-surface); }
.ea-about-chronology { border-left: 1px solid var(--about-edge); margin-left: .45rem; }
.ea-about-chronology__entry {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--about-gap);
  padding: 1rem 0 clamp(2.7rem, 6vw, 6rem) clamp(1.25rem, 4vw, 4.25rem);
  align-items: start;
}
.ea-about-chronology__entry:last-child { padding-bottom: 0; }
.ea-about-chronology__entry::before {
  position: absolute;
  top: 1.2rem;
  left: -.34rem;
  width: .63rem;
  height: .63rem;
  border-radius: 50%;
  background: var(--alan-ui-accent);
  content: '';
}
.ea-about-chronology__entry:nth-child(2) .ea-about-media__frame { aspect-ratio: 16 / 10; }
.ea-about-chronology h3, .ea-about-career h3 { margin: .65rem 0 1rem; }

.ea-about-architecture, .ea-about-formation {
  margin-bottom: clamp(2.5rem, 6vw, 5.5rem);
}
.ea-about-architecture figcaption, .ea-about-formation figcaption { margin-bottom: .85rem; color: var(--about-caption); }
.ea-about-architecture ol, .ea-about-formation__pieces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ea-about-architecture li, .ea-about-formation__pieces li {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(5rem, 11vw, 9rem);
  padding: clamp(.65rem, 2.2vw, 1.8rem);
  border: 1px solid var(--about-edge);
  border-right: 0;
  font-size: clamp(.82rem, 2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -.04em;
}
.ea-about-architecture li:last-child, .ea-about-formation__pieces li:last-child { border-right: 1px solid var(--about-edge); }
.ea-about-architecture li:nth-child(odd) { background: var(--alan-ui-surface); }
.ea-about-career {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: start;
  gap: var(--about-gap);
}
.ea-about-career__entry:last-child { padding-top: clamp(0rem, 5vw, 5rem); }
.ea-about-career__entry .ea-about-prose { margin-top: 1.15rem; }
.ea-about-career__entry:first-child .ea-about-media__frame { aspect-ratio: 16 / 10; }
.ea-about-career__entry:last-child .ea-about-media__frame { aspect-ratio: 4 / 3; }

.ea-about-chapter--eualan { background: #141619; }
.ea-about-formation__stage {
  position: relative;
  min-height: clamp(15rem, 35vw, 30rem);
  display: grid;
  align-content: space-between;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--about-radius);
  border: 1px solid var(--about-edge);
  padding: clamp(.8rem, 2.7vw, 2.5rem);
  background: repeating-linear-gradient(90deg, #ffffff08 0 1px, transparent 1px 25%), #0c0d10;
}
.ea-about-formation__pieces { position: relative; z-index: 1; }
.ea-about-formation__pieces li {
  min-height: clamp(3.1rem, 6vw, 5.6rem);
  padding: clamp(.65rem, 1.5vw, 1.3rem);
  font-size: clamp(.84rem, 1.6vw, 1.35rem);
  background: #191b20;
}
.ea-about-formation__stage[data-assembled] .ea-about-formation__pieces {
  width: min(100%, 46rem);
  margin-inline: auto;
}
.ea-about-formation__name {
  display: block;
  justify-self: center;
  color: #ececf0;
  font-size: clamp(5.25rem, 18vw, 17rem);
  line-height: .8;
  font-weight: 550;
  letter-spacing: -.105em;
  padding-inline-end: .09em;
}

.ea-about-chapter--repertorio { background: var(--alan-ui-surface); }
.ea-about-interest { border-top: 1px solid var(--about-edge); }
.ea-about-interest:last-child { border-bottom: 1px solid var(--about-edge); }
.ea-about-interest h3 { padding: 1.4rem .2rem 1rem; }
.ea-about-interest__inner {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: var(--about-gap);
  padding: 1.2rem 0 clamp(1.6rem, 4vw, 3rem) clamp(.2rem, 4vw, 3.8rem);
}
.ea-about-interest__scene .ea-about-media__frame { aspect-ratio: 16 / 8; }
.ea-about-interest__scene[data-about-interest-scene="foto"] img {
  filter: grayscale(1) brightness(var(--about-exposure, 1)) contrast(1.08) blur(var(--about-blur, 0px));
  transform: scale(1.04);
}
.ea-about-interest__scene .ea-about-wave + .ea-about-media { margin-top: 1rem; }
.ea-about-interest__scene .ea-about-wave + .ea-about-media .ea-about-media__frame { aspect-ratio: 5 / 1; }
.ea-about-wave svg {
  display: block;
  width: 100%;
  max-height: 8rem;
  background: repeating-linear-gradient(90deg, transparent 0 19px, #1d1d1f10 19px 20px);
  border-block: 1px solid var(--about-edge);
}
.ea-about-wave path { fill: none; stroke: var(--alan-ui-accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ea-about-pause {
  position: relative;
  min-height: clamp(9rem, 20vw, 15rem);
  display: grid;
  place-items: center;
  border-radius: var(--about-radius);
  background: #e8e8ed;
}
.ea-about-pause i { position: absolute; width: 22%; aspect-ratio: 1; border: 1px solid #6e6e7373; border-radius: 50%; }
.ea-about-pause[data-breathing] i { animation: ea-about-breath 10s ease-in-out infinite; }
.ea-about-pause[data-breathing] i:nth-child(2) { animation-delay: .25s; }
.ea-about-pause[data-breathing] i:nth-child(3) { animation-delay: .5s; }
@keyframes ea-about-breath { 0%, 100% { transform: scale(.82); } 40% { transform: scale(1.22); } }
.ea-about-pause i:nth-child(2) { width: 31%; opacity: .7; }
.ea-about-pause i:nth-child(3) { width: 40%; opacity: .4; }
.ea-about-code pre {
  margin: 0;
  border-radius: var(--about-radius);
  background: #101113;
  color: #f5f5f7;
  padding: clamp(1rem, 2.4vw, 1.75rem);
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
  font: 500 clamp(.78rem, 1.05vw, .92rem)/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-variant-ligatures: none;
  -webkit-overflow-scrolling: touch;
}
.ea-about-code pre:focus-visible { outline: 2px solid var(--alan-ui-focus); outline-offset: 3px; }
.ea-about-code code { font: inherit; background: none; padding: 0; color: inherit; }

.ea-about-chapter--presente { background: var(--alan-ui-accent); }
.ea-about-verik { border: 1px solid var(--about-edge); border-radius: var(--about-radius); padding: 1.25rem; }
.ea-about-verik svg { display: block; width: 100%; height: auto; }
.ea-about-verik path, .ea-about-verik circle { stroke: #ffffff82; }
.ea-about-verik circle { fill: #ffffff; }
.ea-about-verik circle:first-of-type { fill: #14263d; }
.ea-about-verik text { fill: white; font-size: 15px; }
.ea-about-verik .ea-about-verik__word { font-size: 23px; letter-spacing: -.06em; }
.ea-about-chapter--continua { background: var(--alan-ui-surface); }
.ea-about-close { align-items: start; }
.ea-about-exits { margin-top: 1.7rem; }
.ea-about-exits a {
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 3.35rem;
  border-top: 1px solid var(--about-edge);
  text-decoration: none;
}
.ea-about-exits a:last-child { border-bottom: 1px solid var(--about-edge); }
.ea-about-exits a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .ea-about { --about-gap: clamp(1.5rem, 4vw, 3rem); }
  .ea-about-hero h1 { font-size: clamp(4.3rem, 12.2vw, 7.4rem); }
  .ea-about-index__layout { grid-template-columns: 1fr; gap: .1rem; }
  .ea-about-discovery__copy { padding-block: 0; }
}
@media (max-width: 680px) {
  .ea-about { --about-display: clamp(2.65rem, 10.5vw, 4.2rem); --about-radius: .75rem; }
  .ea-about-hero { padding-top: .25rem; }
  .ea-about-hero__layout { grid-template: 'copy' 'photo' / minmax(0, 1fr); row-gap: 1.6rem; }
  .ea-about-hero h1 { font-size: clamp(3.8rem, 16.3vw, 6.2rem); max-width: 10ch; }
  .ea-about-hero__explore { margin-top: .85rem; }
  .ea-about-media--hero .ea-about-media__frame { aspect-ratio: 4 / 3; max-height: 24rem; }
  .ea-about-index ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .75rem; }
  .ea-about-index a { font-size: .76rem; }
  .ea-about-split, .ea-about-route, .ea-about-chronology__entry, .ea-about-career, .ea-about-interest__inner { grid-template-columns: minmax(0, 1fr); }
  .ea-about-route { gap: 1.1rem; }
  .ea-about-route__cities { font-size: .77rem; }
  .ea-about-book__scene { aspect-ratio: 5 / 4; }
  .ea-about-book__cover span:first-child { font-size: .48rem; }
  .ea-about-book__cover span:last-child { font-size: clamp(.66rem, 3.45vw, 1.15rem); }
  .ea-about-architecture ol, .ea-about-formation__pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ea-about-architecture li, .ea-about-formation__pieces li { border-right: 1px solid var(--about-edge); }
  .ea-about-architecture li:nth-child(even), .ea-about-formation__pieces li:nth-child(even) { border-left: 0; }
  .ea-about-architecture li:nth-child(n+3), .ea-about-formation__pieces li:nth-child(n+3) { border-top: 0; }
  .ea-about-career__entry:last-child { padding-top: 1.4rem; }
  .ea-about-formation__stage { min-height: 14rem; }
  .ea-about-interest__inner { gap: 1.25rem; }
}
/* ---------- Controles de estudo (ilhas React) ---------- */
.ea-about-study { display: grid; gap: .7rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--about-edge); }
.ea-about-study:empty, .ea-about-study[data-about-needs-stage] { display: none; }
.ea-about-study__title { color: var(--about-caption); }
.ea-about-study__row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: .25rem .9rem; font-size: .84rem; font-weight: 550; }
.ea-about-study input[type="range"] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--alan-ui-accent); touch-action: pan-y; }
.ea-about-study__buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.ea-about-study button {
  min-height: 44px;
  padding: 0 1.05rem;
  border: 1px solid var(--about-edge);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 550 .82rem/1 var(--alan-ui-font-sans);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ea-about-study button:hover { border-color: currentColor; }
.ea-about-study button[aria-pressed="true"] { background: var(--alan-ui-ink); border-color: var(--alan-ui-ink); color: var(--alan-ui-paper); }
.ea-about-study__readout { min-height: 1.5em; color: var(--about-caption); font-size: .82rem; line-height: 1.5; }
.ea-about-study__output { display: grid; gap: .1rem; counter-reset: about-out; font-size: .84rem; }
.ea-about-study__output li { display: flex; gap: .7rem; padding: .32rem 0; border-top: 1px solid var(--about-edge); counter-increment: about-out; }
.ea-about-study__output li::before { content: counter(about-out, decimal-leading-zero); color: var(--about-caption); font-variant-numeric: tabular-nums; }
.ea-about-interest__scene > * + .ea-about-study { margin-top: 1rem; }

/* ---------- Por Dentro: palco tridimensional ----------
 * Ativo quando <html data-about-stage> existe (definido antes da primeira pintura).
 * "pending": cenas sendo montadas atrás do preloader. "on": cena pronta.
 * "off": sem WebGL 2, a mesma página imersiva, estática (fim deste arquivo).
 * Sem o atributo (navegador sem JavaScript), vale o documento acima.
 * A cena ocupa a tela inteira em qualquer largura; a leitura passa sobre ela.
 */
.ea-about-stage, .ea-about-veil { display: none; }
html[data-about-stage] .ea-about {
  --about-col: min(31rem, 37vw);
  --about-step: 13vh;
  --about-glass: rgba(255,255,255,.74);
  --about-halo: rgba(245,245,247,.92);
  position: relative;
  margin-top: calc(-1 * var(--alan-ui-header-height));
  background: transparent;
  transition: color .6s ease;
}
html[data-about-stage] .ea-about[data-tone="dark"] {
  --alan-ui-paper: #11151c;
  --alan-ui-surface: #202630;
  --alan-ui-ink: #f5f5f7;
  --alan-ui-muted: #b6bcc6;
  --alan-ui-line: rgba(245,245,247,.2);
  --alan-ui-accent: #abc2dc;
  --alan-ui-focus: #b7d1ed;
  --about-edge: var(--alan-ui-line);
  --about-caption: var(--alan-ui-muted);
  --about-glass: rgba(9,12,18,.6);
  --about-halo: rgba(7,10,16,.88);
}
html[data-about-stage] .ea-about-stage {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--about-backdrop, #05070c);
  pointer-events: none;
}
/* Fundo da página sob o palco. O palco é fixo e a página atrás dele era branca:
 * quando a barra do navegador recolhe ou o gesto estica a página, esse branco
 * aparecia na borda inferior, e o quase-preto do palco, na superior. O fundo
 * agora tem a cor da cena (clara ou escura, e a do céu durante a abertura). */
html[data-about-stage] body { --about-backdrop: #f5f5f7; }
html[data-about-stage] body[data-about-tone="dark"] { --about-backdrop: #0a0d14; }
html[data-about-stage] body[data-about-tone="dark"][data-about-opening] { --about-backdrop: #19202c; }
html[data-about-stage] body,
html[data-about-stage] body > .alan-main-surface { background-color: var(--about-backdrop); }
/* Palco e véu têm a altura da viewport grande: continuam cobrindo a tela
 * enquanto a barra do navegador recolhe, sem esperar o redimensionamento. */
@supports (height: 100lvh) {
  html[data-about-stage] :is(.ea-about-stage, .ea-about-veil) { bottom: auto; height: 100lvh; }
}
.ea-about-stage canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.1s ease; }
html[data-about-stage="on"] .ea-about-stage canvas { opacity: 1; }
/* Véu de leitura: no desktop cobre a coluna de texto; no celular baixa a cena enquanto há texto na tela. */
html[data-about-stage] .ea-about-veil {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: var(--about-read, 0);
  pointer-events: none;
}
html[data-about-stage] .ea-about-veil::before,
html[data-about-stage] .ea-about-veil::after { position: absolute; inset: 0; content: ''; transition: opacity .6s ease; }
html[data-about-stage] .ea-about-veil::before { background: linear-gradient(90deg, #f5f5f7 0, rgba(245,245,247,.9) 24%, rgba(245,245,247,0) 58%); }
html[data-about-stage] .ea-about-veil::after { background: linear-gradient(90deg, #070a10 0, rgba(7,10,16,.88) 24%, rgba(7,10,16,0) 58%); opacity: 0; }
html[data-about-stage] .ea-about[data-tone="dark"] .ea-about-veil::before { opacity: 0; }
html[data-about-stage] .ea-about[data-tone="dark"] .ea-about-veil::after { opacity: 1; }
html[data-about-stage] .ea-about > article { position: relative; z-index: 1; }
body[data-about-tone="dark"]:not([data-menu-status="open"]) .underlay-nav__header { color: #f5f5f7; }
.underlay-nav__header { transition: color .6s ease; }

/* Rótulos em HTML presos a pontos da cena. */
.ea-about-labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ea-about-label {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  color: var(--alan-ui-ink);
  font: 550 clamp(.72rem, .9vw, .86rem)/1.2 var(--alan-ui-font-sans);
  letter-spacing: -.01em;
  white-space: nowrap;
  will-change: transform, opacity;
  transition: visibility 0s linear 0s, filter .22s ease;
}
.ea-about-label[data-covered] { filter: opacity(0); visibility: hidden; transition: visibility 0s linear .22s, filter .22s ease; }
.ea-about-label--paper { color: #14263d; }
.ea-about-label--caps { font-size: .64rem; font-weight: 650; letter-spacing: .15em; text-transform: uppercase; color: var(--alan-ui-muted); }
.ea-about-label--quote { max-width: min(22rem, 70vw); font-size: clamp(1.15rem, 2.2vw, 2rem); font-weight: 500; line-height: 1.12; letter-spacing: -.04em; text-align: center; white-space: normal; text-wrap: balance; }

html[data-about-stage] .ea-about :is(.ea-about-hero, .ea-about-chapter, .ea-about-dark) {
  --about-edge: var(--alan-ui-line);
  --about-caption: var(--alan-ui-muted);
  background: transparent;
  color: inherit;
}
html[data-about-stage] .ea-about-dark .ea-about-prose { color: inherit; }
html[data-about-stage] .ea-about :is(a, button, summary, input):focus-visible { outline-color: var(--alan-ui-focus); }
/* As figuras 2D abaixo são representadas pela cena; continuam no documento para leitura sem WebGL. */
html[data-about-stage] :is(.ea-about-hero__image, .ea-about-route, .ea-about-book, .ea-about-architecture, .ea-about-formation, .ea-about-verik, .ea-about-wave, .ea-about-pause, .ea-about-interest__scene .ea-about-media, .ea-about-media--continua) { display: none; }
html[data-about-stage] .ea-about-study[data-about-needs-stage]:not(:empty) { display: grid; }
html[data-about-stage] .ea-about :is(.ea-about-split, .ea-about-chronology, .ea-about-chronology__entry, .ea-about-career, .ea-about-career__entry, .ea-about-interests, .ea-about-interest, .ea-about-interest__inner, .ea-about-discovery__copy, .ea-about-chapter__head, .ea-about-chapter__lead, .ea-about-concepts, .ea-about-study, .ea-about-exits) { display: block; margin: 0; padding: 0; border: 0; }
html[data-about-stage] .ea-about-chronology__entry::before { display: none; }
html[data-about-stage] .ea-about-interest h3 { padding: 0; }
html[data-about-stage] .ea-about .ea-about-chapter .ea-about-media__frame { aspect-ratio: 4 / 3; }
html[data-about-stage] .ea-about h2 { font-size: clamp(2.5rem, 4.7vw, 4.6rem); max-width: 11ch; }
html[data-about-stage] .ea-about h3 { font-size: clamp(1.5rem, 2.3vw, 2.2rem); }
html[data-about-stage] .ea-about :is(section, header)[id] { scroll-margin-top: 0; }
html[data-about-stage] .ea-about-chapter__head .ea-about-kicker { margin-bottom: 1.1rem; color: var(--about-caption); }
/* Títulos ficam sobre a cena aberta: um halo na cor do fundo garante o contraste. */
html[data-about-stage] .ea-about-chapter__head { text-shadow: 0 0 .5rem var(--about-halo), 0 0 1.4rem var(--about-halo), 0 0 2.6rem var(--about-halo); }
html[data-about-stage] .ea-about-study { padding-top: 1rem; border-top: 1px solid var(--about-edge); }
html[data-about-stage] .ea-about-study:not(:empty) { display: grid; }
html[data-about-stage] .ea-about-exits a { border-color: var(--about-edge); }

/* Blocos de leitura: cada um é um passo; entre eles a cena aparece inteira. */
html[data-about-stage] .ea-about :is(p, h3, figure, div, nav, header).ea-about-step { margin-top: var(--about-step); }
html[data-about-stage] .ea-about :is(p, h3, figure, div, nav, header).ea-about-step--tight { margin-top: 1.1rem; }
html[data-about-stage] .ea-about .ea-about-chapter__head.ea-about-step { margin-top: 0; }
html[data-about-stage] .ea-about--reveal .ea-about-step { opacity: 0; transform: translate3d(0, 1.25rem, 0); transition: opacity .8s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }
html[data-about-stage] .ea-about--reveal .ea-about-step.is-in { opacity: 1; transform: none; }

/* Abertura: o nome e a frase compõem o quadro com a janela do ônibus. */
html[data-about-stage] .ea-about-hero { position: relative; min-height: 138vh; min-height: 138svh; padding: 0; }
html[data-about-stage] .ea-about-hero::before {
  position: absolute;
  inset: 0;
  /* Mesma sombra do primeiro quadro (0 a 100svh de 138svh), agora dissolvida
     até o fim da abertura: a borda inferior reta subia com a rolagem. */
  background: linear-gradient(180deg, rgba(3,5,9,0) 27.5%, rgba(3,5,9,.42) 50.7%, rgba(3,5,9,.78) 72.5%, rgba(3,5,9,0) 100%);
  content: '';
  pointer-events: none;
}
html[data-about-stage] .ea-about-hero .ea-about-wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-bottom: max(clamp(2.2rem, 8vh, 5.5rem), env(safe-area-inset-bottom));
}
html[data-about-stage] .ea-about-hero__layout { display: block; width: 100%; padding: 0; }
html[data-about-stage] .ea-about-hero h1 { max-width: none; margin: 0 0 .2em; font-size: clamp(4.4rem, 9.4vw, 9.8rem); white-space: nowrap; }
html[data-about-stage] .ea-about-hero .ea-about-lead { max-width: 31ch; }
html[data-about-stage] .ea-about-hero__explore { margin-top: 1.4rem; }
html[data-about-stage] .ea-about-hero__copy { will-change: transform, opacity; }
html[data-about-stage] .ea-about-hero__copy > * { animation: ea-about-rise 1.5s cubic-bezier(.2, .7, .2, 1) both; }
html[data-about-stage] .ea-about-hero__copy > :nth-child(1) { animation-delay: .25s; }
html[data-about-stage] .ea-about-hero__copy > :nth-child(2) { animation-delay: .5s; }
html[data-about-stage] .ea-about-hero__copy > :nth-child(3) { animation-delay: .75s; }
@keyframes ea-about-rise { from { opacity: 0; transform: translate3d(0, 1.6rem, 0); } to { opacity: 1; transform: none; } }

/* Controle de capítulos: mínimo, aparece quando a leitura pausa ou volta. */
html[data-about-stage] .ea-about-index {
  position: fixed;
  right: max(1.1rem, env(safe-area-inset-right));
  bottom: max(1.1rem, env(safe-area-inset-bottom));
  z-index: 40;
  border: 0;
  background: none;
  transition: opacity .4s ease, transform .4s ease, visibility .4s;
}
html[data-about-stage] .ea-about-index[data-away] { opacity: 0; visibility: hidden; transform: translateY(.75rem); }
html[data-about-stage] .ea-about-index__toggle {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: .7rem;
  min-height: 44px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: 600 .78rem/1 var(--alan-ui-font-sans);
  cursor: pointer;
}
html[data-about-stage] .ea-about-index__toggle[hidden] { display: flex; }
html[data-about-stage] .ea-about-index__toggle svg { width: 44px; height: 44px; border-radius: 50%; background: var(--about-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; transition: background-color .6s ease; }
html[data-about-stage] .ea-about-index__toggle circle:first-child { stroke-opacity: .22; }
html[data-about-stage] .ea-about-index__toggle circle[data-about-progress] { stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 50% 50%; }
html[data-about-stage] .ea-about-index__now { opacity: 0; transform: translateX(.4rem); transition: opacity .35s ease, transform .35s ease; white-space: nowrap; pointer-events: none; }
html[data-about-stage] .ea-about-index:is([data-say], [data-open]) .ea-about-index__now,
html[data-about-stage] .ea-about-index__toggle:is(:hover, :focus-visible) .ea-about-index__now { opacity: 1; transform: none; }
html[data-about-stage] .ea-about-index__layout {
  position: absolute;
  right: 0;
  bottom: calc(100% + .7rem);
  display: block;
  width: min(17.5rem, calc(100vw - 2.2rem));
  padding: .9rem 0 .5rem;
  border-radius: 1.1rem;
  background: var(--about-glass);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 0 0 1px var(--about-edge);
  opacity: 0;
  visibility: hidden;
  transform: translateY(.5rem);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, background-color .6s ease;
}
html[data-about-stage] .ea-about-index[data-open] .ea-about-index__layout { opacity: 1; visibility: visible; transform: none; }
html[data-about-stage] .ea-about-index__layout > .ea-about-kicker { display: block; padding: 0 1.2rem .5rem; color: var(--about-caption); }
html[data-about-stage] .ea-about-index ol { display: block; max-height: min(60vh, 26rem); overflow-y: auto; }
html[data-about-stage] .ea-about-index a { display: flex; width: 100%; min-height: 44px; padding: 0 1.2rem; font-size: .92rem; font-weight: 500; }
html[data-about-stage] .ea-about-index a:hover { text-decoration: none; background: var(--about-edge); }
html[data-about-stage] .ea-about-index [aria-current="location"] { font-weight: 650; text-decoration: none; }
html[data-about-stage] .ea-about-index [aria-current="location"]::after { margin-left: auto; align-self: center; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; content: ''; }

@media (min-width: 900px) {
  html[data-about-stage] .ea-about-chapter { padding: 52vh 0 58vh; }
  html[data-about-stage] .ea-about-chapter .ea-about-wrap > * { width: var(--about-col); max-width: 100%; }
}

@media (max-width: 899.98px) {
  html[data-about-stage] .ea-about { --about-col: 100%; --about-step: 62vh; }
  html[data-about-stage] .ea-about-veil::before { background: #f5f5f7; }
  html[data-about-stage] .ea-about-veil::after { background: #070a10; }
  html[data-about-stage] .ea-about-chapter { padding: 60vh 0 70vh; padding: 60svh 0 70svh; }
  html[data-about-stage] .ea-about h2 { font-size: clamp(2.4rem, 10.5vw, 3.7rem); }
  html[data-about-stage] .ea-about-hero h1 { max-width: 7ch; font-size: clamp(3.5rem, 17vw, 6.2rem); white-space: normal; }
  html[data-about-stage] .ea-about-hero .ea-about-lead { max-width: 26ch; }
  html[data-about-stage] .ea-about-prose { font-size: 1.04rem; }
  @supports (height: 1svh) { html[data-about-stage] .ea-about { --about-step: 62svh; } }
  /* Experiências interativas: a cena fica nítida (véu mínimo, about.js) e o
     texto recebe o halo já usado nos títulos de capítulo. */
  html[data-about-stage] .ea-about-interest { text-shadow: 0 0 .4rem var(--about-halo), 0 0 1rem var(--about-halo), 0 0 1.8rem var(--about-halo); }
  html[data-about-stage] .ea-about-interest :is(pre, code, button, input, output) { text-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ea-about *, .ea-about *::before, .ea-about *::after { transition: none !important; }
  .ea-about-pause[data-breathing] i { animation: none; }
  .ea-about-study[data-about-study="pause"] { display: none; }
}

/* Som · Play/Pause, teclado musical e retorno visual (Web Audio) */
.ea-about-sound { align-items: center; }
.ea-about-study button.ea-about-sound__play { min-width: 7.2rem; min-height: 44px; font-weight: 650; touch-action: manipulation; }
.ea-about-keys { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .3rem; }
.ea-about-study button.ea-about-keys__key {
  display: grid; justify-items: center; align-content: end; gap: .15rem; min-width: 0; min-height: 64px; padding: .4rem .1rem;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .12s ease, color .12s ease, transform .12s ease;
}
.ea-about-keys__key span { font-size: .78rem; font-weight: 650; }
.ea-about-keys__key kbd { font: inherit; font-size: .62rem; opacity: .55; }
.ea-about-study button.ea-about-keys__key:disabled { opacity: .45; cursor: not-allowed; }
.ea-about-study button.ea-about-keys__key[data-lit] { background: var(--alan-ui-accent); border-color: var(--alan-ui-accent); color: var(--alan-ui-paper); transform: translateY(2px); }
@media (hover: none) { .ea-about-keys__key kbd { display: none; } }
@media (max-width: 420px) { .ea-about-keys { gap: .2rem; } .ea-about-keys__key span { font-size: .7rem; } }
@media (prefers-reduced-motion: no-preference) {
  .ea-about-wave svg { transform: scaleY(calc(1 + var(--about-level, 0) * .5)); transform-origin: 50% 50%; transition: transform .08s linear; }
}
/* No celular o volume é o do aparelho: o painel fica mais curto e a cena aparece mais. */
@media (hover: none) and (max-width: 899px) { .ea-about-study__row[data-about-row="volume"] { display: none; } }

/* Celular: a cena mantém as cores. A leitura fica por conta de uma névoa que acompanha
   só as letras (sem caixa nem borda atrás do parágrafo). */
@media (max-width: 899px) {
  html[data-about-stage] .ea-about { --about-mist: rgba(245,245,247,.96); }
  html[data-about-stage] .ea-about[data-tone="dark"] { --about-mist: rgba(7,10,16,.94); }
  html[data-about-stage] .ea-about-chapter :is(.ea-about-prose > p, .ea-about-lead > p) {
    /* Três camadas curtas: a névoa de cinco camadas (até 2.2rem) era redesenhada em todos os
       parágrafos a cada troca de tom e pesava na rolagem do celular. */
    text-shadow: 0 0 .2rem var(--about-mist), 0 0 .5rem var(--about-mist), 0 0 1rem var(--about-mist);
  }
  html[data-about-stage] .ea-about-chapter :is(h3, .ea-about-kicker, figcaption) { text-shadow: 0 0 .35rem var(--about-halo), 0 0 1rem var(--about-halo); }
  /* A cor do texto troca de uma vez com o tom da cena: a transição de .6s repintava toda a leitura. */
  html[data-about-stage] .ea-about { transition: none; }
}

/* A abertura só entra quando a página é revelada (as cenas são montadas atrás do preloader). */
html[data-about-stage="pending"] .ea-about-hero__copy > * { animation-play-state: paused; }

/* Sem cena (WebGL 2 indisponível ou contexto gráfico recusado): a mesma página imersiva,
   estática. O layout editorial antigo não é mais exibido a visitantes. */
html[data-about-stage="off"] .ea-about-stage { background: radial-gradient(120% 70% at 72% 0%, #1b2432 0%, #0a0d14 58%, #05070c 100%); }
html[data-about-stage="off"] .ea-about-veil { display: none; }
html[data-about-stage="off"] .ea-about { --about-step: 2.2rem; }
html[data-about-stage="off"] .ea-about-hero { min-height: 100vh; min-height: 100svh; }
html[data-about-stage="off"] .ea-about-chapter { padding: 16vh 0; }
html[data-about-stage="off"] .ea-about .ea-about-study:not([data-about-study="sound"]):not(:empty) { display: none; }
html[data-about-stage="off"] body { --about-backdrop: #0a0d14; }