/* ==========================================================================
   CARDS — cards de copy, sprint cards (pilha sticky), lista de trabalhos,
   depoimentos e newsletter
   ========================================================================== */

/* --------------------------------------------------------------------------
   CARDS DE COPY (3 colunas) — hover escala e escurece os irmãos
   -------------------------------------------------------------------------- */
.card-grid_slot-wrapper {
  position: relative;
  width: 100%;
  padding: 1.5rem;
  border-bottom: 1px solid var(--swatch--shade-light-10);
}
.card-grid_slot {
  height: 100%;
  transition: transform 0.4s var(--ease--main);
  will-change: transform;
}
.card-grid_slot > * { transition: opacity 0.9s ease; }
.card-grid_slot:hover { transform: scale(1.025); }
body:has(.card-grid_slot:hover) .card-grid_slot:not(:hover) > * { opacity: 0.5; }

.copy-block.copy-card { padding-top: 5rem; }
.copy-card .heading { margin-bottom: var(--size--16px); }
.copy-card p { color: var(--swatch--shade-light-75); font-size: var(--paragraph-sm--font-size); }

@media screen and (max-width: 479px) {
  .card-grid_slot-wrapper { padding: 1.125rem; }
  .copy-block.copy-card { padding-top: 2rem; }
}

/* --------------------------------------------------------------------------
   SPRINT CARDS (com paralaxe 3D)
   -------------------------------------------------------------------------- */
/* Os cards empilham no scroll: cada um prende logo abaixo da nav e o
   seguinte sobe por cima. É o mesmo mecanismo do original — sticky puro,
   sem JS. Cards posicionados pintam na ordem do DOM, então o 3 cobre o 2
   que cobre o 1 naturalmente. */
.pricing-model-card {
  position: relative;
  /* Layout do shot: conteúdo à esquerda, mídia sangrando na metade
     direita até as bordas do card. Sem padding no card — quem tem
     padding é o corpo, senão a imagem não encosta na borda. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  align-items: stretch;
  width: 100%;
  padding: 0;
  min-height: 26rem;
  border-radius: var(--radius--lg);
  background-color: var(--card-base, var(--swatch--neutral-dark));
  border: 1px solid var(--swatch--shade-light-10);
  box-shadow: 0 1.5rem 4rem #01001b80;
  color: var(--swatch--neutral-light);
  overflow: hidden;
  isolation: isolate;
}

/* Véu que escurece o card conforme o próximo sobe por cima dele.
   A opacidade é dirigida por --stack-dim, que o GSAP anima no scroll. */
.pricing-model-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-color: var(--swatch--neutral-xxdark);
  opacity: var(--stack-dim, 0);
}

/* Só a partir do desktop: abaixo disso o card fica mais alto que a viewport
   e, preso no topo, a parte de baixo (bullets e botão) ficaria inalcançável. */
@media screen and (min-width: 992px) {
  .pricing-model-card {
    position: sticky;
    top: calc(var(--nav-height) + var(--size--16px));
  }
  /* Cada card prende um degrau ABAIXO do anterior. Com o mesmo `top` nos
     três eles param exatamente no mesmo lugar e se cobrem pixel a pixel:
     o de baixo desaparece por inteiro e a leitura vira "o card do meio
     travou", não "os cards estão empilhando". O degrau deixa a beirada
     do card anterior à mostra, que é o que faz a pilha ser pilha. */
  .pricing-model-card:nth-child(2) { top: calc(var(--nav-height) + var(--size--16px) + 1.5rem); }
  .pricing-model-card:nth-child(3) { top: calc(var(--nav-height) + var(--size--16px) + 3rem); }
  .pricing-model-card:nth-child(4) { top: calc(var(--nav-height) + var(--size--16px) + 4.5rem); }
}
.pricing-model-card_heading {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 0.875rem;
}
/* Sem marcador: cada item é uma linha separada por um filete no topo.
   É assim no original — lê como especificação, não como lista de recursos. */
.bullet_wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding-top: 1.125rem;
  padding-bottom: 1.125rem;
  /* a linha de cima do PRIMEIRO bullet encostava no subtítulo */
  border-top: 1px solid var(--swatch--shade-light-10);
}
.bullet_wrapper p {
  font-size: var(--paragraph-sm--font-size);
  color: var(--swatch--shade-light-75);
}

/* camadas do paralaxe */
/* véu removido: a mídia aparece na cor real, sem abafamento */
.perspective__el-0 {
  position: absolute;
  z-index: 5;
  width: 14.5em;
  object-fit: contain;
  object-position: 50% 100%;
}
.perspective__el-1 { position: absolute; z-index: 1; top: 1.5em; right: -0.5em; width: 6.5em; aspect-ratio: 1; object-fit: cover; }
.perspective__el-2 { position: absolute; z-index: 1; top: 1em; left: -0.5em; width: 7em; }
.perspective__el-3 { position: absolute; z-index: 1; bottom: 0.5em; left: -1em; width: 5.5em; aspect-ratio: 1; overflow: hidden; }
.perspective__el-0.is-ps { width: 9em; }
.perspective__el-1.is-ps { right: 0.5em; }
.perspective__el-2.is-ps { top: 3em; left: 0.5em; }
.perspective__el-3.is-ps { left: 1em; }

@media screen and (max-width: 991px) {
  .pricing-model-card { flex-flow: column; gap: 3rem; }
  .perspective__item { font-size: 16px; width: 100%; max-width: 24em; }
}
@media screen and (max-width: 479px) {
  .pricing-model-card { padding: 1.5rem; }
}

/* --------------------------------------------------------------------------
   WORK LIST — linhas + cursor-follower + tile direcional
   -------------------------------------------------------------------------- */
.preview-container { position: relative; }
.preview-list { width: 100%; }

.preview-item { width: 100%; transition: opacity 0.2s; }
.preview-item__inner {
  position: relative;
  display: flex;
  /* sem href o <a> não recebe o cursor de link automaticamente */
  cursor: pointer;
  width: 100%;
  border-bottom: 1px solid var(--swatch--shade-light-10);
  color: var(--swatch--neutral-light);
  text-decoration: none;
  overflow: hidden;
}
.preview-item__row {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 1.5rem;
  width: 100%;
}
.preview-item__col {
  display: flex;
  flex: 1;
  align-items: center;
  align-self: stretch;
  justify-content: space-between;
  gap: 1rem;
  padding: 2.5em;
  border-left: 1px solid var(--swatch--shade-light-10);
  border-right: 1px solid var(--swatch--shade-light-10);
}
.preview-item__col.is--first { border-left: 0; gap: 1rem; }
/* As duas etiquetas moram na MESMA coluna (a última) e são empurradas para
   as bordas dela — é isso que dá o afastamento que se vê na referência, não
   duas colunas diferentes. Medido lá: linha de 120px a 1400px de largura,
   colunas com 40px de padding, etiquetas em x=979 e x=1274. */
.preview-item__col.is--last { border-right: 0; justify-content: space-between; }
/* linha com uma etiqueta só (a de arquivo): ela vai para a borda direita,
   onde as outras linhas põem a segunda etiqueta */
.preview-item__col.is--last > .label:only-child { margin-left: auto; }
/* Piso de altura da linha: na referência quem define é a logo do cliente
   (36px) dentro da 1ª coluna. Sem esse piso a linha encolhe para ~109px. */
.preview-item__row { min-height: 7.7em; }

.preview-item_title { margin-bottom: 0; font-size: var(--heading-md--font-size); }
.preview-item_image { max-height: 1.6rem; width: auto; }

.label {
  padding: 0.375rem 0.5rem 0.3125rem;
  border: 1px solid var(--swatch--shade-light-10);
  border-radius: var(--radius--xs);
  font-family: var(--font--primary-family);
  font-size: var(--size--10px);
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--swatch--shade-light-75);
  white-space: nowrap;
}

/* tile que entra pelo lado de onde o mouse veio */
.directional-list__hover-tile {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  /* A camada de hover precisa se diferenciar do fundo escuro. */
  background-color: var(--swatch--surface-hover);
  transform: translate(0, 100%);
  transition: transform 0.4s var(--ease--main);
}

/* miniatura fonte, escondida — é clonada para dentro do follower */
.preview-item__visual {
  position: absolute;
  display: none;
  aspect-ratio: 1 / 1.25;
  width: 20em;
  overflow: hidden;
}
.preview-item__visual-img { width: 100%; height: 100%; object-fit: cover; }

.preview-follower {
  opacity: 0;
  transition: opacity 0.25s var(--ease--main);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1.25;
  width: 20em;
  border-radius: var(--radius--sm);
  pointer-events: none;
  overflow: hidden;
}
.preview-follower.is-visible { opacity: 1; }

.preview-follower__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.preview-follower__inner [data-follower-visual] { position: absolute; inset: 0; display: block; }
.preview-follower__label { position: absolute; z-index: 3; }
.preview-follower__label-span {
  padding: 0.5em 0.75em;
  border: 1px solid var(--swatch--primary-accent);
  border-radius: 0.25em;
  background-color: var(--swatch--neutral-xxdark);
  color: var(--swatch--primary-accent);
  font-family: var(--font--primary-family);
  font-size: 0.75em;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@media screen and (max-width: 991px) {
  .preview-item__col.is--center, .preview-follower { display: none; }
  .preview-item__col { padding: 1.5em; }
  .preview-item__row { min-height: 5.5em; }
  .preview-item_title { font-size: var(--heading-sm--font-size); }
}
@media screen and (max-width: 479px) {
  .preview-item__col { padding: 1em; }
  .preview-item__row { min-height: 0; }
  .preview-item__col.is--last { flex-flow: column; align-items: flex-end; }
}

/* --------------------------------------------------------------------------
   DEPOIMENTOS (Swiper + cards em formato de chat)
   -------------------------------------------------------------------------- */
.tst-slider_component { position: relative; }
.swiper.is-testimonial { overflow: visible; cursor: grab; }
.swiper.is-testimonial:active { cursor: grabbing; }
.swiper-slide.is-testimonial { height: auto; }

/* ---------- CARD DE DEPOIMENTO ------------------------------------------
   Formato de card de avaliação (o do Google): cabeçalho com foto, nome e
   função, a régua de estrelas logo abaixo e o texto por último. A pele é
   a da ECOSS — creme, navy, mono nas metainformações, o mesmo raio e a
   mesma borda dos outros cards do site.

   As estrelas são NAVY, não âmbar. Medido sobre o creme do card: o âmbar
   do Google (#fbbc04) dá 1.5:1 e some; o lima dá 1.02:1 e some mais
   ainda. O navy dá 18:1. É a leitura de "nota" que importa, não o tom. */
.tst-card {
  display: flex;
  flex-flow: column;
  height: 100%;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border-radius: var(--radius--sm);
  background-color: #ffffff;
  border: 1px solid rgba(1, 0, 27, 0.10);
  box-shadow: 0 0.5rem 1.5rem rgba(1, 0, 27, 0.06);
  color: var(--swatch--brand-navy);
}

.tst-card__head { display: flex; align-items: center; gap: 0.75rem; }
.tst-card__avatar {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
}
.tst-card__meta { display: flex; flex-flow: column; min-width: 0; }
.tst-card__name {
  font-family: var(--font--secondary-family);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--swatch--brand-navy);
}
.tst-card__role {
  margin-top: 0.125rem;
  /* mono nas metainformações: é a assinatura tipográfica da ECOSS e o que
     impede o card de virar um clone genérico de avaliação */
  font-family: var(--font--primary-family);
  font-size: var(--size--10px);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(1, 0, 27, 0.55);
}

.tst-card__rating { display: flex; gap: 0.125rem; margin: 1rem 0 0.75rem; }
.tst-star {
  width: 0.9375rem;
  height: 0.9375rem;
  fill: var(--swatch--brand-navy);
}

.tst-card__quote {
  margin: 0;
  font-size: var(--size--14px);
  line-height: 1.62;
  color: rgba(1, 0, 27, 0.78);
}

/* cursor custom "clique e arraste" */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 0.5rem 0.625rem 0.4375rem;
  border-radius: var(--radius--xs);
  background-color: var(--swatch--primary-accent);
  color: var(--swatch--brand-navy);
  font-family: var(--font--primary-family);
  font-size: var(--size--10px);
  line-height: var(--line-height--sm);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.cursor-paragraph { margin: 0; color: inherit; font-family: inherit; font-weight: 500; }

/* --------------------------------------------------------------------------
   NEWSLETTER
   -------------------------------------------------------------------------- */
.newsletter-form { display: flex; gap: 0.5rem; width: 100%; max-width: 22rem; }
.newsletter-input {
  flex: 1;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--swatch--shade-light-10);
  border-radius: var(--radius--xs);
  background-color: var(--swatch--shade-light-5);
  color: var(--swatch--neutral-light);
  font-family: var(--font--primary-family);
  font-size: var(--size--12px);
}
.newsletter-input::placeholder { color: var(--swatch--shade-light-55); }
.newsletter-input:focus { outline: none; border-color: var(--swatch--primary-accent); }
.newsletter-note { margin-top: 0.75rem; font-size: var(--size--10px); color: var(--swatch--shade-light-55); }


/* --------------------------------------------------------------------------
   Profundidade das camadas do paralaxe 3D.
   O contêiner abre um espaço 3D; cada camada é empurrada em Z uma distância
   diferente, então elas se deslocam em velocidades distintas ao girar.
   -------------------------------------------------------------------------- */
[data-3d-hover-target] {
  transform-style: preserve-3d;
  will-change: transform;
}
[data-3d-hover-inner] { transform-style: preserve-3d; }
[data-3d-hover-inner="layer-1"] { transform: translateZ(3vw); }
[data-3d-hover-inner="layer-2"] { transform: translateZ(5vw); }
[data-3d-hover-inner="layer-3"] { transform: translateZ(6vw); }
[data-3d-hover-inner="layer-4"] { transform: translateZ(8vw); }

@media screen and (max-width: 991px) {
  /* em tela pequena o Z faz as camadas estourarem o card */
  [data-3d-hover-inner] { transform: none; }
}

/* --------------------------------------------------------------------------
   CONTEXTO CLARO — o par de cada regra que hoje só existe no escuro.
   As linhas viram tinta navy; o hover vira véu de tinta.
   -------------------------------------------------------------------------- */
[background-color="light"] .preview-item__inner { border-bottom-color: var(--swatch--shade-xdark-10); color: var(--swatch--brand-navy); }
[background-color="light"] .preview-item__col { border-left-color: var(--swatch--shade-xdark-10); border-right-color: var(--swatch--shade-xdark-10); }
[background-color="light"] .card-grid_slot-wrapper { border-color: var(--swatch--shade-xdark-10); }

/* ==========================================================================
   STICKY STACKING CARDS (4 FASES DO SPRINT)
   ========================================================================== */
.sticky-cards_content-wrapper {
  position: sticky;
  top: calc(50vh - 8rem);
  height: max-content;
}

.sticky-cards_card-wrapper {
  display: flex;
  flex-flow: column;
  gap: 1.5rem;
}

.sticky-card {
  position: sticky;
  top: calc(var(--nav-height, 5rem) + 1.5rem);
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  min-height: 26.25rem;
  padding: 2.5rem;
  background-color: var(--swatch--neutral-xdark);
  border-radius: var(--radius--sm);
  border: 1px solid var(--swatch--shade-light-10);
  box-shadow: 0 1rem 3rem rgba(0,0,0,0.4);
  color: var(--swatch--neutral-light);
  overflow: hidden;
}

.sticky-card.is-ltyellow {
  background-color: var(--swatch--primary-ltyellow);
  color: var(--swatch--neutral-xdark);
  border-color: transparent;
}

.sticky-card_label-wrapper {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
}

.sticky-card_content {
  position: relative;
  z-index: 5;
}

.sticky-card_bg-grid {
  position: absolute;
  inset: 0%;
  display: flex;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sticky-card_bg-grid .cta-col,
.sticky-card_bg-grid .cta-gutter {
  border-right: 1px solid var(--swatch--shade-light-5);
  height: 100%;
  flex: 1 1 0;
}

.sticky-card_bg-grid .cta-col.is-ltyellow,
.sticky-card_bg-grid .cta-gutter.is-ltyellow {
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}

@media screen and (max-width: 991px) {
  .sticky-cards_content-wrapper {
    position: static;
  }
  .sticky-card {
    position: static;
    min-height: 0;
    padding: 2rem 1.5rem;
  }
}

/* ==========================================================================
   SPLIT PRICING / O QUE ESTÁ INCLUSO
   ========================================================================== */
.split-pricing_wrapper {
  display: flex;
  justify-content: space-between;
  border-radius: var(--radius--sm);
  background-color: var(--swatch--neutral-xxdark);
  border: 1px solid var(--swatch--shade-light-10);
  overflow: hidden;
}

.split-pricing_image {
  width: 50%;
  object-fit: cover;
  min-height: 30rem;
}

.split-pricing_content {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 50%;
  min-height: 26.25rem;
  padding: 3rem;
  gap: 2rem;
}

.pricing-card_list {
  display: flex;
  flex-flow: column;
  gap: 1rem;
}

.pricing-card_list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--swatch--shade-light-75);
  line-height: 1.5;
}

.pricing-card_list-item::before {
  content: "•";
  color: var(--swatch--primary-pink);
  font-size: 1.25rem;
  line-height: 1;
}

.pricing-card_btn-slot {
  margin-top: 1rem;
}

@media screen and (max-width: 991px) {
  .split-pricing_wrapper {
    flex-flow: column;
  }
  .split-pricing_image {
    width: 100%;
    height: 18rem;
    min-height: 0;
  }
  .split-pricing_content {
    width: 100%;
    padding: 2rem 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   STACK CARD — corpo do card no layout do shot de referência
   -------------------------------------------------------------------------- */
.stack-card__body {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(1.75rem, 3vw, 3rem);
}
/* título grande alinhado à DIREITA da coluna, como no shot */
.stack-card__title {
  margin: 0;
  text-align: right;
  font-size: clamp(1.75rem, 3.2vw, 3.25rem);
  line-height: 1.05;
}
.stack-card__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.stack-card__desc {
  margin: 0;
  max-width: 34ch;
  font-size: var(--paragraph-sm--font-size);
  line-height: 1.6;
  color: var(--swatch--shade-light-75);
}
/* lista alinhada à direita, sem marcador — é a assinatura do layout */
.stack-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: column;
  gap: 0.625rem;
  text-align: right;
}
.stack-card__list li {
  font-size: var(--size--12px);
  line-height: 1.4;
  color: var(--swatch--shade-light-75);
  white-space: nowrap;
}
.stack-card__media { position: relative; overflow: hidden; }
.stack-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 991px) {
  .pricing-model-card { grid-template-columns: 1fr; min-height: 0; }
  /* No celular o card empilha (conteúdo em cima, mídia embaixo) e a
     mídia ficava numa faixa baixa demais para a peça se ler. */
  .stack-card__media { min-height: 22rem; }
  .stack-card__title { text-align: left; }
  .stack-card__cols { grid-template-columns: 1fr; }
  .stack-card__list { text-align: left; }
  .stack-card__list li { white-space: normal; }
}

/* corpo do card: o padding mora aqui, porque o card em si é grid sem
   padding — é o que deixa a mídia sangrar até a borda */
.pricing-model-card_content-wrapper {
  padding: clamp(1.75rem, 3vw, 3rem);
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  gap: clamp(1.25rem, 2.2vw, 2.5rem);
  min-width: 0;
}
.pricing-model-card_content-wrapper h4[heading] {
  max-width: 24ch;
  margin-bottom: 1.75rem;
  font-size: clamp(1.375rem, 1.8vw, 2.125rem);
  line-height: 1.15;
}

/* --------------------------------------------------------------------------
   CARD-MAIN — grade de produtos próprios (página de trabalhos)
   Classes espelhadas da referência: .card-main envolve o link invisível que
   cobre o card inteiro, a imagem e o bloco de conteúdo.
   -------------------------------------------------------------------------- */
.section-empty_slot.col-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.625rem;
  width: 100%;
}
.card-grid_slot { height: 100%; }

/* Mesmo vidro creme dos cards de sprint da home: são a mesma família de
   card e estavam em cores diferentes. A película é a mesma 0.89 — abaixo
   disso o navy da página sobe e o creme vira cinza. */
.card-main {
  position: relative;
  display: flex;
  flex-flow: column;
  height: 100%;
  border-radius: var(--radius--sm);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background-color: rgba(238, 241, 234, 0.89);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  backdrop-filter: blur(24px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8),
              0 1.5rem 4rem rgba(1, 0, 27, 0.42);
  color: var(--swatch--brand-navy);
  overflow: hidden;
  transition: border-color 0.35s var(--ease--main), transform 0.35s var(--ease--main);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card-main { background-color: var(--swatch--neutral-cream); }
}
/* sobre creme o texto claro some */
.card-main .heading { color: var(--swatch--brand-navy); }
/* lima sobre creme dá 1:1 — a borda de hover vira navy */
.card-main:hover { border-color: var(--swatch--brand-navy); transform: translateY(-4px); }

/* link invisível cobrindo o card: a área clicável é o card todo */
.card-link { position: absolute; inset: 0; z-index: 3; }

.card-main_img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.card-main_content {
  display: flex;
  flex-flow: column;
  gap: 0.625rem;
  padding: 1.75rem;
}
.card-main_heading-wrapper .heading { margin: 0; }
.card-main_text { margin: 0; line-height: 1.6; color: rgba(1, 0, 27, 0.72); }
/* trunca em 3 linhas, como o .truncate-sm da referência */
.truncate-sm {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* linhas de topo e base da grade de seção (a ref usa nas seções de miolo) */
.bottom-line, .top-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--swatch--shade-light-10);
}
.top-line { top: 0; }
.bottom-line { bottom: 0; }

/* Gradiente do hero da página de trabalhos: preto no topo descendo até o
   fundo da página. O fim tem de ser EXATAMENTE xxdark — é a cor da seção
   seguinte, e qualquer outro valor deixa uma emenda visível na junção. */
.brand-xdark-gradient {
  background-image: linear-gradient(180deg, #000 0%, var(--swatch--neutral-xxdark) 100%);
}

@media screen and (max-width: 991px) {
  .section-empty_slot.col-3 { grid-template-columns: 1fr; gap: 1rem; }
}