/* Seções do portfólio (comuns às três propostas). As fontes vêm de cada proposta (--fonte-titulo/--fonte-texto),
   então o mesmo conteúdo ganha a cara de cada uma. Linguagem da referência: título gigante apagado ao fundo,
   rótulo pequeno com barra, lista que abre e fecha em cartões, números em volta da foto, cartões com pílula e seta. */

.sec {
  padding: var(--e9) clamp(var(--e4), 6vw, var(--e9));
}

/* Cabeçalho de seção: palavra gigante sumindo para baixo + o título de verdade, pequeno, à direita */
.sec__cabeca {
  position: relative;
  margin-bottom: var(--e7);
}

.sec__fantasma {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: clamp(3.5rem, 13vw, 12rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(to bottom, var(--p-suave) 10%, transparent 92%);
  background-clip: text;
  -webkit-background-clip: text;
}

.sec__rotulo {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--t-meta);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-forte);
}

.sec__cabeca .sec__rotulo {
  position: absolute;
  right: 0;
  bottom: var(--e2);
}

.sec__rotulo::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 1em;
  margin-left: var(--e2);
  vertical-align: -0.12em;
  background: var(--cor-apoio-2);
}

/* Quem sou */
.quem {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--e7) var(--e5);
  align-items: center;
}

.quem__texto {
  grid-column: 1 / span 6;
  max-width: 62ch;
}

.quem__texto p {
  margin: 0 0 var(--e4);
}

.quem__abre {
  font-family: var(--fonte-titulo);
  font-size: clamp(var(--t-lead), 2.2vw, 1.75rem);
  line-height: 1.3;
  color: var(--p-forte);
}

/* números em volta da foto redonda: dois de cada lado */
.numeros {
  grid-column: 7 / -1;
  display: grid;
  grid-template-columns: 1fr minmax(120px, 0.9fr) 1fr;
  align-items: center;
  gap: 0 var(--e4);
}

.numeros__lista {
  display: contents;
}

.numeros__item {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--e1);
  padding: var(--e5) 0;
}

.numeros__item:nth-child(1) { grid-column: 1; grid-row: 1; border-bottom: 2px solid var(--p-texto); }
.numeros__item:nth-child(2) { grid-column: 3; grid-row: 1; border-bottom: 2px solid var(--p-texto); text-align: right; }
.numeros__item:nth-child(3) { grid-column: 1; grid-row: 2; }
.numeros__item:nth-child(4) { grid-column: 3; grid-row: 2; text-align: right; }

.numeros__item dt {
  font-size: var(--t-meta);
  max-width: 18ch;
}

.numeros__item:nth-child(even) dt {
  margin-left: auto;
}

.numeros__item dd {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.75rem, 3vw, 3rem);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  color: var(--p-forte);
}

.numeros__foto {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  background: var(--p-forma);
  outline: 8px solid var(--p-forma);
}

/* Propósito */
.proposito {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--e6) var(--e5);
  padding: var(--e9) clamp(var(--e4), 6vw, var(--e9));
  background: var(--p-forte);
  color: var(--p-sobre-forte);
}

.proposito__rotulo {
  grid-column: 1 / span 2;
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.proposito__frase {
  grid-column: 3 / -1;
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.75rem, 4.2vw, 4rem);
  line-height: 1.08;
  text-wrap: balance;
}

.proposito__frase p {
  margin: 0;
}

.proposito__texto {
  grid-column: 7 / -1;
  max-width: 60ch;
  opacity: 0.85;
}

/* Experiência: lista que abre e fecha, um cartão por área */
.sanfona {
  display: grid;
  gap: var(--e3);
  interpolate-size: allow-keywords;
}

.sanfona__item {
  border-radius: calc(var(--raio) * 2);
  background: var(--p-suave);
  color: var(--cor-texto-forte);
}

.sanfona__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  min-height: 44px;
  padding: var(--e4) clamp(var(--e4), 3vw, var(--e6));   /* um pouco menor (pedido da Julia, 27/10); o texto de dentro não mudou */
  font-family: var(--fonte-titulo);
  font-size: clamp(1.375rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
  border-radius: inherit;
}

.sanfona__item summary::-webkit-details-marker {
  display: none;
}

/* + que vira − */
.sanfona__item summary::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: rotate 0.4s var(--curva), background-size 0.4s var(--curva);
}

.sanfona__item[open] summary::after {
  rotate: 180deg;
  background-size: 100% 2px, 2px 0;
}

.sanfona__item p {
  margin: 0;
  padding: var(--e1) clamp(var(--e4), 3vw, var(--e6)) var(--e5);
  max-width: 72ch;
  font-size: var(--t-lead);
}

.sanfona__item p + p {
  padding-top: 0;
}

.sanfona__item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.5s var(--curva), content-visibility 0.5s allow-discrete;
}

.sanfona__item[open]::details-content {
  block-size: auto;
}

.areas__titulo {
  margin: var(--e8) 0 var(--e4);
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-forte);
}

.areas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.areas li {
  padding: var(--e2) var(--e4);
  border: 2px solid var(--p-texto);
  border-radius: 999px;
  font-weight: 600;
}

/* Projetos: grade de cartões com pílula e seta */
.grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cartao a {
  position: relative;
  display: flex;
  height: 100%;
  min-height: clamp(220px, 24vw, 340px);
  padding: var(--e5);
  border-radius: calc(var(--raio) * 2);
  overflow: clip;
  text-decoration: none;
  isolation: isolate;
}

.cartao--a,
.cartao--foto,
.cartao--e {
  grid-column: span 2;
}

.cartao--a a { background: var(--p-forte); color: var(--p-sobre-forte); }
.cartao--b a { background: var(--cor-apoio-2); color: var(--cor-fundo); }
.cartao--c a { background: var(--p-forma); color: var(--cor-texto-forte); }
.cartao--d a { background: var(--p-suave); color: var(--cor-texto-forte); }
.cartao--e a { background: var(--cor-texto); color: var(--cor-fundo); }

/* o tamanho do nome segue a largura do cartão, para nome comprido não quebrar no meio */
.cartao a {
  container-type: inline-size;
}

.cartao__tipo {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.75rem, 12cqi, 5rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transition: translate 0.5s var(--curva);
}

.cartao--a .cartao__tipo {
  font-size: clamp(1.75rem, 8cqi, 5rem);
}

/* cartão com foto (pedido da Julia, 27/10): o nome aparece como nos outros e a foto entra tingida com a cor do
   cartão (preto e branco + camada de cor em multiply). Ao passar o mouse ou focar, a cor sai e a foto fica colorida. */
/* bambula.lab no mesmo tratamento da NegritudeNjoada: foto escurecida e nome amarelo (pedido da Julia) */
.cartao--foto a {
  background: var(--p-forte);
  color: var(--p-sobre-forte);
}

/* foto por baixo (-2), cor por cima dela (-1), nome e pílulas na frente */
.cartao:has(img) img {
  z-index: -2;
  filter: grayscale(0.6) contrast(1.05);   /* um pouco da cor da foto aparece (pedido da Julia: cor menos forte) */
  transition: scale 0.8s var(--curva), filter 0.5s var(--curva);
}

:root:not([data-layout="b"]) .cartao:has(img) a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: inherit;
  mix-blend-mode: multiply;
  opacity: 0.65;
  transition: opacity 0.5s var(--curva);
}

.cartao:has(img) a:hover img,
.cartao:has(img) a:focus-visible img {
  filter: none;
}

.cartao:has(img) a:hover::before,
.cartao:has(img) a:focus-visible::before {
  opacity: 0.25;
}

.cartao__fm {
  display: inline-block;
  font-size: 0.4em;
  vertical-align: top;
  padding: 0.1em 0.3em;
  border: 2px solid currentColor;
  border-radius: 999px;
}

.cartao img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.8s var(--curva);
}

.cartao__pilula,
.cartao__seta {
  position: absolute;
  bottom: var(--e5);   /* a mesma distância da borda que o nome tem em cima (padding do cartão) */
  display: inline-flex;
  align-items: center;
  height: 36px;
  border-radius: 999px;
  background: var(--cor-fundo);
  color: var(--cor-texto-forte);
  font-size: var(--t-meta);
  font-weight: 700;
}

.cartao__pilula {
  left: var(--e5);
  padding: 0 var(--e3);
}

.cartao__seta {
  right: var(--e5);
  width: 36px;
  justify-content: center;
  font-size: var(--t-lead);
  transition: rotate 0.5s var(--curva);
}

.cartao a:hover .cartao__seta,
.cartao a:focus-visible .cartao__seta {
  rotate: 45deg;
}

.cartao a:hover img {
  scale: 1.06;
}

.cartao a:hover .cartao__tipo {
  translate: var(--e2) 0;
}

/* Casos (cada projeto) */
.caso {
  padding: var(--e9) clamp(var(--e4), 6vw, var(--e9));
}

.caso--escuro {
  background: var(--p-forte);
  color: var(--p-sobre-forte);
}

.caso--rosa {
  background: var(--p-suave);
  color: var(--cor-texto-forte);
}

.caso__cabeca {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: var(--e2) var(--e5);
  margin-bottom: var(--e7);
}

.caso__num {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding-bottom: 0.8em;
}

.caso__nome {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: clamp(2.75rem, 9vw, 9rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

/* "NegritudeNjoada FM" é bem mais longo que os outros nomes */
#negritudenjoada .caso__nome {
  font-size: clamp(2rem, 6.2vw, 6.5rem);
}

.caso__papel {
  grid-column: 2;
  justify-self: start;
  margin: var(--e3) 0 0;
  padding: var(--e1) var(--e4);
  border: 2px solid currentColor;
  border-radius: 999px;
  font-size: var(--t-meta);
  font-weight: 700;
}

.caso__corpo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--e7) var(--e5);
}

.caso__texto {
  grid-column: 1 / span 7;
  max-width: 64ch;
}

.caso__texto p,
.caso--compacto p {
  margin: 0 0 var(--e4);
}

.caso__abre {
  font-family: var(--fonte-titulo);
  font-size: clamp(var(--t-lead), 2vw, 1.625rem);
  line-height: 1.3;
}

.caso__lado {
  grid-column: 9 / -1;
}

.caso__lado h3 {
  margin: 0 0 var(--e4);
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.caso__falta {
  margin-top: var(--e5);
}

.lista-marcada {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista-marcada li {
  position: relative;
  padding: var(--e3) 0 var(--e3) var(--e5);
  border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

.lista-marcada li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--e3) + 0.45em);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cor-apoio-2);
}

.caso--escuro .lista-marcada li::before {
  background: var(--cor-destaque);
}

.passos {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.passos li {
  counter-increment: passo;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--e3);
  padding: var(--e3) 0;
  border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

.passos li::before {
  content: counter(passo, decimal-leading-zero);
  font-family: var(--fonte-titulo);
  font-weight: 800;
  color: var(--p-numero);
}

.caso__citacao {
  margin: var(--e8) 0 0;
  font-family: var(--fonte-titulo);
  font-size: clamp(var(--t-h2), 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  text-wrap: balance;
  color: var(--p-forte);
}

/* Galeria do bambula.lab */
.galeria {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: var(--e3);
  margin: 0 0 var(--e8);
}

.galeria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--raio) * 2);
}

.galeria__a { grid-column: 1 / span 7; grid-row: 1 / span 2; }
.galeria__b { grid-column: 8 / -1; grid-row: 1; aspect-ratio: 16 / 9; }
.galeria__c { grid-column: 8 / span 2; grid-row: 2; }
.galeria__d { grid-column: 10 / -1; grid-row: 2; }

/* Foto única de um caso (Ébano.ent): inteira, sem corte, numa largura que não deixa a foto em pé alta demais */
.caso__foto {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0 0 var(--e7);   /* respiro maior antes do texto (pedido da Julia) */
  border-radius: calc(var(--raio) * 2);
}

/* Galeria de fotos inteiras (Amizades): sem corte. Em cada linha as fotos têm a mesma altura e a largura de cada uma
   segue o seu formato (--ar = largura/altura), então nada é recortado. */
.galeria--duas {
  max-width: 1100px;
}

.galeria--inteira {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

.galeria__linha {
  display: flex;
  gap: var(--e3);
}

.galeria--inteira img {
  flex: var(--ar) 1 0;
  min-width: 0;
  width: 0;
  height: auto;
  aspect-ratio: var(--ar);
  grid-column: auto;
  grid-row: auto;
}

/* no computador as quatro numa linha só, para a galeria não ficar alta demais (menos na de duas por linha, para
   fotos pequenas como as do bambula.lab, que ficariam miúdas) */
@media (min-width: 900px) {
  .galeria--inteira:not(.galeria--duas) {
    flex-direction: row;
  }

  .galeria--inteira:not(.galeria--duas) .galeria__linha {
    display: contents;
  }
}

/* Marcas correndo */
.marcas {
  margin-top: var(--e8);
}

.marcas__titulo {
  margin: 0 0 var(--e4);
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.marcas__trilho {
  display: flex;
  width: max-content;
  font-family: var(--fonte-titulo);
  font-size: clamp(var(--t-h2), 5vw, 4rem);
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.marcas {
  overflow: clip;
}

.marcas__trilho span {
  display: inline-flex;
  align-items: center;
  gap: var(--e6);
  padding-right: var(--e6);
}

.marcas__trilho span::after {
  content: "";
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background: var(--cor-apoio-2);
}

/* Afroestima e Ébano.ent lado a lado */
.dupla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 2px solid var(--p-texto);
}

.dupla .caso + .caso {
  border-left: 2px solid var(--p-texto);
}

.caso--compacto .caso__cabeca {
  grid-template-columns: 1fr;
}

.caso--compacto .caso__papel {
  grid-column: 1;
}

.caso--compacto .caso__num {
  padding: 0;
}

.caso--compacto .caso__nome {
  font-size: clamp(2.5rem, 6vw, 5.5rem);
}

.caso--compacto p {
  max-width: 60ch;
}

/* Editais */
.editais {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--e7) var(--e5);
}

.editais__texto {
  grid-column: 1 / span 6;
}

.editais__texto p {
  margin: 0 0 var(--e4);
}

.editais__lista {
  grid-column: 8 / -1;
}

/* Formação e reconhecimentos */
.sec--formacao {
  border-top: 2px solid var(--p-texto);
}

.colunas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e8);
}

.colunas .sec__rotulo {
  margin-bottom: var(--e5);
}

.linhas {
  margin: 0;
  padding: 0;
  list-style: none;
}

.linhas li {
  display: grid;
  gap: var(--e1);
  padding: var(--e4) 0;
  border-top: 1px solid color-mix(in srgb, var(--p-texto) 40%, transparent);
}

.linhas strong {
  font-family: var(--fonte-titulo);
  font-size: var(--t-lead);
  color: var(--p-forte);
}

/* Contato */
.contato {
  padding: var(--e9) clamp(var(--e4), 6vw, var(--e9));
  background: var(--p-forte);
  color: var(--p-sobre-forte);
}

.contato__titulo {
  margin: 0 0 var(--e4);
  max-width: 14ch;
  font-family: var(--fonte-titulo);
  font-size: clamp(2.5rem, 8vw, 7.5rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.02em;
}

.contato__sub {
  margin: 0 0 var(--e7);
}

.contato__email {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.125rem, 3.4vw, 3rem);
  font-weight: 700;
  overflow-wrap: anywhere;
  text-decoration: none;
  background: linear-gradient(var(--cor-destaque), var(--cor-destaque)) 0 100% / 100% 3px no-repeat;
  padding-bottom: var(--e1);
  transition: background-size 0.4s var(--curva), color 0.4s var(--curva);
}

.contato__email:hover {
  background-size: 100% 100%;
  color: var(--cor-texto-forte);
}

.contato__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e6);
  margin: var(--e6) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-lead);
}

.contato__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Celular */
@media (max-width: 900px) {
  .quem__texto,
  .numeros,
  .caso__texto,
  .caso__lado,
  .editais__texto,
  .editais__lista,
  .proposito__rotulo,
  .proposito__frase,
  .proposito__texto {
    grid-column: 1 / -1;
  }

  .numeros {
    max-width: 560px;
  }

  .grade {
    grid-template-columns: 1fr 1fr;
  }

  .cartao--a,
  .cartao--foto,
  .cartao--e {
    grid-column: span 2;
  }

  .dupla,
  .colunas {
    grid-template-columns: 1fr;
  }

  .dupla .caso + .caso {
    border-left: 0;
    border-top: 2px solid var(--p-texto);
  }
}

@media (max-width: 640px) {
  .sec,
  .caso,
  .proposito,
  .contato {
    padding-block: var(--e8);
  }

  .sec__cabeca .sec__rotulo {
    position: static;
    margin-top: var(--e2);
  }

  .grade {
    grid-template-columns: 1fr;
  }

  .cartao--a,
  .cartao--foto,
  .cartao--e {
    grid-column: auto;
  }

  .cartao a {
    min-height: 200px;
  }

  .caso__cabeca {
    grid-template-columns: 1fr;
  }

  .caso__num {
    padding: 0;
  }

  .caso__papel {
    grid-column: 1;
  }

  .galeria__a { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
  .galeria__b { grid-column: 1 / -1; grid-row: auto; }
  .galeria__c { grid-column: 1 / span 6; grid-row: auto; aspect-ratio: 1; }
  .galeria__d { grid-column: 7 / -1; grid-row: auto; aspect-ratio: 1; }


  .sanfona__item p {
    font-size: var(--t-corpo);
  }

  .sec__fantasma {
    font-size: 17vw;
  }

  /* no celular: foto em cima, números dois a dois embaixo */
  .numeros {
    grid-template-columns: 1fr 1fr;
  }

  .numeros__foto {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 52%;
    justify-self: center;
    margin-bottom: var(--e5);
  }

  .numeros__item:nth-child(1) { grid-column: 1; grid-row: 2; }
  .numeros__item:nth-child(2) { grid-column: 2; grid-row: 2; }
  .numeros__item:nth-child(3) { grid-column: 1; grid-row: 3; }
  .numeros__item:nth-child(4) { grid-column: 2; grid-row: 3; }
}

/* Movimento ao rolar: só onde o navegador suporta e para quem não pediu menos movimento */
@media (prefers-reduced-motion: no-preference) {
  .marcas__trilho {
    animation: marcas-correm 30s linear infinite;
  }

  @supports (animation-timeline: view()) {
    .sec__fantasma {
      animation: fantasma-desliza linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 60%;
    }

    .cartao,
    .numeros__item,
    .sanfona__item,
    .galeria img,
    .caso__nome {
      animation: sobe-entra linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }

    .numeros__foto {
      animation: foto-gira linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 50%;
    }
  }
}

@keyframes marcas-correm {
  to { transform: translateX(-50%); }
}

@keyframes fantasma-desliza {
  from { transform: translateX(8%); opacity: 0.2; }
  to { transform: none; opacity: 1; }
}

@keyframes sobe-entra {
  from { opacity: 0; transform: translateY(48px); }
  to { opacity: 1; transform: none; }
}

/* sem giro: no lugar da foto entrou o desenho da Marcella, e ela pediu que ele não gire (27/10) */
@keyframes foto-gira {
  from { scale: 0.8; }
  to { scale: 1; }
}