/* Sobre: mesmo fundo da hero (hero.css + hero-shader.js via .cert-page), conteúdo em coluna de leitura. */
.about-page { background: #05030d; }
.about-page > .uh-bg, .about-page > .uh-shader { bottom: auto; height: clamp(480px, 72svh, 680px); }
.about-page::after { inset: 0 0 auto; height: clamp(480px, 72svh, 680px); background: linear-gradient(to bottom, transparent 42%, rgba(5,3,13,.55) 74%, #05030d); }

.about-main { position: relative; z-index: 1; flex: 1; width: min(100% - 72px, 1180px); margin-inline: auto; }
.about-hero { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; min-height: clamp(150px, 20svh, 220px); padding-bottom: clamp(40px, 5svh, 56px); }
.about-kicker { margin: 0 0 22px; color: #fff; font: 700 11px/1.4 "Inter", sans-serif; letter-spacing: .24em; text-transform: uppercase; }
.about-hero h1 { margin: 0; color: #fff; text-shadow: 0 4px 30px rgba(18,8,75,.22); font-size: clamp(60px, 7.4vw, 118px); font-weight: 400; line-height: .95; letter-spacing: -.075em; }
.about-hero h1 em { font-style: normal; color: #d8d2ff; }

.about-article { padding: 0 0 clamp(90px, 12vw, 150px); }
.about-text { max-width: 780px; margin-inline: auto; }
.about-text p { margin: 0 0 1.4em; color: rgba(255,255,255,.82); font: 400 clamp(17px, 1.3vw, 19px)/1.8 "Inter", sans-serif; text-wrap: pretty; }
.about-text p:last-child { margin-bottom: 0; }

.about-figure { position: relative; margin: clamp(56px, 7vw, 96px) 0; border-radius: 26px; }
.about-figure picture, .about-figure img { display: block; width: 100%; height: auto; border-radius: inherit; }
.about-figure picture { position: relative; overflow: hidden; border: 1px solid rgba(216,210,255,.24); box-shadow: 0 40px 100px rgba(2,0,28,.55), 0 0 0 1px rgba(255,255,255,.04) inset; }
.about-figure::before { content: ""; position: absolute; z-index: -1; inset: 8% 6% -6%; border-radius: 40px; background: radial-gradient(closest-side, rgba(126,114,231,.38), transparent); filter: blur(40px); pointer-events: none; }

/* Entradas suaves: o conteúdo só fica oculto quando o JS está ativo. */
.js .about-enter { animation: about-in .9s cubic-bezier(.2,.75,.25,1) var(--delay, 0s) both; }
.js .about-reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.75,.25,1); }
.js .about-reveal.is-in { opacity: 1; transform: none; }
@keyframes about-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

@media (max-width: 1050px) {
  .about-main { width: min(100% - 56px, 1180px); }
}
@media (max-width: 809.98px) {
  .about-page > .uh-bg, .about-page > .uh-shader, .about-page::after { height: 440px; }
  .about-main { width: calc(100% - 40px); }
  .about-hero { min-height: 150px; padding-bottom: 36px; }
  .about-kicker { margin-bottom: 16px; font-size: 10px; letter-spacing: .2em; }
  .about-hero h1 { font-size: clamp(50px, 13vw, 72px); }
  .about-figure { margin: 48px 0; border-radius: 18px; }
  .about-figure::before { filter: blur(28px); }
  .about-text p { font-size: 16px; line-height: 1.75; }
}
@media (max-width: 380px) {
  .about-main { width: calc(100% - 32px); }
  .about-hero h1 { font-size: 46px; }
  .about-kicker { font-size: 9px; }
  .about-text p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .about-enter { animation: none; }
  .js .about-reveal { opacity: 1; transform: none; transition: none; }
}