/* sobre.css — página Sobre, Figma 4036:879 */

/* Fundo do topo — a cortina da hero, reusada, ancorada no topo da página */

.sobre-page {
  position: relative;
  background-color: var(--dm-grey-10);
}

/* ⚠ Não sobrescrever a ripa com os stops que o Figma reporta para este nó — são
   diferentes dos da hero mas piram o casamento com o render; usa o token normal. */
.sobre-page__backdrop {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 0;
  height: clamp(520px, 50.833vw, 976px);
  pointer-events: none;

}

.sobre-page>.sobre-intro,
.sobre-page>section {
  position: relative;
  z-index: 1;
}

/* Seção 1 */

.sobre-intro {
  --rail-gap: clamp(20px, 2.552vw, 49px);
  --rail-dot: 10px;
  --rail-line: 2px;
  --rail-ring: 6px;
  /* ⚠ --rail-dot-delay deriva de --rail-ring-delay de propósito — mexer só no anel
     mantém a ordem anel → ponto sem precisar sincronizar os dois valores à mão. */
  --rail-ring-delay: 350ms;
  --rail-dot-delay: calc(var(--rail-ring-delay) + 150ms);

  padding-top: var(--dm-space-120);
  padding-bottom: var(--dm-space-120);
  color: var(--dm-white);
}

.sobre-intro__grid {
  display: grid;
  grid-template-columns: 865fr 788fr;
  column-gap: calc(var(--rail-gap) * 2 + var(--rail-dot));
  align-items: start;
}

/* Retrato */

/* ⚠ top NÃO é 0 como no Figma — o header é fixed e cobriria o retrato com top:0. */
.sobre-intro__portrait-col {
  position: sticky;
  top: clamp(88px, 5.99vw, 115px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 972 / 904;

  /* ⚠ Property lida pelo frontend.js para escolher o arquivo de vídeo — o breakpoint
     mora só aqui, o JS não deve inferir isso de position:sticky (já quebrou assim). */
  --scrub-file: lg;
}

.sobre-intro__portrait {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 865 / 781;
  overflow: hidden;
  margin: 0;
  padding: var(--dm-space-40) var(--dm-space-32);
}


.sobre-intro__portrait::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.98) -41%, transparent 100%);
}

.sobre-intro__portrait picture {
  display: contents;
}

.sobre-intro__portrait-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Vídeo preso ao scroll */

/* ⚠ display:none até o JS ligar, não opacity:0 — o iOS não decodifica vídeo invisível,
   e com opacity o prime (play/pause) aconteceria com o elemento oculto e ficaria preto. */
.sobre-intro__portrait-video {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.sobre-intro__portrait.is-scrubbing .sobre-intro__portrait-video {
  display: block;
}

.sobre-intro__badges {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--dm-space-12);
}

.sobre-intro__badges picture {
  display: contents;
}

.sobre-intro__badge--unicamp {
  width: 86px;
  height: 88px;
}

.sobre-intro__badge--saleve {
  width: 148px;
  height: 53px;
}

/* Coluna de texto */

.sobre-intro__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--dm-space-200);
  padding-top: var(--dm-space-32);
}

.sobre-intro__header {
  display: flex;
  flex-direction: column;
  gap: var(--dm-space-8);
}

.sobre-intro__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--dm-space-12);
  color: var(--dm-primary);
  text-transform: uppercase;
}

.sobre-intro__eyebrow svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.sobre-intro__title,
.sobre-intro__step-title {
  color: var(--dm-white);
}

.sobre-intro__step-title {
  width: min(100%, calc(var(--dm-display-7) * 15.24));
}

/* ⚠ position:relative é obrigatório — a linha do trilho é ::before deste elemento;
   sem ele o pseudo-elemento se ancora no .sobre-intro__content e nasce fora do lugar. */
.sobre-intro__track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--dm-space-200);
}

.sobre-intro__step {
  display: flex;
  flex-direction: column;
  gap: var(--dm-space-200);
}

.sobre-intro__step-text {
  width: min(100%, calc(var(--dm-text-lg) * 31.2));
  color: var(--dm-primary);
  text-transform: uppercase;
}

/* Trilho e pontos */

/* ⚠ Assume que o primeiro título ocupa uma linha (o cálculo do top é centrado nisso) —
   se um dia quebrar em duas, a linha nasce meia linha acima do ponto. */
.sobre-intro__track::before {
  content: "";
  position: absolute;
  top: calc(var(--dm-display-7) * 0.55);
  bottom: 0;
  left: calc(-1 * (var(--rail-gap) + var(--rail-dot) / 2 + var(--rail-line) / 2));
  width: var(--rail-line);
  background-color: var(--dm-grey-30);
}

.sobre-intro__step-title {
  position: relative;
}

.sobre-intro__step-title::before,
.sobre-intro__step-title::after {
  content: "";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}

.sobre-intro__step-title::after {
  left: calc(-1 * (var(--rail-gap) + var(--rail-dot)));
  width: var(--rail-dot);
  height: var(--rail-dot);
  background-color: var(--dm-grey-20);
  transition: background-color 450ms var(--dm-ease) var(--rail-dot-delay);
}

.sobre-intro__step-title::before {
  left: calc(-1 * (var(--rail-gap) + var(--rail-dot) + var(--rail-ring)));
  width: calc(var(--rail-dot) + var(--rail-ring) * 2);
  height: calc(var(--rail-dot) + var(--rail-ring) * 2);
  background-color: rgba(255, 255, 255, 0.25);
  opacity: 0;
  scale: 0.35;
  transition:
    opacity 450ms var(--dm-ease) var(--rail-ring-delay),
    scale 450ms var(--dm-ease) var(--rail-ring-delay);
}

.sobre-intro__step-title.is-visible::before {
  opacity: 1;
  scale: 1;
}

.sobre-intro__step-title.is-visible::after {
  background-color: var(--dm-primary);
}

@media (prefers-reduced-motion: reduce) {
  .sobre-intro__step-title::before {
    transition: none;
    scale: 1;
  }

  .sobre-intro__step-title::after {
    transition: none;
  }
}

/* Mobile — ⚠ o retrato CONTINUA sticky: empilhado ele fica fixo numa faixa de 35%
   da tela e o texto rola por baixo, carregando o scrub. Voltar para static desliga o efeito. */

@media (max-width: 1024px) {
  .sobre-intro__grid {
    grid-template-columns: 1fr;
    row-gap: var(--dm-space-64);
  }

  .sobre-intro__portrait-col {
    aspect-ratio: auto;
    top: 0;
    z-index: 2;
    --scrub-file: sm;
  }

  /* ⚠ Largura cheia, altura limitada — estreitar a caixa foi testado: o card fica mais
     estreito que a coluna e o texto que rola por baixo reaparece na faixa que sobra. */
  .sobre-intro__portrait {
    --card-h: 35vh;
    /* ⚠ svh não é redundante — é o que evita a barra do Safari estourando os 35% da tela. */
    --card-h: 35svh;

    height: var(--card-h);
    aspect-ratio: auto;
    padding: calc(var(--card-h) * 0.051) calc(var(--card-h) * 0.041);
  }

  /* ⚠ Ancorado no ALTO, não no centro — com a faixa baixa e larga o cover centrado corta pela cabeça. */
  .sobre-intro__portrait-video,
  .sobre-intro__portrait-img {
    object-position: 50% 25%;
  }

  .sobre-intro__badges {
    gap: calc(var(--card-h) * 0.015);
  }

  .sobre-intro__badge--unicamp {
    width: calc(var(--card-h) * 0.110);
    height: calc(var(--card-h) * 0.113);
  }

  .sobre-intro__badge--saleve {
    width: calc(var(--card-h) * 0.189);
    height: calc(var(--card-h) * 0.068);
  }

  .sobre-intro__content {
    padding-top: 0;
    gap: var(--dm-space-120);
  }

  /* ⚠ --track-pad também entra no cálculo do ::before abaixo — os dois precisam bater. */
  .sobre-intro__track {
    --track-pad: var(--dm-space-72);

    gap: var(--dm-space-120);
    padding-left: var(--track-pad);
  }

  .sobre-intro__step {
    gap: var(--dm-space-32);
  }

  /* ⚠ A linha precisa somar --track-pad; os pontos não. Elemento absoluto se posiciona
     contra a padding box do ancestral, então o left base ignora o padding-left — os
     pontos escapam disso porque se ancoram no título, que já nasce depois da calha. */
  .sobre-intro__track::before {
    left: calc(var(--track-pad) - (var(--rail-gap) + var(--rail-dot) / 2 + var(--rail-line) / 2));
  }

  .sobre-intro__step-text {
    width: 100%;
  }
}

/* Seção 2 — Áreas de Atuação · Figma 4045:1668 · card 4121:1245 */

.areas {
  --areas-band: clamp(320px, 48.229vw, 926px);

  position: relative;
  background-color: var(--dm-grey-10);

  padding-top: calc(var(--areas-band) * 0.631);
  padding-bottom: 0;
}

.areas__backdrop {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 0;
  height: var(--areas-band);
  overflow: hidden;
  pointer-events: none;
}

.areas__photo,
.areas__backdrop picture {
  width: 100%;
  height: 100%;
}

.areas__photo {
  object-fit: cover;
  object-position: 65% 50%;
}

.areas__backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgb(0 0 0 / 0.4) 0%, var(--dm-grey-10) 100%);
}

.areas__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--dm-space-64);
}

.areas__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--dm-space-48);
}

.areas__title {
  white-space: nowrap;
}

.areas__lead {
  max-width: 47ch;
  color: var(--dm-primary);
  text-transform: uppercase;
}

.areas__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.area-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--dm-space-32);
  min-height: clamp(180px, 13.073vw, 251px);
  padding: var(--dm-space-48);

  /* ⚠ A borda é um gradiente (stroke gradient recuperado por medição), não uma cor —
     border:1px solid transparent + border-image é de propósito, não pode virar border-color. */
  border: 1px solid transparent;
  border-image: linear-gradient(90deg,
      color-mix(in srgb, var(--dm-grey-30) 24%, transparent) 0%,
      rgb(58 60 62 / 0.43) 12.5%,
      rgb(77 81 87 / 0.62) 25%,
      rgb(97 103 111 / 0.81) 37.5%,
      var(--dm-blue-60) 50%,
      rgb(97 103 111 / 0.81) 62.5%,
      rgb(77 81 87 / 0.62) 75%,
      rgb(58 60 62 / 0.43) 87.5%,
      color-mix(in srgb, var(--dm-grey-30) 24%, transparent) 100%) 1;

  transition:
    background-color 0.3s var(--dm-ease),
    backdrop-filter 0.3s var(--dm-ease);
}

.area-card__head {
  display: flex;
  align-items: center;
  gap: var(--dm-space-32);
}

.area-card__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--dm-space-12);
  background-color: var(--dm-grey-20);
}

.area-card__icon img {
  width: 32px;
  height: 32px;
}

.area-card__title {
  color: var(--dm-white);
}

.area-card__text {
  color: var(--dm-primary);
}

.areas__inquiry {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 38px;
  padding: var(--dm-space-48);
  text-align: center;
}

.areas__inquiry-title {
  color: var(--dm-white);
}

/* ⚠ backdrop-filter entra aqui (ao contrário do CTA e do effect) — o fundo é foto, não
   gradiente liso, e medido que o blur muda o suficiente para compensar o custo. */
@media (hover: hover) and (pointer: fine) {
  .area-card:hover {
    background-color: rgb(255 255 255 / 0.04);
    backdrop-filter: blur(20px);
  }
}

@media (max-width: 1280px) {
  .areas__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .areas__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--dm-space-32);
  }

  .areas__title {
    white-space: normal;
  }

  .sobre-page>.sobre-intro {
    padding-top: var(--dm-space-200);
  }

  .sobre-page #areas-de-atuacao {
    padding-top: var(--dm-space-320);
  }
}

@media (max-width: 680px) {
  .areas__grid {
    grid-template-columns: 1fr;
  }

  .area-card {
    min-height: 0;
  }

  .area-card__head {
    gap: var(--dm-space-24);
  }
}

/* Seção 3 — Perguntas frequentes · Figma 4045:1819 */

/* O abre-e-fecha não está aqui: é .accordion__body (components.css) com [data-accordion] de main.js. */

.faq {
  background-color: var(--dm-grey-10);
  padding-block: var(--dm-space-120);
}

.faq__inner {
  display: flex;
  flex-direction: column;
  gap: var(--dm-space-64);
}

.faq__title {
  color: var(--dm-white);
}

.faq-item {
  position: relative;
}

/* ⚠ repeating-linear-gradient, não border-style:dashed — dashed tem comprimento de
   traço definido pelo browser (Chrome, Firefox e Safari divergem); o gradiente não. */
.faq-item::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  pointer-events: none;
  background-image: repeating-linear-gradient(to right,
      var(--dm-grey-40) 0 2px,
      transparent 2px 4px);
}

.faq-item__heading {
  font: inherit;
  margin: 0;
}

.faq-item__trigger {
  gap: var(--dm-space-24);
  padding-block: var(--dm-space-32);
  color: var(--dm-white);
}

.faq-item__question {
  flex: 1 0 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ⚠ Propriedade individual rotate, nunca transform — [data-animate] (no <li>) já ocupa transform na entrada. */
.faq-item__icon {
  flex: none;
  width: 32px;
  height: 32px;
  rotate: 90deg;
  transition: rotate 0.4s var(--dm-ease);
}

.faq-item.is-open .faq-item__icon {
  rotate: 180deg;
}

/* ⚠ O gap de 24 do Figma vira padding-top do miolo, nunca gap no .accordion__body:
   como ele é uma grade 0fr → 1fr, um gap ficaria visível com o item fechado. */
.faq-item__answer {
  padding-top: var(--dm-space-24);
  padding-bottom: var(--dm-space-32);
  color: var(--dm-white);
  overflow-wrap: anywhere;
}

.faq-item__trigger:focus-visible {
  outline-offset: -2px;
}

@media (hover: hover) and (pointer: fine) {
  .faq-item__trigger {
    transition: color 0.3s var(--dm-ease);
  }

  .faq-item__trigger:hover {
    color: var(--dm-primary);
  }
}

@media (max-width: 680px) {
  .faq-item__icon {
    width: 24px;
    height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .faq-item__icon,
  .faq-item__trigger {
    transition: none;
  }
}