/* Página /pedro-nascimento/ — estilos exclusivos desta página.
   Usa os tokens do design system (style.css) sem alterá-los. */

/* ── Hero ─────────────────────────────────────────────────────────── */
.perfil-hero {
  position: relative;
  padding: calc(var(--header-space) + clamp(32px, 4vw, 64px)) 0 clamp(56px, 6vw, 104px);
  background:
    radial-gradient(60% 70% at 85% 30%, rgba(33, 199, 255, 0.10), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(3, 105, 161, 0.14), transparent 70%),
    var(--c-ink-950);
  color: var(--c-slate-50);
  overflow: hidden;
}
.perfil-hero .breadcrumb { margin-bottom: clamp(24px, 3vw, 40px); }
.perfil-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.perfil-hero__nome {
  margin: 14px 0 10px;
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: var(--tr-display);
  color: var(--c-white);
  text-wrap: balance;
}
.perfil-hero__conhecido {
  font-family: var(--f-display);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 600;
  color: var(--c-slate-300);
}
.perfil-hero__conhecido span[aria-hidden] { margin: 0 6px; color: var(--c-slate-500); }
.perfil-hero__apelido { color: var(--c-cyan); }
.perfil-hero__lead {
  margin-top: var(--s-5);
  max-width: 58ch;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--c-slate-300);
  text-wrap: pretty;
}
.perfil-hero__nota {
  margin-top: var(--s-4);
  max-width: 58ch;
  padding-left: var(--s-4);
  border-left: 2px solid var(--c-cyan-600);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--c-slate-400);
}
.perfil-hero__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-5);
  margin-top: var(--s-6);
}
.perfil-social { display: flex; gap: var(--s-2); }
.perfil-social__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-slate-50);
  transition: border-color var(--d-1) ease, color var(--d-1) ease;
}
.perfil-social__link:hover { border-color: var(--c-cyan); color: var(--c-cyan); }
.perfil-social__link:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 3px; }

.perfil-hero__foto {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 460px;
  margin: 0;
}
/* Moldura deslocada: dá profundidade sem efeito chamativo. */
.perfil-hero__foto::before {
  content: '';
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid rgba(33, 199, 255, 0.35);
  border-radius: var(--r-lg);
  pointer-events: none;
}
.perfil-hero__foto img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
  background: var(--c-ink-900);
}

/* ── Quem é ───────────────────────────────────────────────────────── */
.perfil-quem {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.perfil-quem__texto h2,
.perfil-empresa h2,
.perfil-filosofia h2 {
  margin: 12px 0 var(--s-5);
  font-family: var(--f-display);
  font-size: var(--t-h2);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: var(--tr-h2);
  color: var(--fg);
  text-wrap: balance;
}
.perfil-quem__texto p,
.perfil-empresa__texto p,
.perfil-filosofia__texto p {
  max-width: var(--measure);
  font-size: var(--t-body);
  line-height: 1.75;
  color: var(--fg-2);
}
.perfil-quem__texto p + p,
.perfil-empresa__texto p + p,
.perfil-filosofia__texto p + p { margin-top: var(--s-4); }

.perfil-fatos { margin: 0; border-top: 1px solid var(--rule-strong, rgba(15, 23, 42, 0.16)); }
.perfil-fatos > div {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--s-4);
  padding: 14px 0;
  border-bottom: 1px solid var(--rule, rgba(15, 23, 42, 0.1));
}
.perfil-fatos dt { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-3); }
.perfil-fatos dd { margin: 0; font-size: var(--t-sm); font-weight: 600; color: var(--fg); }

/* ── Linha do tempo ───────────────────────────────────────────────── */
.perfil-linha {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.perfil-linha::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 200px;
  width: 1px;
  background: linear-gradient(var(--c-cyan-600), rgba(14, 165, 233, 0.15));
}
.perfil-marco {
  position: relative;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  column-gap: clamp(32px, 4vw, 56px);
  padding: 0 0 clamp(28px, 3vw, 40px);
}
.perfil-marco:last-child { padding-bottom: 0; }
.perfil-marco::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 196px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-ink-950);
  border: 2px solid var(--c-cyan);
}
.perfil-marco__quando {
  grid-row: span 2;
  padding-right: var(--s-5);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
  color: var(--accent, var(--c-cyan));
}
.perfil-marco__titulo {
  margin: 0 0 6px;
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: var(--tr-h3);
  color: var(--fg);
}
.perfil-marco p { max-width: 64ch; font-size: var(--t-body); line-height: 1.7; color: var(--fg-2); }

/* ── A empresa ────────────────────────────────────────────────────── */
.perfil-empresa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(24px, 5vw, 96px);
  align-items: start;
}
.perfil-empresa h2 { margin-bottom: 0; }
.perfil-links { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin-top: var(--s-5) !important; }

/* ── Áreas ────────────────────────────────────────────────────────── */
.perfil-areas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.perfil-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-strong, rgba(15, 23, 42, 0.16));
  transition: border-color var(--d-2) ease;
}
.perfil-area:hover { border-top-color: var(--accent); }
.perfil-area h3 {
  font-family: var(--f-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--tr-h3);
  color: var(--fg);
}
.perfil-area p { flex: 1; font-size: var(--t-sm); line-height: 1.6; color: var(--fg-2); }
.perfil-area .link-arrow { align-self: flex-start; margin-top: 4px; }

/* ── Filosofia ────────────────────────────────────────────────────── */
.perfil-filosofia { max-width: 860px; }
.perfil-filosofia h2 { max-width: 20ch; }
.perfil-filosofia__texto p:first-child {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--fg);
}

/* ── Artigos ──────────────────────────────────────────────────────── */
.perfil-artigos__mais { margin-top: clamp(32px, 4vw, 56px); text-align: center; }

/* ── Responsivo ───────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .perfil-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .perfil-hero__grid { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .perfil-hero__foto { order: -1; justify-self: center; max-width: min(78vw, 340px); }
  .perfil-hero__foto::before { inset: 12px -12px -12px 12px; }
  .perfil-hero__lead, .perfil-hero__nota { margin-inline: auto; }
  .perfil-hero__nota { padding-left: 0; padding-top: var(--s-3); border-left: 0; border-top: 2px solid var(--c-cyan-600); max-width: 46ch; }
  .perfil-hero__acoes { justify-content: center; }
  .perfil-hero .eyebrow { justify-content: center; }
  .perfil-quem, .perfil-empresa { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .perfil-linha::before { left: 4px; }
  .perfil-marco { grid-template-columns: minmax(0, 1fr); padding-left: 32px; }
  .perfil-marco::before { left: 0; }
  .perfil-marco__quando { grid-row: auto; padding-right: 0; margin-bottom: 4px; text-align: left; }
  .perfil-areas { grid-template-columns: minmax(0, 1fr); }
  .perfil-hero__acoes .btn { width: 100%; }
  .perfil-social { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .perfil-social__link, .perfil-area { transition: none; }
}

/* ── Celular ──────────────────────────────────────────────────────────
   Até 767 px: índice de seções logo abaixo do hero, toques de 44 px nos
   links das áreas, linha do tempo que se preenche durante a leitura e
   cartões que entram em cascata. Acima disso nada muda. */
.perfil-indice { display: none; }

@media (max-width: 767px) {
  .perfil-indice {
    display: flex;
    gap: 8px;
    margin: var(--s-7) calc(var(--gutter) * -1) 0;
    padding: var(--s-5) var(--gutter) 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 32px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 32px), transparent);
  }
  .perfil-indice::-webkit-scrollbar { display: none; }
  .perfil-indice__titulo {
    flex: none;
    align-self: center;
    padding-right: 4px;
    font-size: var(--t-label);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--c-slate-400);
    scroll-snap-align: start;
  }
  .perfil-indice a {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.06);
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--c-slate-200);
    scroll-snap-align: start;
  }
  .perfil-indice a:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; }
  .perfil-indice a:last-child { box-shadow: inset 0 0 0 1px var(--c-cyan-600); color: var(--c-cyan); }

  .perfil-area .link-arrow,
  .perfil-links .link-arrow { min-height: 44px; }
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .perfil-indice a { transition: scale var(--d-1) var(--ease-out), border-color var(--d-1) ease; }
  .perfil-indice a:active { scale: 0.96; }

  @supports (animation-timeline: view()) {
    /* A ponta da linha acompanha o meio da tela enquanto a trajetória
       passa por ela; o ponto de cada marco acende quando chega ao meio. */
    .perfil-linha::after {
      content: '';
      position: absolute;
      top: 6px;
      bottom: 6px;
      left: 200px;
      width: 1px;
      background: var(--c-cyan);
      transform-origin: 50% 0;
      animation: rail-fill linear both;
      animation-timeline: view();
      animation-range: cover 50vh cover calc(100% - 50vh);
    }
    .perfil-marco::before {
      z-index: 1;
      animation: marco-acende linear both;
      animation-timeline: view();
      animation-range: cover calc(50vh - 48px) cover 50vh;
    }
    .perfil-marco > * {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
      --reveal-y: 12px;
    }

    .perfil-area, .perfil-artigos > .blog-card, .perfil-fatos > div {
      animation: card-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}
@media (max-width: 680px) {
  .perfil-linha::after { left: 4px; }
}
@keyframes marco-acende {
  from { background: var(--c-ink-950); box-shadow: none; }
  to   { background: var(--c-cyan); box-shadow: 0 0 0 4px rgba(33, 199, 255, 0.18); }
}