/* Páginas: Início, Trilha, Sobre */
.page{padding:clamp(36px,5vw,60px) clamp(24px,5vw,60px) 64px}
.page__title{margin:0;font-family:var(--font-display);font-weight:700;font-size:34px;letter-spacing:-.01em}
.page__title span,.hero-title span{color:var(--accent)}

/* Início */
.page--home{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px 32px}
.eyebrow{margin:0 0 22px;font-family:var(--font-display);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.hero-title{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(56px,8vw,104px);line-height:1;letter-spacing:-.03em;color:var(--text-strong)}
.hero-sub{margin:24px 0 0;max-width:520px;font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:var(--text-muted);text-wrap:pretty}

/* Trilha */
.steps{margin:44px 0 0;padding:0;list-style:none;display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:56px 28px minmax(0,1fr);column-gap:18px}
.step__num{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--accent);line-height:1;text-align:right;padding-top:2px}
.step__rail{display:flex;flex-direction:column;align-items:center}
.step__dot{display:block;width:16px;height:16px;margin-top:6px;border-radius:50%;border:2px solid var(--accent);background:var(--surface-2);box-shadow:0 0 0 4px rgba(0,212,196,.12);flex:none}
.step__line{display:block;flex:1;width:1px;background:var(--line);margin-top:6px}
.step:last-child .step__line{opacity:0}
.step__body{padding-bottom:40px;max-width:640px}
.step__body h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-strong)}
.step__body p{margin:12px 0 0;font-size:16px;line-height:1.65;color:var(--text-muted);text-wrap:pretty}
.step__body ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.step__body li{display:flex;gap:12px;font-size:16px;line-height:1.6;color:var(--text-soft);text-wrap:pretty}
.step__body li::before{content:"";flex:none;width:6px;height:6px;margin-top:10px;border-radius:50%;background:var(--accent)}

/* Sobre */
.about{margin-top:36px;display:flex;flex-wrap:wrap;gap:40px 48px;align-items:flex-start}
.about__text{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:18px;font-size:16px;line-height:1.7;color:var(--text-muted);text-wrap:pretty}
.about__text p{margin:0}
.about__text strong{color:var(--text);font-weight:700}
.about__text strong.accent{color:var(--accent)}
.person{flex:0 0 240px;display:flex;flex-direction:column;align-items:center;gap:18px;margin:0 auto}
.person__photo{position:relative;isolation:isolate;width:220px;height:220px;flex:none;border-radius:50%;border:3px solid var(--accent);padding:4px;background:var(--surface-2)}
.person__photo::before{content:"";position:absolute;inset:-14px -18px -14px 14px;z-index:-1;border-radius:50%;background-image:radial-gradient(#4a4a4a 1px,transparent 1.5px);background-size:7px 7px}
.person__photo picture,.person__photo img{width:100%;height:100%}
.person__photo img{border-radius:50%;object-fit:cover;object-position:50% 18%;background:var(--surface)}
.person figcaption{text-align:center}
.person figcaption strong{display:block;font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--text-strong)}
.person figcaption span{display:block;margin-top:4px;font-size:14px;color:var(--accent)}

.closing{margin-top:48px;padding-top:40px;border-top:1px solid #333;display:flex;flex-direction:column;gap:14px}
.closing__title{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3vw,36px);line-height:1.15;letter-spacing:-.01em;color:var(--text-strong)}
.closing__title span{color:var(--accent)}
.closing__text{margin:0;max-width:620px;font-size:16px;line-height:1.7;color:var(--text-muted);text-wrap:pretty}
.closing__sign{margin-top:14px}
.closing__sign strong{display:block;font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--text-strong)}
.closing__sign em{display:block;margin-top:2px;font-size:15px;color:var(--text-muted)}

@media (max-width:520px){
  .step{grid-template-columns:36px 20px minmax(0,1fr);column-gap:12px}
  .step__num{font-size:20px}
}

.page--404{min-height:100vh}