/* =========================================================
   SOBRE NÓS
   ========================================================= */

/* --- Hero: arte de fundo (assets/img/bg-sobre-nos.png) --- */
/* A arte já traz a constelação e o degradê — nada de gradiente por CSS aqui. */
.sobre-hero {
  margin: 0 2rem;
  border-radius: 2rem;
  min-height: 42vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: url("../assets/img/bg-sobre-nos.png") no-repeat center / cover;
  position: relative;
  overflow: hidden;
}

.sobre-hero-inner {
  position: relative;
  z-index: 1;
  padding: 3rem;
}

.sobre-hero h1 {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.05;
  color: var(--blue-700);
  margin: 0;
}

/* --- Linha do tempo --- */
.sobre-timeline {
  padding: 4rem 0;
}

/* Duas colunas: linha do tempo à esquerda, conteúdo do ano ativo à direita. */
.timeline-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding-top: 0;
}

/* --- Coluna da linha do tempo --- */
/* Coluna = janela recortada + as duas setas circulares (fora da janela, na
   mesma vertical da linha). O padding vertical reserva o espaço delas. */
.timeline-col {
  position: relative;
  padding-block: 3.5rem;
}

/* Janela: mostra só 4 itens (altura definida no JS, que mede os itens reais).
   É um container rolável de verdade (com a barra escondida) — em `overflow:
   hidden` o navegador ignora o scroll suave das setas. */
.timeline-viewport {
  overflow-y: auto;
  overscroll-behavior: contain; /* ao chegar no fim, não "puxa" a página junto */
  scrollbar-width: none; /* Firefox */
}
.timeline-viewport::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Setas circulares: aparecem/somem (atributo hidden no JS) conforme sobrar
   conteúdo acima/abaixo. Centradas na linha vertical. */
.tl-scroll {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #2490ac;
  color: #fff;
  cursor: pointer;
  z-index: 2;
}
.tl-scroll[hidden] {
  display: none; /* o display:flex acima venceria o hidden padrão */
}
.tl-scroll-up {
  top: 0;
}
.tl-scroll-down {
  bottom: 0;
}

.timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 2rem 0;
  /* Linha vertical central (desenhada como fundo). */
  background-image: linear-gradient(#cfdbe4, #cfdbe4);
  background-size: 1px 100%;
  background-position: 50% 0;
  background-repeat: no-repeat;
}
/* Bolinhas nas pontas da linha vertical (topo e base). */
.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cfdbe4;
  transform: translateX(-50%);
}
.timeline::before {
  top: 0;
}
.timeline::after {
  bottom: -4px;
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 120px;
}

/* Nó (dot) na ponta do conector, perto do ano. */
.tl-dot {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #8dbed1;
  z-index: 2;
}

/* Conector do dot até o ano (barra 3px, pontas arredondadas). */
.tl-connector {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 3px;
  width: 2.5rem;
  border-radius: 3px; /* pontas arredondadas */
  background: #8dbed1; /* inativo */
}

/* Ano (botão clicável). */
/* Demais anos (inativos): Regular 32px. */
.tl-year {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-primary); /* Hubot Sans */
  font-stretch: expanded; /* Hubot Sans Expanded */
  font-weight: 400; /* Regular */
  font-size: 32px;
  line-height: 1; /* 100% */
  letter-spacing: 0;
  color: #234e64;
  transition: font-size 0.2s ease;
}

/* Ímpares: ano à DIREITA da linha; pares: à ESQUERDA. */
.tl-item:nth-child(odd) .tl-year {
  grid-column: 2;
  justify-self: start;
  text-align: left;
  padding-left: 4rem;
}
.tl-item:nth-child(odd) .tl-connector {
  left: 50%;
}
.tl-item:nth-child(odd) .tl-dot {
  left: calc(50% + 2.5rem);
  transform: translate(-50%, -50%);
}
.tl-item:nth-child(even) .tl-year {
  grid-column: 1;
  justify-self: end;
  text-align: right;
  padding-right: 4rem;
}
.tl-item:nth-child(even) .tl-connector {
  right: 50%;
}
.tl-item:nth-child(even) .tl-dot {
  right: calc(50% + 2.5rem);
  transform: translate(50%, -50%);
}

/* Ano ativo: Light 44px (destaque) + dot preenchido com anel. */
.tl-item.is-active .tl-year {
  font-weight: 300; /* Light */
  font-size: 44px;
  color: #234e64;
}
.tl-item.is-active .tl-connector {
  background: #234e64; /* ativo */
}
.tl-item.is-active .tl-dot {
  background: var(--dark-blue-900);
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px #2b6a86;
}

/* --- Coluna do conteúdo (transição suave entre anos) --- */
.tl-panels {
  position: relative;
}
.tl-content {
  transition: opacity 0.35s ease;
}
.tl-content:not(.is-active) {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tl-content.is-active {
  opacity: 1;
  visibility: visible;
  position: relative;
}

.tl-content h3 {
  font-weight: 300;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.1;
  color: var(--blue-700);
  margin: 0 0 1.5rem;
}

.tl-content p {
  color: var(--gray-400);
  line-height: 1.7;
  max-width: 60ch;
  margin: 0;
}

/* Setas de navegação. */
.timeline-nav {
  display: flex;
  gap: 0.5rem;
  margin-top: 2.5rem;
}
/* Botões: estilo compartilhado em .nav-arrow (style.css). */

/* A seção "Vem ser Doogies" (.vem-ser) saiu daqui: virou compartilhada em
   css/vem-ser.css, porque agora também é usada na página Tutor. */

/* =========================================================
   CONHEÇA NOSSA EQUIPE — carrossel de depoimentos (1 por vez)
   ========================================================= */
.equipe {
  padding: 2rem 0 6rem;
}

/* Card branco arredondado com sombra suave e brilhos ao fundo. */
.equipe-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 2.5rem;
  box-shadow: 0 0 29.4px 0 rgba(46, 97, 133, 0.2);
  padding: 3.5rem clamp(2rem, 5vw, 4.5rem);
}
/* Brilho rosado à esquerda e azulado à direita (como no layout). */
.equipe-card::before,
.equipe-card::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.equipe-card::before {
  top: -15px;
  left: -25px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(224, 176, 196, 0.35), transparent 70%);
}
.equipe-card::after {
  bottom: -15%;
  right: 15%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(141, 190, 209, 0.3), transparent 70%);
}

.equipe-card h2 {
  position: relative;
  z-index: 1;
  font-weight: 300; /* Light */
  font-size: 52px;
  line-height: 1; /* 100% */
  letter-spacing: 0;
  text-align: left;
  color: #234e64;
  margin: 0 0 2.5rem;
}

/* --- Componente team-carousel --- */
team-carousel {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0 3.5rem; /* espaço lateral para as setas */
}

.team-viewport {
  overflow: hidden;
}
.team-track {
  display: flex;
  transition: transform 0.5s ease;
}
.team-slide {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 3rem;
}

.team-avatar {
  flex: none;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  overflow: hidden;
  background: #cfe0e8;
}
.team-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-quote {
  font-family: var(--font-primary); /* Hubot Sans */
  font-stretch: expanded; /* Hubot Sans Expanded */
  font-weight: 400; /* Regular */
  font-size: 16px;
  line-height: 1; /* 100% */
  letter-spacing: 0;
  color: #4a5565;
  margin: 0 0 1.5rem;
}
.team-author {
  font-family: var(--font-primary); /* Hubot Sans */
  font-stretch: expanded; /* Hubot Sans Expanded */
  font-weight: 400; /* Regular */
  font-size: 24px;
  line-height: 1; /* 100% */
  letter-spacing: 0;
  color: #256c87;
  margin: 0;
}

/* Setas laterais (sem borda, estilo chevron simples). */
.team-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: none;
  background: transparent;
  color: #8dbed1;
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.team-arrow:hover:not(:disabled) {
  color: #2490ac;
}
.team-prev {
  left: 0;
}
.team-next {
  right: 0;
}
.team-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* =========================================================
   ACRÔNIMO DOOGIES — cada letra vira uma palavra
   ========================================================= */
.acronimo {
  padding: 4rem 0 6rem;
  text-align: center;
}

.acronimo-title {
  font-weight: 300; /* Light */
  font-size: 82px;
  line-height: 0.97; /* 97% */
  letter-spacing: 0.2em;
  text-align: center;
  color: #256c87;
  text-shadow: 0 0 29.4px rgba(46, 97, 133, 0.2);
  margin: 0 0 1.5rem;
}

/* Linha de legenda: palavras separadas por conectores finos. */
.acronimo-legenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.acronimo-legenda li {
  display: flex;
  align-items: center;
  font-family: var(--font-base); /* Inter */
  font-weight: 400; /* Regular (só a inicial é Bold) */
  font-size: 12px;
  line-height: 1.2; /* 120% */
  letter-spacing: 0;
  text-align: center;
  color: #132436;
  text-shadow: 0 0 29.4px rgba(46, 97, 133, 0.2);
  white-space: nowrap;
}
/* Inicial em destaque (a letra que compõe DOOGIES). */
.acronimo-legenda strong {
  font-weight: 700; /* Bold */
  color: inherit;
}
/* Conector entre as palavras (não aparece após a última). */
.acronimo-legenda li:not(:last-child)::after {
  content: "";
  width: 2.5rem;
  height: 0;
  border-top: 1px solid #dbdbdb;
  margin: 0 1rem;
}

/* =========================================================
   NOSSO MANIFESTO — imagem à esquerda, texto à direita
   ========================================================= */
.manifesto {
  background: var(--dark-blue-900); /* #132436 */
}

.manifesto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.manifesto-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.manifesto-texto {
  align-self: center;
  padding: clamp(2rem, 5vw, 4.5rem);
}

.manifesto-texto h2 {
  font-weight: 300; /* Light */
  font-size: 44px;
  line-height: 1; /* 100% */
  letter-spacing: 0;
  color: #faf1f3;
  margin: 0 0 1.75rem;
}

.manifesto-texto p {
  font-family: var(--font-base); /* Inter */
  font-weight: 400; /* Regular */
  font-size: 14px;
  line-height: 1.4; /* 140% */
  letter-spacing: 0;
  color: #fafbfc;
  margin: 0;
  max-width: 60ch;
}

/* Manifesto e Comunidade são ambas escuras: sem faixa branca entre elas. */
.manifesto + .comunidade {
  margin-top: 0;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 768px) {
  .sobre-hero {
    margin: 0 1rem;
    border-radius: 1rem;
    min-height: 32vh;
  }

  .timeline-layout {
    grid-template-columns: 1fr;
  }

  .tl-year {
    font-size: 2rem;
  }

  team-carousel {
    padding: 0 1.5rem;
  }
  .team-slide {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
  .team-avatar {
    width: 140px;
    height: 140px;
  }
  .team-arrow svg {
    width: 22px;
    height: 38.8px;
  }

  /* Palavras empilham; some com os conectores horizontais. */
  .acronimo-legenda {
    gap: 0.5rem 1.5rem;
  }
  .acronimo-legenda li:not(:last-child)::after {
    display: none;
  }

  .manifesto-grid {
    grid-template-columns: 1fr;
  }
  .manifesto-foto img {
    height: 260px;
  }
}

/* ---------------------------------------------------------
   CONTEÚDO — foto + texto (mesma seção da página Tutor, portada)
   --------------------------------------------------------- */
.sobre-conteudo-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: center;
}

/* A arte já vem com o canto arredondado embutido — sem object-fit. */
.sobre-conteudo-media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

.sobre-conteudo-text h2 {
  font-weight: 300; /* Light */
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: normal;
  color: var(--blue-700);
  margin: 0 0 1.5rem;
}

.sobre-conteudo-text p {
  color: var(--gray-400);
  line-height: 1.6;
  margin: 0 0 2rem;
  max-width: 52ch;
}

@media (max-width: 1024px) {
  .sobre-conteudo-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ---------------------------------------------------------
   CRENÇA — painel azul-claro: título grande + texto (2 colunas)
   --------------------------------------------------------- */
.sobre-crenca {
  padding: 2rem 0 0; /* sem padding-bottom: cola na seção de baixo (rede) */
}

/* O .wrapper global tem padding: 2.5rem — zeramos só o de baixo aqui, senão
   sobra respiro entre a crença e a rede. */
.sobre-crenca .wrapper {
  padding-bottom: 0;
}

.sobre-crenca-panel {
  display: grid;
  /* Figma: titulo 60% x texto 40% (1.5fr/1fr divide o espaco util nessa razao,
     ja descontado o gap — usar 60%/40% direto estouraria a largura). */
  grid-template-columns: 1.5fr 1fr;
  gap: 3rem 4rem;
  align-items: start;
  padding: clamp(2rem, 5vw, 4.5rem);
  border-radius: 2rem 2rem 0 0; /* cantos de baixo retos */
  background-color: #c8dbe6; /* azul-claro do painel */
}

/* Spec: Hubot Sans Expanded Light 44px/100%, letter-spacing 0, #234E64. */
.sobre-crenca-titulo {
  margin: 0;
  font-family: var(--font-primary); /* Hubot Sans */
  font-stretch: expanded; /* Hubot Sans Expanded */
  font-weight: 300; /* Light */
  font-size: 44px;
  line-height: normal;
  letter-spacing: 0;
  color: var(--blue-700); /* #234E64 */
}

.sobre-crenca-texto {
  align-self: center;
}

/* Spec: Inter Regular 14/140%, letter-spacing 0, #6A7282. */
.sobre-crenca-texto p {
  font-family: var(--font-base); /* Inter */
  font-weight: 400; /* Regular */
  font-size: 14px;
  line-height: 1.4; /* 140% */
  letter-spacing: 0;
  color: var(--gray-400); /* #6A7282 */
  margin: 0 0 1.25rem;
}

/* Só a última frase é bold. Seletor mais específico que `.sobre-crenca-texto p`
   (senão o peso 400 de lá venceria por especificidade). */
.sobre-crenca-texto .sobre-crenca-fecho {
  font-weight: 700; /* Bold */
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .sobre-crenca-panel {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ---------------------------------------------------------
   BOAS-VINDAS — caixa (ref. equipe-card) sobre linhas de fundo
   --------------------------------------------------------- */
.sobre-boas-vindas {
  position: relative;
  padding: 4rem 0 6rem;
  overflow: hidden; /* recorta as linhas que sangram para fora */
}

/* Linhas decorativas coladas na borda esquerda, por baixo da caixa
   (assets/img/sobre-linhas.png). A arte é branca (invisível sobre o fundo
   branco da página), então ela entra como MÁSCARA e a cor vem do
   background-color — assim o detalhe aparece em azul-claro. */
.sobre-boas-vindas-linhas {
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  width: clamp(180px, 20vw, 260px);
  aspect-ratio: 233 / 383; /* proporção original do PNG */
  z-index: 0;
  pointer-events: none;
  background-color: #8dbed1;
  -webkit-mask: url(../assets/img/sobre-linhas.png) no-repeat left center / contain;
  mask: url(../assets/img/sobre-linhas.png) no-repeat left center / contain;
}

/* Caixa branca com sombra e brilhos suaves — mesmo padrão do .equipe-card. */
.boas-vindas-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: #fff;
  border-radius: 2.5rem;
  box-shadow: 0 0 29.4px 0 rgba(46, 97, 133, 0.2);
  padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 6vw, 6rem);
  text-align: center;
}

.boas-vindas-card::before,
.boas-vindas-card::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.boas-vindas-card::before {
  top: -40px;
  left: -30px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(224, 176, 196, 0.35), transparent 70%);
}
.boas-vindas-card::after {
  bottom: -40px;
  right: 8%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(141, 190, 209, 0.32), transparent 70%);
}

/* Conteúdo acima dos brilhos. */
.boas-vindas-lead,
.boas-vindas-titulo {
  position: relative;
  z-index: 1;
}

.boas-vindas-lead {
  max-width: 100ch;
  margin: 0 auto 2rem;
  color: var(--gray-400);
  font-size: 13px;
  line-height: 1.5;
}

.boas-vindas-titulo {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 300; /* Light */
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.2;
  color: var(--blue-700);
}

/* Título da linha do tempo ("Nossa trajetória"). */
.sobre-timeline-titulo {
  margin: 0;
  text-align: center;
  font-family: var(--font-primary);
  font-weight: 300; /* Light */
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.1;
  color: var(--blue-700);
}

/* ---------------------------------------------------------
   REDE — caixa azul-escura: 3 cards (foto+ícone+legenda) + fecho
   --------------------------------------------------------- */
.sobre-rede {
  padding: 0; /* full-bleed: sem respiro; a caixa cola nas laterais e no topo */
}

/* Caixa full-width (colada nas laterais), sem border-radius. O respiro
   horizontal do conteúdo vem do .wrapper interno; aqui só o vertical. */
.sobre-rede-caixa {
  padding-block: clamp(3rem, 6vw, 5rem);
  background-color: var(--dark-blue-900); /* #132436 */
}

/* O wrapper irmão dos cards (conector + ícone + título) herda padding: 2.5rem
   do .wrapper global; aqui zeramos só o vertical. */
.sobre-rede-caixa > .wrapper {
  padding-block: 0;
}

/* Grade estática com os 4 cards. O padding lateral (igual dos dois lados)
   alinha a faixa com o TEXTO da seção de cima (crença): margem do .wrapper +
   padding interno do painel. */
.sobre-rede-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start; /* sem esticar: a altura vem do aspect-ratio do card */
  gap: 1.5rem;
  padding-inline:
    calc(
      max(2.5rem, (100% - 90rem) / 2 + 2.5rem) /* margem do .wrapper */
        + clamp(2rem, 5vw, 4.5rem) /* padding do .sobre-crenca-panel */
    );
  padding-bottom: 150px; /* cabe a linha + bolinha que saem embaixo do card */
}

.sobre-rede-card {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 2; /* card retrato: altura = 2x a largura */
  /* SEM overflow: hidden — a linha do conector sai pra fora, embaixo do card.
     O arredondamento vai na foto e no conteúdo. */
}

.sobre-rede-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  object-fit: cover;
}

/* Escurecido da foto (p/ legibilidade) + cantos arredondados. */
.sobre-rede-card-conteudo {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 1rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(19, 36, 54, 0.35), rgba(19, 36, 54, 0.78));
}

/* Linha do conector + bolinha na ponta (#234E64). Ancorada na LEGENDA (que fica
   por cima da imagem): começa ~32px abaixo dela e sai pra fora embaixo do card.
   Linha (1px) + bolinha (8px) desenhadas no background do mesmo pseudo. */
.sobre-rede-card figcaption {
  position: relative;
}
.sobre-rede-card figcaption::after {
  content: "";
  position: absolute;
  top: calc(100% + 32px);
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 180px;
  pointer-events: none;
  background:
    linear-gradient(var(--blue-700), var(--blue-700)) no-repeat 50% 0 / 1px 100%,
    radial-gradient(circle 4px at 50% 50%, var(--blue-700) 4px, transparent 4px) no-repeat
      50% 100% / 8px 8px;
}

.sobre-rede-icone {
  width: 3rem;
  height: 3rem;
}

/* Spec: Hubot Sans Expanded Regular 24/100%, letter-spacing 0, #C0DAE5, centrado. */
.sobre-rede-card figcaption {
  max-width: 14ch;
  font-family: var(--font-primary); /* Hubot Sans */
  font-stretch: expanded; /* Hubot Sans Expanded */
  font-weight: 400; /* Regular */
  font-size: 22px;
  letter-spacing: 0;
  text-align: center;
  color: #c0dae5;
}


/* Spec: Hubot Sans Expanded Light 52/100%, letter-spacing 0, #2490AC, centrado. */
/* Ícone centralizado acima do título de fecho (SVG de mesmo nome da classe:
   assets/icon/sobre-rede-icone-titulo.svg). */
.sobre-rede-icone-titulo {
  display: block;
  width: 8rem;
  height: auto;
  margin: 0 auto 1.5rem;
}

.sobre-rede-titulo {
  margin: 0;
  text-align: center;
  font-family: var(--font-primary);
  font-stretch: expanded;
  font-weight: 300; /* Light */
  font-size: 52px;
  line-height: 1; /* 100% */
  letter-spacing: 0;
  color: #2490ac;
}

/* Grade estática: 4 colunas no desktop, 2 no tablet, 1 no celular.
   Empilhado, a linha do conector (que desce 180px) bateria nos cards da fileira
   de baixo — então ela some e o respiro extra embaixo da faixa deixa de existir. */
@media (max-width: 1024px) {
  .sobre-rede-cards {
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: clamp(2rem, 5vw, 3rem);
  }

  .sobre-rede-card figcaption::after {
    display: none;
  }
}

@media (max-width: 600px) {
  .sobre-rede-cards {
    grid-template-columns: 1fr;
  }
}