/* ==============================================================
   QUEM SOMOS — página quem-somos.html.
   ============================================================== */

.about-page { background: #f5f5f5; }

/* ===== Hero (Figma node 2504:190) =====
   270px (não os 300px de .page-hero em componentes.css) porque o eyebrow
   acima do título ocupa 30px (20px de font-size × 1.5 de line-height do
   body) — título e eyebrow juntos somam os mesmos 300px do topo do H1 em
   Projetos/Conteúdos, então o título fica na mesma altura nas 3 páginas
   (mesmo ajuste de .services-hero em servicos.css). */
.about-hero {
  padding: 270px 0 80px;
}

.about-hero-intro {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.about-hero-eyebrow {
  font-family: var(--font-heading);
  font-weight: 400;
  font-variation-settings: "wdth" 100;
  font-size: 20px;
  color: var(--gray-07);
}

.about-hero-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
  align-items: start;
}

/* .page-hero-title/.page-hero-info (componentes.css, compartilhadas com
   Projetos/Conteúdos) já dão font-size/line-height/cor corretos — aqui só
   ajusta pro grid de 12 colunas desta página (span 6/5 em vez do 50/50
   padrão) e zera o padding lateral de 80px que elas carregam por padrão
   (mesma lógica de .projects-page/.news-page .page-hero-title). */
.about-hero-title {
  grid-column: 1 / span 6;
  margin: 0;
  padding: 0;
}

.about-hero-info {
  grid-column: 7 / span 5;
  padding: 0;
}

/* Sequência de entrada orquestrada (ver initHeroIntroSequence em
   script.js) — mesmo mecanismo de Projetos/Conteúdos: tela em branco (só
   o header) até o título nascer alinhado com .about-hero-media e subir
   pra posição atual; só então .page-hero-info e o restSelector
   (.about-hero-media, .about-manifesto) entram. */
.about-page .page-hero-title {
  transform: translateY(var(--intro-offset, 0px));
  transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
}

.about-page .page-hero-info {
  opacity: 0;
}

.about-page .page-hero-info.is-intro-visible {
  opacity: 1;
  transition: opacity 0.4s ease;
}

.about-page .about-hero-media,
.about-page .about-manifesto {
  opacity: 0;
  transform: translateY(100px);
}

.about-page .about-hero-media.is-intro-visible,
.about-page .about-manifesto.is-intro-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1), transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-hero-media {
  position: relative;
  margin-top: 80px;
  height: 400px;
}

/* Recorte da foto isolado num wrapper próprio (em vez de overflow:hidden
   direto em .about-hero-media) pra .about-hero-arrow poder passar um
   pouco da borda quando o cursor chega perto, sem ficar cortada — ela é
   irmã desse wrapper, não fica presa no clip (mesmo padrão de
   .article-hero-photo em conteudo.css). */
.about-hero-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 8px;
}

.about-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Seta da marca em cima da foto — via JS (script.js: initLocalArrow),
   mesmo mecanismo de .about-lead-arrow logo abaixo. z-index simples (sem
   stacking context): nada mais na frente aqui disputa camada. */
.about-hero-arrow {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
  transition: transform .3s ease-out;
  will-change: transform;
}

.about-hero-arrow-inner {
  transform: translate(-50%, -50%) rotate(-45deg) scale(0);
  color: var(--orange-accent);
  opacity: 0;
  will-change: transform, opacity;
}

.about-hero-arrow-icon {
  display: block;
  width: clamp(60px, 10vw, 190px);
  height: auto;
}

.about-hero-arrow.is-active .about-hero-arrow-inner {
  animation: local-arrow-appear .6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.about-hero-arrow.is-leaving .about-hero-arrow-inner {
  animation: local-arrow-disappear .5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ===== Verbete e Manifesto (Figma node 2504:200) ===== */
.about-manifesto {
  padding: 80px 0;
}

.about-manifesto-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
  align-items: start;
}

.about-word-card {
  grid-column: 1 / span 5;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
  background: var(--white);
  border-radius: 16px;
  padding: 40px;
}

.about-word-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 40px;
  color: var(--gray-07);
  white-space: nowrap;
}

.about-word-term {
  font-family: var(--font-heading);
  font-weight: 700;
  font-variation-settings: "wdth" 100;
}

.about-word-class {
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: italic;
  font-variation-settings: "wdth" 100;
}

.about-word-def {
  font-size: 20px;
  color: var(--gray-06);
}

.about-word-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.about-word-tag {
  padding: 4px 16px;
  background: var(--gray-01);
  border-radius: 4px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 20px;
  color: var(--gray-07);
  white-space: nowrap;
}

.about-manifesto-text {
  grid-column: 7 / span 5;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 0;
}

/* Seletor descendente (não a regra da div acima) porque o "p" global do
   base.css (font-size:20px, font-weight:500) tem uma regra própria pra
   cada <p> e vence a herança do container — precisa mirar o filho direto
   pra 24px/italic realmente chegar no texto (mesmo motivo de
   .about-pillars-heading p). */
.about-manifesto-text p {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  color: var(--gray-07);
}

/* ===== Galeria (Figma node 2518:324) — carrossel de scroll horizontal em
   loop infinito: os 6 itens reais do HTML são clonados 2x via JS
   (initGalleryLoop em script.js, aria-hidden nos clones) pra dar um
   "colchão" de conteúdo dos dois lados; ao chegar perto de uma borda, o
   scroll pula de volta pro mesmo ponto do conjunto do meio, sem transição
   visível. Mesmo mecanismo de arrasto/setas de .about-process-scroll
   logo abaixo, só que sem início/fim (setas sempre ativas) e sem barra
   de progresso (não faz sentido pra conteúdo infinito). */
.about-gallery {
  padding: 120px 0;
}

.about-gallery-scroll-wrap {
  position: relative;
}

.about-gallery-scroll {
  position: relative;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
}

.about-gallery-scroll::-webkit-scrollbar { display: none; }

.about-gallery-scroll.is-dragging { cursor: grabbing; }

.about-gallery-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  padding: 0 var(--grid-margin);
}

/* Fotos genéricas de placeholder (assets/quem-somos/place-holder-0N.jpg —
   ver TODO no HTML) até existirem as fotos de projeto de verdade, um
   tamanho fixo diferente por item (Figma: larguras/alturas variadas, sem
   aspect-ratio único). object-fit:cover porque o arquivo de placeholder
   não bate exatamente com a proporção de cada caixa. */
.about-gallery-item {
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--gray-01);
}

.about-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-gallery-item--a { width: 373px; height: 400px; }
.about-gallery-item--b { width: 449px; height: 400px; }
.about-gallery-item--c { width: 373px; height: 474px; }
.about-gallery-item--d { width: 320px; height: 420px; }
.about-gallery-item--e { width: 420px; height: 360px; }
.about-gallery-item--f { width: 400px; height: 460px; }

.about-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 8px 16px rgba(35, 36, 40, 0.16);
  color: var(--gray-07);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.about-gallery-arrow:hover {
  background: var(--gray-07);
  color: var(--gray-01);
}

.about-gallery-arrow svg {
  width: 20px;
  height: auto;
}

.about-gallery-scroll-wrap:hover .about-gallery-arrow {
  opacity: 1;
  pointer-events: auto;
}

.about-gallery-arrow--left { left: 120px; }
.about-gallery-arrow--right { right: 120px; }

@media (max-width: 1440px) {
  .about-gallery-track { padding: 0 144px; }
}

@media (max-width: 900px) {
  .about-gallery { padding: 80px 0; }
  .about-gallery-track { padding: 0 40px; }
}

@media (max-width: 640px) {
  .about-gallery-track { padding: 0 20px; gap: 24px; }
}

/* ===== Time (núcleo multidisciplinar) — mesma estrutura de grid/tipografia
   do "Quem lidera" logo abaixo (.about-lead-grid/.about-lead-content/
   .about-lead-copy/.about-lead-media), mas com texto e mídia invertidos:
   mídia nas colunas 1-5, texto nas 7-11. */
.about-team {
  padding: 80px 0;
}

.about-team-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
  align-items: center;
}

.about-team-content {
  grid-column: 7 / span 5;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.about-team-content h2 { margin: 0; }

.about-team-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 20px;
  color: var(--gray-07);
}

.about-team-media {
  position: relative;
  grid-column: 1 / span 5;
  min-width: 0;
  aspect-ratio: 620 / 770;
}

.about-team-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Seta da marca em cima da foto — via JS (script.js: initLocalArrow),
   mesmo mecanismo de .about-lead-arrow/.about-hero-arrow logo acima/
   abaixo. */
.about-team-arrow {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
  transition: transform .3s ease-out;
  will-change: transform;
}

.about-team-arrow-inner {
  transform: translate(-50%, -50%) rotate(-45deg) scale(0);
  color: var(--orange-accent);
  opacity: 0;
  will-change: transform, opacity;
}

.about-team-arrow-icon {
  display: block;
  width: clamp(60px, 10vw, 190px);
  height: auto;
}

.about-team-arrow.is-active .about-team-arrow-inner {
  animation: local-arrow-appear .6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.about-team-arrow.is-leaving .about-team-arrow-inner {
  animation: local-arrow-disappear .5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ===== Quem lidera (bio do fundador) ===== */
.about-lead {
  padding: 80px 0;
}

.about-lead-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
  align-items: center;
}

.about-lead-content {
  grid-column: 1 / span 5;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.about-lead-content h2 { margin: 0; }

.about-lead-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 20px;
  color: var(--gray-07);
}

.about-lead-more {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 16px;
  padding: 0;
  border-bottom: 2px solid var(--gray-04);
  font-size: 20px;
  color: var(--gray-07);
}

.about-lead-more:hover { border-bottom-color: var(--gray-07); }
.about-lead-more:hover .seta-svg-link { color: var(--gray-07); transform: translateX(4px); }

.about-lead-media {
  position: relative;
  grid-column: 7 / span 5;
  min-width: 0;
}

.about-lead-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  border-radius: 8px;
}

/* Seta da marca em cima da foto — via JS (script.js: initLocalArrow),
   entra em .is-active enquanto o mouse se move dentro de
   .about-lead-media; ao sair, some (.is-leaving) e a bola global volta a
   aparecer por cima. z-index simples (sem stacking context): não há nada
   mais na frente aqui pra disputar camada. */
.about-lead-arrow {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
  transition: transform .3s ease-out;
  /* Promove a seta pra sua própria camada de composição — sem isso, o
     drop-shadow do ícone força repaint a cada frame da animação/lag de
     posição, e isso competindo com o scroll é o que fazia ela engasgar. */
  will-change: transform;
}

.about-lead-arrow-inner {
  transform: translate(-50%, -50%) rotate(-45deg) scale(0);
  color: var(--orange-accent);
  opacity: 0;
  will-change: transform, opacity;
}

.about-lead-arrow-icon {
  display: block;
  width: clamp(60px, 10vw, 190px);
  height: auto;
}

.about-lead-arrow.is-active .about-lead-arrow-inner {
  animation: local-arrow-appear .6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.about-lead-arrow.is-leaving .about-lead-arrow-inner {
  animation: local-arrow-disappear .5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Cursor nativo some sobre a foto — só a seta local, igual já acontece
   nos cards com cursor customizado (.home-project-card etc., ver
   home.css/projetos.css/conteudo.css). Só com mouse de verdade. */
@media (pointer: fine) {
  .about-lead-media { cursor: none; }

  /* Mesma seta local também na hero e na foto do time (ver
     initLocalArrow em script.js). */
  .about-hero-media { cursor: none; }
  .about-team-media { cursor: none; }
}

/* ===== Pilares (Figma node 2466:179) ===== */
.about-pillars {
  padding: 80px 0;
}

.about-pillars-heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 56px;
}

.about-pillars-heading h2 { margin: 0; }

.about-pillars-title { max-width: 756px; }

.about-pillars-heading p {
  font-size: 20px;
  color: var(--gray-06);
}

.about-pillars-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  column-gap: var(--grid-gutter);
  row-gap: 48px;
}

.about-pillar-card {
  grid-column: span 4;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  background: var(--white);
  border-radius: 16px;
  padding: 24px 24px 48px;
  /* Mesma lógica de .about-structure-card (hover-lift próprio, mais rápido
     que o fade-in de entrada por scroll). */
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-pillar-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 32px rgba(35, 36, 40, 0.12);
}

.about-pillar-card:hover .about-pillar-title {
  color: var(--orange);
}

.about-pillar-image {
  width: 100%;
  aspect-ratio: 439 / 240;
  object-fit: cover;
  border-radius: 8px;
}

.about-pillar-title {
  padding: 0 24px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 24px;
  color: var(--gray-07);
  transition: color 0.3s ease;
}

.about-pillar-desc {
  padding: 0 24px;
  font-size: 20px;
  color: var(--gray-06);
}

/* ===== Processo (Figma node 2466:234) ===== */
.about-process {
  padding: 80px 0;
  display: flex;
  flex-direction: column;
}

.about-process-intro {
  display: flex;
  gap: var(--grid-gutter);
  margin-bottom: 80px;
}

.about-process-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  flex: 1;
}

.about-process-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.1;
  color: var(--gray-07);
}

.about-process-title-light { font-weight: 400; }

.about-process-cta {
  white-space: nowrap;
  padding: 12px 20px;
  background: var(--gray-07);
  color: var(--gray-01);
  transition: background-color 0.3s ease;
}

.about-process-cta:hover {
  background: var(--orange);
  opacity: 1;
}

.about-process-info {
  flex: 1;
  font-size: 20px;
  color: var(--gray-06);
}

/* Faixa com scroll horizontal (arrasta com o mouse ou touchpad/shift+wheel)
   — a barra abaixo (.about-process-progress) funciona como um scrollbar
   customizado, refletindo posição/proporção do scroll via JS
   (updateProcessProgress em script.js). */
/* overflow-x: auto força o eixo vertical a recortar também (não dá pra
   ter só um eixo com overflow visível) — sem esse respiro extra em
   padding (compensado por uma margin negativa igual, pra não alterar os
   80px/40px de espaçamento externo) a sombra do hover de .about-process-step
   ficava cortada em cima e embaixo. */
/* As setas ficam FORA de .about-process-scroll (vejam o HTML — são irmãs
   dele, dentro deste wrapper), como position:absolute comum. Já foi
   tentado deixá-las como filhas de .about-process-scroll com
   position:sticky (pra "grudar" na borda durante o scroll horizontal),
   mas isso trazia dois problemas reais: (1) o .reveal genérico anima
   transform no próprio elemento com overflow-x, o que recalculava o
   sticky a cada frame da transição de entrada; (2) mesmo com a posição
   estável, compartilhar a mesma célula de grid com .about-process-track
   (pra empilhar visualmente) fazia o texto das etapas roubar os eventos
   de clique/hover da seta por baixo — um bug de stacking real, confirmado
   via Playwright (elementFromPoint no centro da seta retornava
   .about-process-name). Como o wrapper não rola (só .about-process-scroll,
   por dentro, rola), a seta em position:absolute já fica "grudada" na
   borda visível sem precisar de sticky. */
.about-process-scroll-wrap {
  position: relative;
}

.about-process-scroll {
  position: relative;
  z-index: 0;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  padding: 16px 0 48px;
  margin: -16px 0 -8px;
  user-select: none;
}

.about-process-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 8px 16px rgba(35, 36, 40, 0.16);
  color: var(--gray-07);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.about-process-arrow:hover {
  background: var(--gray-07);
  color: var(--gray-01);
}

.about-process-arrow svg {
  width: 20px;
  height: auto;
}

.about-process-scroll-wrap:hover .about-process-arrow.can-scroll {
  opacity: 1;
  pointer-events: auto;
}

.about-process-arrow--left { left: 120px; }
.about-process-arrow--right { right: 120px; }

/* Cursor nativo (e a bola/.site-cursor) somem só em cima de cada etapa — o
   box com "Conheça o método" assume o lugar, igual aos cards de projeto/
   conteúdo (CURSOR_CARD_GROUPS em script.js). Nos vãos entre etapas o
   cursor de arrastar (.about-process-scroll) continua normal. Só com
   mouse de verdade. */
@media (pointer: fine) {
  .about-process-step {
    cursor: none;
  }
}

.about-process-scroll::-webkit-scrollbar { display: none; }

.about-process-scroll.is-dragging { cursor: grabbing; }

.about-process-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  padding: 0 var(--grid-margin);
}

.about-process-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 24px;
  border-radius: 10px;
}

.about-process-number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-variation-settings: "wdth" 100;
  font-size: 20px;
  color: var(--gray-07);
}

.about-process-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 48px;
  color: var(--gray-07);
  white-space: nowrap;
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-process-step:hover .about-process-name {
  transform: scale(1.1);
}

.about-process-progress {
  position: relative;
  height: 2px;
  border-radius: 2px;
  background: var(--gray-04);
  overflow: hidden;
}

.about-process-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 2px;
  background: var(--gray-07);
}

@media (max-width: 1440px) {
  .about-process-track { padding: 0 144px; }
}

@media (max-width: 1100px) {
  .about-pillars-title,
  .about-process-title {
    font-size: 32px;
  }
  .about-process-name { font-size: 36px; }
}

@media (max-width: 900px) {
  .about-pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .about-pillar-card { grid-column: span 1; }

  .about-process-intro {
    flex-direction: column;
    gap: 24px;
  }

  .about-process-track { padding: 0 40px; }
}

@media (max-width: 640px) {
  .about-pillars-title,
  .about-process-title {
    font-size: 24px;
  }

  .about-pillars-grid { grid-template-columns: 1fr; }
  .about-pillar-card { grid-column: span 1; }

  .about-process-name { font-size: 28px; }
  .about-process-track { padding: 0 20px; gap: 24px; }
}

/* ===== Vamos conversar (igual à seção da home, ver .home-talk em
   home.css — classes próprias porque este módulo não deve depender de
   home.css, mas o resultado visual é o mesmo) ===== */
.about-talk {
  background: var(--gray-07);
}

.about-talk-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
  align-items: flex-start;
  padding: 120px 0;
  border-bottom: 2px solid var(--gray-06);
}

.about-talk-content {
  grid-column: 1 / span 4;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  justify-content: center;
}

.about-talk-content h2 {
  font-size: 40px;
  line-height: 1.1;
  color: var(--gray-01);
}

.about-talk-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 32px;
}

.about-talk-lead {
  font-size: 20px;
  line-height: 1.5;
  color: var(--gray-01);
}

.about-talk-sub {
  font-size: 20px;
  line-height: 1.5;
  color: var(--gray-05);
  max-width: 578px;
}

.about-talk-whatsapp {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 16px;
  padding: 4px 0;
  border-bottom: 2px solid var(--gray-06);
  font-size: 20px;
  color: var(--gray-01);
}

.about-talk-whatsapp:hover {
  border-bottom: 2px solid var(--gray-01);
}

.about-talk-whatsapp:hover .seta-svg-link {
  color: var(--gray-01);
  transform: translateX(4px);
}

.about-talk-form {
  grid-column: 7 / span 5;
  min-width: 0;
}

.about-talk-form form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-talk .form-field { margin-bottom: 0; max-width: 570px; }
.about-talk .form-field label { color: var(--gray-01); }
.about-talk .form-submit { max-width: 570px; }
.about-talk .form-feedback { text-align: left; color: var(--gray-04); }
.about-talk .form-feedback.is-success { color: var(--orange); }

@media (max-width: 1100px) {
  .about-lead-content h2 {
    font-size: 30px;
  }

  .about-hero-title { font-size: 44px; }
}

@media (max-width: 900px) {
  /* Mesma lógica do comentário no início do arquivo: .page-hero cai pra
     padding-top:56px nesse breakpoint (componentes.css) — aqui é
     56 - 30 (altura do eyebrow). */
  .about-hero { padding: 26px 0 56px; }

  .about-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .about-hero-title,
  .about-hero-info { grid-column: 1 / -1; }

  .about-hero-media { margin-top: 56px; }

  .about-manifesto-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-word-card,
  .about-manifesto-text { grid-column: 1 / -1; }

  .about-team-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-team-content,
  .about-team-media { grid-column: 1 / -1; }

  .about-lead-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-lead-content,
  .about-lead-media { grid-column: 1 / -1; }
  .about-lead-media img { height: auto; aspect-ratio: 620 / 770; }
}

@media (max-width: 640px) {
  .about-hero-title { font-size: 28px; }
  .about-word-heading { font-size: 32px; }

  .about-team-content h2,
  .about-lead-content h2 {
    font-size: 24px;
  }
}