/* pd-pages.css — páginas Home (afirmativo/navy-hero), Sobre e Quem sou do redesign P&D.
   Depende dos tokens (colors/typography/spacing). Os cards de case reaproveitam portfolio.css. */

.pd-page-wrap { background: #fff; }
.pd-kicker { display: inline-flex; align-items: center; gap: 8px; font: var(--type-eyebrow);
  text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-primary-deep); }
.pd-sec { max-width: 1180px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 40px); }
.pd-sec--tint { max-width: none; background: var(--neutral-50); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: 0; }
.pd-sec--tint > .pd-sec { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); }
.pd-sechead { text-align: center; max-width: 660px; margin: 0 auto 44px; }
.pd-sechead .pd-kicker { margin-bottom: 12px; }
.pd-h2 { font: var(--fw-extrabold) clamp(26px, 3.4vw, 38px)/1.15 var(--font-body); color: var(--text-strong); margin: 0 0 14px; letter-spacing: -.5px; }
.pd-h2--bare { margin-bottom: 0; }
.pd-leadtxt { font: var(--type-lead); color: var(--text-body); margin: 0; }

/* ---------- Botões (CTA) ---------- */
.pd-cbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px;
  font: var(--fw-semibold) 15px var(--font-body); text-decoration: none; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer; transition: var(--transition-base); }
.pd-cbtn--lg { padding: 15px 26px; font-size: 16px; }
.pd-cbtn--primary { background: var(--gradient-brand); color: #fff; }
.pd-cbtn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-cta); color: #fff; }
.pd-cbtn--secondary { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .28); }
.pd-cbtn--secondary:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.pd-cbtn--outline { background: #fff; color: var(--text-body); border-color: var(--border-default); }
.pd-cbtn--outline:hover { border-color: var(--color-primary); color: var(--color-primary-deep); }
.pd-cbtn--dark { background: var(--ink-900); color: #fff; }
.pd-cbtn--dark:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(14, 14, 39, .3); color: #fff; }

/* ============================ HOME — HERO (afirmativo) ============================ */
.pd-hero { position: relative; overflow: hidden; background: var(--ink-900); border-bottom: 1px solid transparent; }
.pd-hero__pattern { position: absolute; top: -30%; right: -5%; width: 55%; height: 160%;
  background: radial-gradient(circle, rgba(133, 216, 200, .20), transparent 65%); pointer-events: none; }
.pd-hero__inner { position: relative; max-width: 1180px; margin: 0 auto; padding: clamp(48px, 7vw, 92px) clamp(20px, 4vw, 40px);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.pd-hero__eyebrow { color: var(--teal-300); margin-bottom: 18px; }
.pd-hero__eyebrow span.bar { width: 22px; height: 2px; background: currentColor; display: inline-block; }
.pd-hero__title { font: var(--fw-extrabold) clamp(34px, 5vw, 58px)/1.05 var(--font-body); letter-spacing: -1px; color: #fff; margin: 0 0 22px; }
.pd-hero__title span { color: var(--teal-500); }
.pd-hero__lead { font: var(--fw-regular) clamp(16px, 1.6vw, 19px)/1.6 var(--font-body); color: rgba(255, 255, 255, .78); max-width: 540px; margin: 0 0 32px; }
.pd-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.pd-hero__visual { display: block; }
.pd-hero__viz { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1/1; margin: 0 auto; animation: pd-fadeUp .8s ease both; }
.pd-hero__grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); gap: 6px; opacity: .9; animation: pd-grid-in 1.1s ease both; }
/* cada quadradinho cintila (opacidade + escala) em onda diagonal (animation-delay inline) */
.pd-hero__sq { border-radius: 3px; transform-origin: center; animation: pd-shimmer 3s ease-in-out infinite; }
.pd-hero__chart { position: absolute; left: 8%; bottom: 10%; width: 84%; height: auto; filter: drop-shadow(0 12px 24px rgba(18, 120, 100, .25)); }
/* linha desenha, fica exibida a maior parte do ciclo e redesenha — loop contínuo */
.pd-hero__chart path.line { stroke-dasharray: 600; animation: pd-draw-loop 5.5s ease-in-out infinite; }
.pd-hero__chart circle.dot { transform-box: fill-box; transform-origin: center; animation: pd-dot 5.5s ease-in-out infinite; }

@keyframes pd-grid-in { from { opacity: 0; transform: scale(.9); } to { opacity: .9; transform: scale(1); } }
@keyframes pd-shimmer { 0%, 100% { opacity: .22; transform: scale(.78); } 50% { opacity: 1; transform: scale(1); } }
@keyframes pd-draw-loop {
  0% { stroke-dashoffset: 600; }
  28% { stroke-dashoffset: 0; }
  82% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 600; }
}
@keyframes pd-dot {
  0%, 22% { opacity: 0; transform: scale(.4); }
  30% { opacity: 1; transform: scale(1); }
  50% { transform: scale(1.25); }
  70% { transform: scale(1); }
  82% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.4); }
}

/* ---------- Stat strip ---------- */
.pd-statstrip-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); transform: translateY(-36px); }
.pd-statstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.pd-stat { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 22px 22px; display: flex; flex-direction: column; gap: 6px; }
.pd-stat__icon { display: inline-flex; width: 42px; height: 42px; border-radius: 11px; align-items: center; justify-content: center;
  font-size: 19px; margin-bottom: 6px; background: var(--surface-tint); color: var(--color-primary-deep); }
.pd-stat--ink .pd-stat__icon { background: rgba(14, 14, 39, .07); color: var(--ink-700); }
.pd-stat--teal .pd-stat__icon { background: var(--gradient-brand); color: #fff; }
.pd-stat__row { display: flex; align-items: baseline; gap: 4px; }
.pd-stat__value { font: var(--fw-bold) 32px/.9 var(--font-display); color: var(--text-strong); letter-spacing: -.5px; }
.pd-stat__unit { font: var(--fw-medium) 16px var(--font-display); color: var(--color-primary-deep); }
.pd-stat__label { font: var(--fw-bold) 14px var(--font-body); color: var(--text-heading); }
.pd-stat__sub { font: var(--fw-regular) 12px var(--font-body); color: var(--text-muted); }

/* ---------- Pilares ---------- */
.pd-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.pd-pillar { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; }
.pd-pillar__icon { display: inline-flex; width: 54px; height: 54px; border-radius: 14px; align-items: center; justify-content: center;
  font-size: 24px; background: var(--surface-tint); color: var(--color-primary-deep); }
.pd-pillar__icon--brand { background: var(--gradient-brand); color: #fff; }
.pd-pillar__title { font: var(--fw-extrabold) 21px var(--font-body); color: var(--text-heading); margin: 0; }
.pd-pillar__body { font: var(--type-body); color: var(--text-body); margin: 0; }

/* ---------- Featured cases ---------- */
.pd-featured__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.pd-featured__head .pd-kicker { margin-bottom: 10px; }
.pd-seelink { font: var(--type-ui); color: var(--text-link); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pd-seelink:hover { color: var(--color-primary-deep); }

/* ---------- Processo + stack ---------- */
.pd-process { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; }
.pd-step { padding: 0 22px; text-align: center; }
.pd-step__icon { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 2px solid var(--teal-200);
  color: var(--color-primary-deep); align-items: center; justify-content: center; font-size: 26px; margin-bottom: 16px; box-shadow: var(--shadow-card); }
.pd-step__n { font: var(--fw-medium) 11px var(--font-display); letter-spacing: 1px; color: var(--teal-500); text-transform: uppercase; margin-bottom: 6px; }
.pd-step__title { font: var(--fw-bold) 17px var(--font-body); color: var(--text-heading); margin: 0 0 6px; }
.pd-step__body { font: var(--fw-regular) 13.5px/1.5 var(--font-body); color: var(--text-muted); margin: 0; }
.pd-stack { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 48px; align-items: center; }
.pd-stack__label { font: var(--type-ui); color: var(--text-muted); margin-right: 6px; }
.pd-stack img { height: 38px; width: auto; filter: grayscale(.2); opacity: .9; }

/* ---------- CTA band ---------- */
.pd-ctaband { position: relative; background: var(--gradient-brand); overflow: hidden; }
.pd-ctaband__pattern { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .35) 1.4px, transparent 1.4px); background-size: 22px 22px; opacity: .4; }
.pd-ctaband__inner { position: relative; max-width: 900px; margin: 0 auto; padding: clamp(44px, 6vw, 72px) clamp(20px, 4vw, 40px); text-align: center; color: #fff; }
.pd-ctaband__title { font: var(--fw-extrabold) clamp(24px, 3.2vw, 34px)/1.2 var(--font-body); margin: 0 0 14px; letter-spacing: -.5px; }
.pd-ctaband__sub { font: var(--type-lead); color: rgba(255, 255, 255, .9); margin: 0 0 28px; }
.pd-ctaband__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ============================ SOBRE ============================ */
.pd-pagehead { background: var(--neutral-50); border-bottom: 1px solid var(--border-subtle); }
.pd-pagehead__inner { max-width: 1180px; margin: 0 auto; padding: clamp(44px, 6vw, 80px) clamp(20px, 4vw, 40px); }
.pd-pagehead .pd-kicker { margin-bottom: 14px; }
.pd-pagehead__title { font: var(--fw-extrabold) clamp(30px, 4vw, 48px)/1.1 var(--font-body); color: var(--text-strong); margin: 0 0 18px; letter-spacing: -.8px; max-width: 760px; }
.pd-pagehead__lead { font: var(--type-lead); color: var(--text-body); max-width: 720px; margin: 0; text-align: justify; }
.pd-sources { background: var(--ink-900); border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 56px); position: relative; overflow: hidden; }
.pd-sources__glow { position: absolute; top: -40%; right: -10%; width: 60%; height: 160%; background: radial-gradient(circle, rgba(133, 216, 200, .22), transparent 65%); }
.pd-sources__body { position: relative; }
.pd-sources .pd-kicker { color: var(--teal-300); margin-bottom: 14px; }
.pd-sources__title { font: var(--fw-extrabold) clamp(22px, 3vw, 32px) var(--font-body); color: #fff; margin: 0 0 26px; letter-spacing: -.5px; }
.pd-sources__badges { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-srcbadge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  background: rgba(133, 216, 200, .12); border: 1px solid rgba(133, 216, 200, .3); color: #fff; font: var(--fw-medium) 14px var(--font-body); }
.pd-srcbadge i { color: var(--teal-300); }

/* ============================ QUEM SOU ============================ */
.pd-quem { max-width: 1080px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 40px) 80px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 56px); align-items: start; }
.pd-quem__aside { position: sticky; top: 88px; }
.pd-quem__avatar { width: 100%; max-width: 280px; aspect-ratio: 1/1; border-radius: 50%; background: var(--gradient-logo);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); margin-bottom: 20px; overflow: hidden; position: relative;}
.pd-quem__avatar::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .18) 1.4px, transparent 1.4px); background-size: 20px 20px; }
.pd-quem__avatar i { font-size: 90px; color: rgba(255, 255, 255, .7); position: relative; }
.pd-quem__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; position: relative; }
.pd-quem__name { font: var(--fw-extrabold) 22px var(--font-body); color: var(--text-strong); }
.pd-quem__role { font: var(--type-ui); color: var(--color-primary-deep); margin-bottom: 14px; }
.pd-quem__social { display: flex; gap: 10px; }
.pd-quem__social a { display: inline-flex; width: 40px; height: 40px; border-radius: 10px; background: var(--ink-900); color: #fff;
  align-items: center; justify-content: center; text-decoration: none; font-size: 18px; transition: var(--transition-base); }
.pd-quem__social a:hover { background: var(--teal-700); color: #fff; }
.pd-quem__title { font: var(--fw-extrabold) clamp(28px, 3.6vw, 42px)/1.1 var(--font-body); color: var(--text-strong); margin: 0 0 22px; letter-spacing: -.6px; }
.pd-quem__bio { display: flex; flex-direction: column; gap: 16px; font: var(--type-lead); color: var(--text-body); text-align: justify; }
.pd-quem__bio p { margin: 0; }
.pd-quem__h { font: var(--fw-extrabold) 18px var(--font-body); color: var(--text-heading); margin: 34px 0 16px; }
.pd-exp__item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border-subtle); }
.pd-exp__icon { display: inline-flex; width: 44px; height: 44px; border-radius: 10px; background: var(--surface-tint); color: var(--color-primary-deep);
  align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.pd-exp__role { font: var(--fw-bold) 16px var(--font-body); color: var(--text-heading); }
.pd-exp__org { font: var(--type-ui); color: var(--text-muted); }
.pd-edu { display: flex; gap: 10px; flex-wrap: wrap; }
.pd-edubadge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: #fff;
  border: 1px solid var(--border-default); color: var(--text-body); font: var(--fw-medium) 14px var(--font-body); box-shadow: var(--shadow-xs); }
.pd-edubadge i { color: var(--color-primary-deep); }

/* ---------- responsivo ---------- */
@media (max-width: 860px) {
  .pd-hero__inner { grid-template-columns: 1fr; }
  .pd-hero__visual { display: none; }
  .pd-quem { grid-template-columns: 1fr; }
  .pd-quem__aside { position: static; }
}

/* ============================ CONTATO ============================ */
.pd-contact { max-width: 1080px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 40px) 80px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 4vw, 48px); align-items: start; }
.pd-contact__title { font: var(--fw-extrabold) clamp(28px, 3.6vw, 44px)/1.1 var(--font-body); color: var(--text-strong); margin: 14px 0 16px; letter-spacing: -.6px; }
.pd-contact__lead { font: var(--type-lead); color: var(--text-body); margin: 0 0 28px; }
.pd-channels { display: flex; flex-direction: column; gap: 14px; }
.pd-channel { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-card); text-decoration: none; transition: var(--transition-base); }
.pd-channel:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.pd-channel__icon { display: inline-flex; width: 46px; height: 46px; border-radius: 12px; align-items: center; justify-content: center; font-size: 21px; flex-shrink: 0; }
.pd-channel__icon--wa { background: rgba(25, 135, 84, .12); color: #198754; }
.pd-channel__icon--mail { background: var(--surface-tint); color: var(--color-primary-deep); }
.pd-channel__icon--in { background: rgba(10, 102, 194, .12); color: #0a66c2; }
.pd-channel__label { display: block; font: var(--fw-semibold) 13px var(--font-body); color: var(--text-muted); }
.pd-channel__value { display: block; font: var(--fw-medium) 16px var(--font-body); color: var(--text-heading); }
/* card do formulário */
.pd-formcard { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.pd-formcard__accent { height: 5px; background: var(--gradient-accent-bar); }
.pd-formcard__body { padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; gap: 18px; }
.pd-field { display: flex; flex-direction: column; gap: 6px; }
.pd-field > label { font: var(--type-ui); color: var(--text-muted); }
.pd-contact .form-control { width: 100%; padding: 11px 14px; font: 14px var(--font-body); color: var(--text-body);
  background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); outline: none; transition: var(--transition-base); }
.pd-contact .form-control:focus { border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
.pd-contact textarea.form-control { resize: vertical; min-height: 120px; }
.pd-cbtn--block { width: 100%; }
.pd-formnote { font: var(--type-caption); color: var(--text-muted); text-align: center; margin: 0; }
.pd-formerr { font: 12.5px var(--font-body); color: var(--danger); margin: 2px 0 0; }
.pd-captcha { display: flex; justify-content: center; }
@media (max-width: 700px) { .pd-contact { grid-template-columns: 1fr; } }

/* ============================ ACESSO RESTRITO (pesquisa) ============================ */
.pd-restrito-head { position: relative; overflow: hidden; background: var(--ink-900); }
.pd-restrito-head__glow { position: absolute; top: -40%; right: -5%; width: 55%; height: 170%;
  background: radial-gradient(circle, rgba(133, 216, 200, .20), transparent 65%); pointer-events: none; }
.pd-restrito-head__inner { position: relative; max-width: 1080px; margin: 0 auto; padding: clamp(36px, 5vw, 64px) clamp(20px, 4vw, 40px); }
.pd-restrito-head .pd-kicker { color: var(--teal-300); margin-bottom: 12px; }
.pd-restrito-head .pd-kicker i { font-size: 14px; }
.pd-restrito-head__title { font: var(--fw-extrabold) clamp(26px, 3.4vw, 40px)/1.1 var(--font-body); color: #fff; margin: 0 0 12px; letter-spacing: -.5px; }
.pd-restrito-head__lead { font: var(--type-lead); color: rgba(255, 255, 255, .78); max-width: 620px; margin: 0; }
.pd-restrito-user { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 7px 14px;
  border-radius: 999px; background: rgba(133, 216, 200, .12); border: 1px solid rgba(133, 216, 200, .3);
  color: #fff; font: var(--fw-medium) 13px var(--font-body); }
.pd-restrito-user i { color: var(--teal-300); }

.pd-restrito-grid { max-width: 1080px; margin: 0 auto; padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 40px) 80px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }
.pd-projcard { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 26px 24px; display: flex; flex-direction: column; gap: 18px; transition: var(--transition-base); }
.pd-projcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.pd-projcard__head { display: flex; align-items: center; gap: 13px; }
.pd-projcard__icon { display: inline-flex; width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0;
  align-items: center; justify-content: center; font-size: 22px; background: var(--surface-tint); color: var(--color-primary-deep); }
.pd-projcard__title { font: var(--fw-extrabold) 18px var(--font-body); color: var(--text-heading); margin: 0; line-height: 1.2; }
.pd-projcard__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.pd-projcard .pd-cbtn { padding: 9px 16px; font-size: 14px; }

.pd-restrito-empty { max-width: 560px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) 24px; text-align: center; }
.pd-restrito-empty i { font-size: 44px; color: var(--color-primary); opacity: .6; }
.pd-restrito-empty h3 { font: var(--fw-extrabold) 22px var(--font-body); color: var(--text-heading); margin: 16px 0 8px; }
.pd-restrito-empty p { font: var(--type-body); color: var(--text-muted); margin: 0; }

/* Acesso Restrito — refinamentos */
.pd-restrito-head__badge { display: inline-flex; width: 56px; height: 56px; border-radius: 16px;
  align-items: center; justify-content: center; font-size: 26px; margin-bottom: 18px;
  background: rgba(133, 216, 200, .14); border: 1px solid rgba(133, 216, 200, .3); color: var(--teal-300); }
.pd-projcard__desc { font: var(--fw-regular) 13.5px/1.5 var(--font-body); color: var(--text-muted); margin: -6px 0 0; }