/* sobre — ported from html-v2 (history/video/mission + team grids). */
:root {
  --capi-bg:           #000000;
  --capi-green:        #2D9773;
  --capi-team-bg:      #0C6353;
  --capi-dark-bar:     #032025;
  --capi-teal:         #4EB9AD;
  --capi-equipe-fg:    #DAEDE9;
  --container-px:      14.4%;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: url(../../images/sobre/sobre.png) top center / 100% auto no-repeat #04140F;
  color: #fff;
  font-family: 'DIN Next LT Pro', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ════════════════════════════════════════════════════════════
   PAGE BACKGROUND — microscope close-up bleed + decor + bottom-left
   ════════════════════════════════════════════════════════════ */
.page-bg { display: none; }
.page-bg__microscope {
  /* PSD: closeup-shot bbox (-130,772)→(2607,2597) on canvas 1800×6638
     Top = 772/6638 = 11.6%. Width = 2737/1800 = 152%. Left = -130/1800 = -7.2%. */
  position: absolute;
  top: 11.6%;
  left: -7.2%;
  width: 152%;
  height: auto;
  opacity: .55;
  mix-blend-mode: screen;
}
.page-bg__decor-right {
  /* PSD: IMG-WA0016 bbox (1339,363)→(2073,1737) — top right small image */
  position: absolute;
  top: 5.47%;
  left: 74.4%;
  width: 40.8%;
  height: auto;
  opacity: .9;
}
.page-bg__microscopy-bl {
  /* PSD: IMG-WA0022 copy bbox (-665,5075)→(1135,6875) — bottom left bleed */
  position: absolute;
  top: 76.5%;
  left: -36.9%;
  width: 100%;
  height: auto;
  opacity: .55;
  mix-blend-mode: screen;
}

/* keep content above bg */
.login-bar, .site-header, .header-menu, .sobre-historia, .sobre-equipe, .footer-capi {
  position: relative; z-index: 1;
}

/* ════════════════════════════════════════════════════════════
   LOGIN BAR
   ════════════════════════════════════════════════════════════ */
.login-bar {
  background: var(--capi-dark-bar);
  height: clamp(43px, 3.6vw, 65px);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: var(--container-px);
}
.login-btn {
  display: inline-flex; align-items: center; gap: clamp(8px, .67vw, 12px);
  background: transparent; border: 0; color: #fff; cursor: pointer;
  font-family: inherit; font-size: clamp(12px, .83vw, 15px); font-weight: 400;
}
.login-btn__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(26px, 2vw, 36px); aspect-ratio: 1;
  background: var(--capi-green); border-radius: 4px;
}
.login-btn__icon img { width: 40%; height: auto; }

/* ════════════════════════════════════════════════════════════
   HEADER (logo banner) — same proportions as home
   ════════════════════════════════════════════════════════════ */
.site-header {
  /* Top 85px above logo, bottom 57px below logo (PSD asymmetric) */
  padding: clamp(60px, 6.17vw, 111px) var(--container-px) clamp(27px, 3.17vw, 57px);
  display: flex; align-items: center;
}
.site-header .logo {
  width: clamp(220px, 26.7vw, 480px); height: auto; display: block;
}

/* ════════════════════════════════════════════════════════════
   MENU
   ════════════════════════════════════════════════════════════ */
.header-menu {
  background: var(--capi-green);
  padding: 0 var(--container-px);
  height: clamp(52px, 5.22vw, 94px);
  display: flex; align-items: center;
  z-index: 2;
}
.header-menu ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 56px);
}
.header-menu a {
  color: #fff; text-decoration: none; font-weight: 400;
  font-size: clamp(14px, 1.06vw, 19px); letter-spacing: .02em;
  transition: opacity .15s ease;
}
.header-menu a:hover { opacity: .75; }
.header-menu a.is-active {
  color: #F4D783;  /* PSD: active item yellow #F4D783 */
}

/* ════════════════════════════════════════════════════════════
   HISTÓRIA + VIDEO + MISSÃO  (dark section with microscope bleed)
   PSD: História y=637 to ~y=2082, Missão within same dark zone
   ════════════════════════════════════════════════════════════ */
.sobre-historia {
  padding-top: clamp(75px, 7.94vw, 143px);
  padding-left: var(--container-px);
  padding-right: var(--container-px);
  padding-bottom: 0;
}
/* PSD: História = LightItalic 62.5px, color #4EB9AD (teal), letter-spacing .01em */
.historia-titulo {
  font-family: 'DIN Next LT Pro';
  font-style: italic;
  font-weight: 300;
  font-size: clamp(36px, 3.47vw, 62.5px);
  text-transform: uppercase;  /* PSD: "HISTÓRIA" caixa alta (conteúdo fica "História") */
  letter-spacing: .01em;
  color: var(--capi-teal);
  margin: 0 0 clamp(28px, 2.86vw, 51px);
  line-height: 1;
}
/* PSD: history body = LightItalic 25px, white */
.historia-body {
  font-family: 'DIN Next LT Pro';
  font-style: italic;
  font-weight: 300;
  font-size: clamp(16px, 1.389vw, 25px);
  line-height: 1.389;
  letter-spacing: .01em;
  color: #fff;
  margin: 0 0 clamp(42px, 3.94vw, 71px);
  max-width: 52.6vw;
}

/* Video block (sunset/landscape image with play button overlay) */
.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 71.22vw;
  aspect-ratio: 1282 / 727;
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #111;
}
.video-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(70px, 8.39vw, 151px); aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.65);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s ease;
}
.video-play-btn:hover { background: rgba(255,255,255,.35); }
.video-play-btn svg { width: 38%; height: 38%; margin-left: 8%; }

/* Missão block */
/* Breathing room above "NOSSA MISSÃO:" — it was flush against the video (gap 0);
   PSD has a clear paragraph break (HuddleKit 5). */
.missao-block { max-width: none; margin: clamp(48px, 5.5vw, 100px) 0 clamp(180px, 22.73vw, 409px); }
/* PSD: 43.5px italic. "Nossa " LightItalic white + "Missão:" MediumItalic teal */
.missao-titulo {
  font-family: 'DIN Next LT Pro';
  font-style: italic;
  font-size: clamp(28px, 2.22vw, 40px);
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 0 clamp(22px, 2.0vw, 36px);
  line-height: 1;
}
.missao-titulo__light  { font-weight: 300; color: #fff; }
.missao-titulo__medium { font-weight: 500; color: var(--capi-teal); }
/* PSD: missão body = LightItalic 29px white */
.missao-corpo {
  font-family: 'DIN Next LT Pro';
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.556vw, 28px);
  line-height: 1.464;
  letter-spacing: .01em;
  color: #fff;
  margin: 0;
}

/* ════════════════════════════════════════════════════════════
   EQUIPE — green panel containing Diretor + Usuários + Técnica
   PSD Rectangle 15: y=1320→6151 (full canvas width), green #0C6353
   ════════════════════════════════════════════════════════════ */
.sobre-equipe {
  background: transparent;
  padding: clamp(40px, 3.4vw, 61px) var(--container-px) clamp(130px, 12.83vw, 231px);
}

/* Section header — "EQUIPE" + "<subname>" with side decorative lines */
.equipe-hdr {
  font-family: 'DIN Next LT Pro';
  color: var(--capi-equipe-fg);
  margin-bottom: clamp(56px, 5.56vw, 100px);
}
.equipe-hdr--mt { margin-top: clamp(60px, 5.8vw, 104px); }
.equipe-hdr--tecnica { margin-top: clamp(120px, 11.94vw, 215px); }
.equipe-hdr__row { display: flex; align-items: center; }
.equipe-hdr__row--top { margin-bottom: .25vw; }
.equipe-hdr__line {
  height: 3px;
  background: var(--capi-equipe-fg);
  opacity: 1;
}
.equipe-hdr__line--left {
  flex: 0 0 clamp(80px, 13.78vw, 248px);
  margin-left: calc(-1 * var(--container-px));
  margin-right: clamp(8px, .78vw, 14px);
}
.equipe-hdr__line--right {
  flex: 1 1 auto;
  margin-left: clamp(12px, 1vw, 18px);
  margin-right: calc(-1 * var(--container-px));
  margin-top: .31vw;
}
.equipe-tag {
  font-style: italic;
  font-weight: 300;
  font-size: clamp(36px, 3.472vw, 62.5px);
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1;
}
.equipe-secname {
  font-style: italic;
  font-weight: 500;
  font-size: clamp(36px, 3.472vw, 62.5px);
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1;
  padding-left: clamp(24px, 3.39vw, 61px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cards grid */
.pessoas-grid       { --bs-gutter-y: clamp(32px, 2.94vw, 53px); --bs-gutter-x: clamp(60px, 6.22vw, 112px); }
.pessoas-grid > .col-lg-6:nth-child(even) { padding-left: clamp(90px, 6.72vw, 121px); }
.pessoas-grid-v     { --bs-gutter-y: clamp(40px, 2.94vw, 53px); --bs-gutter-x: clamp(40px, 4vw, 72px); margin-top: clamp(45px, 4.08vw, 73px); }
.equipe-divider {
  border: 0;
  border-top: 2px dashed rgba(218,237,233,.95);  /* PSD: linha tracejada (HuddleKit 7) */
  width: clamp(300px, 52.67vw, 948px);
  margin: clamp(40px, 5vw, 90px) auto clamp(8px, 1vw, 18px);
}

/* Horizontal card (foto left, info right) */
.pessoa-card-h {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.22vw, 22px);
}
.pessoa-card-h .pessoa-info { padding-top: clamp(16px, 1.8vw, 32px); }
/* Vertical card (foto top centered, info below centered) */
.pessoa-card-v {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.pessoa-card-v .pessoa-info { margin-top: clamp(20px, 2.17vw, 39px); padding: 0; }

.pessoa-foto {
  width: clamp(100px, 9.22vw, 166px);
  height: clamp(100px, 9.22vw, 166px);
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.pessoa-foto-placeholder {
  width: clamp(100px, 9.22vw, 166px);
  height: clamp(100px, 9.22vw, 166px);
  border-radius: 50%;
  flex-shrink: 0;
  background: #3E9E90;
}

.pessoa-info { flex: 1; min-width: 0; }
/* PSD: all 20.83px white. Name=Bold, Dept/Ramal=Regular, Email=Bold, Lattes=Condensed thin */
.pessoa-nome {
  font-family: 'DIN Next LT Pro';
  font-size: clamp(15px, 1.157vw, 20.8px);
  font-weight: 700;
  color: #fff;
  line-height: 1.1364;
  margin: 0;
}
.pessoa-dept {
  font-family: 'DIN Next LT Pro';
  font-size: clamp(15px, 1.157vw, 20.8px);
  font-weight: 400;
  color: #fff;
  line-height: 1.1364;
  margin: 0;
}
.pessoa-ramal {
  display: block;
  font-family: 'DIN Next LT Pro';
  font-size: clamp(15px, 1.157vw, 20.8px);
  font-weight: 400;
  color: #fff;
  line-height: 1.1364;
  margin: 0;
}
.pessoa-email {
  display: block;
  font-family: 'DIN Next LT Pro';
  font-size: clamp(15px, 1.157vw, 20.8px);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  word-break: break-all;
  line-height: 1.1364;
  margin: 0;
}
.pessoa-email:hover { opacity: .82; }
.pessoa-lattes {
  display: block;
  font-family: 'DIN Next LT Pro';
  font-size: clamp(12px, 1vw, 18px);
  font-weight: 300;
  font-stretch: condensed;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  word-break: break-all;
  line-height: 1.389;
}
.pessoa-lattes:hover { color: #fff; }
.pessoa-bio {
  font-family: 'DIN Next LT Pro';
  font-size: clamp(15px, 1.157vw, 20.8px);
  font-weight: 400;
  color: #fff;
  line-height: 1.1364;
  letter-spacing: -0.015em;
  text-align: left;
  margin: clamp(14px, 1.389vw, 25px) 0 0;
  max-width: clamp(280px, 23.06vw, 415px);
}

/* Bottom microscopy dark band (PSD y6149-6302) */
.bottom-microscopy {
  height: clamp(90px, 8.5vw, 153px);
  background: transparent;
}

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */
.footer-capi {
  background: var(--capi-green);
  color: #fff;
  padding: clamp(30px, 2.8vw, 50px) 11.28% clamp(40px, 3.6vw, 65px) 14.39%;
}
.footer-capi .endereco-title { font-weight: 700; font-size: clamp(15px, 1.37vw, 22px); line-height: 1.25; margin-bottom: .35em; }
.footer-capi .endereco-text  { font-weight: 300; font-size: clamp(14px, 1.18vw, 19px); line-height: 1.45; }
.footer-capi hr.endereco-divider { border: 0; border-top: 1px solid rgba(255,255,255,.45); margin: clamp(14px, 1.4vw, 24px) 0; opacity: 1; }
.footer-capi .social-row    { gap: clamp(10px, 1.22vw, 22px); }
.footer-capi .social-row a  { display: inline-flex; width: clamp(30px, 2.61vw, 47px); aspect-ratio: 1; transition: transform .15s ease; }
.footer-capi .social-row a:hover { transform: translateY(-2px); }
.footer-capi .social-row img { width: 100%; height: 100%; display: block; }
.footer-capi .logo-capi      { max-width: 100%; height: auto; display: block; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .historia-body, .missao-block, .video-wrapper { max-width: 100%; }
  .equipe-secname { padding-left: 1em; }
}
@media (max-width: 768px) {
  :root { --container-px: 24px; }
  .header-menu ul { gap: 14px; }
  .header-menu a { font-size: 13px; }
  .equipe-hdr__line--left, .equipe-hdr__line--right { display: none; }
  .equipe-hdr__row { flex-wrap: wrap; }
  .equipe-secname { padding-left: 0; white-space: normal; }
  .footer-capi { padding: 32px 24px; }
  .pessoa-card-h { flex-direction: column; align-items: center; text-align: center; }
  .page-bg__decor-right { display: none; }
}