/* ============================================================
   pypa · site institucional — pypa.ag · VERSÃO 2
   Direção "Voz Impressa" em escala expandida.
   Arquitetura inspirada nas referências da cliente:
   The Good Egg (manifesto + faixas rolantes),
   Notable/Notáveis (retratos circulares com divisórias),
   Buttermilk (coragem de escala nos blocos escuros).
   Paleta fechada: cinco cores, sem tom intermediário.
   Formas: retângulo de canto reto e círculo pleno.
   Sem sombra, sem canto arredondado.
   ============================================================ */

:root {
  --creme: #F5EFC6;
  --vinho: #4D0E12;
  --ceu:   #A5BCD6;
  --terra: #4A2E27;
  --cafe:  #231815;

  --serifada: "Instrument Serif", Georgia, serif;
  --sans: "Instrument Sans", Helvetica, Arial, sans-serif;

  --corpo: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
  --corpo-grande: clamp(1.1875rem, 1.05rem + 0.45vw, 1.3125rem);
  --subtitulo: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem);
  --titulo: clamp(2.375rem, 1.9rem + 1.6vw, 3.25rem);
  --rotulo: clamp(0.6875rem, 0.65rem + 0.2vw, 0.8125rem);
  --legenda: clamp(0.6875rem, 0.66rem + 0.1vw, 0.75rem);

  --medida-pagina: 82rem;
  --margem-pagina: clamp(1.25rem, 5vw, 4.5rem);
  --respiro-secao: clamp(6rem, 15vh, 11rem);

  --altura-cabecalho: 7rem;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-cabecalho) + 1rem);
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--cafe);
  font-family: var(--sans);
  font-size: var(--corpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px solid currentColor;
  transition: opacity 200ms ease;
}
a:hover { opacity: 0.66; }
a:focus-visible,
.pular-navegacao:focus-visible {
  outline: 2px solid var(--vinho);
  outline-offset: 3px;
}

::selection { background: var(--vinho); color: var(--creme); }

.medida {
  max-width: var(--medida-pagina);
  margin-inline: auto;
  padding-inline: var(--margem-pagina);
}

/* ---------- níveis tipográficos ---------- */

.corpo {
  font-size: var(--corpo);
  line-height: 1.6;
  max-width: 34em;
}

.corpo-grande {
  font-size: var(--corpo-grande);
  line-height: 1.5;
}

.subtitulo {
  font-family: var(--serifada);
  font-weight: 400;
  font-size: var(--subtitulo);
  line-height: 1.2;
}

/* Título de seção em escala expandida — a voz mais alta da v2 */
.titulo-gigante {
  font-family: var(--serifada);
  font-weight: 400;
  font-size: clamp(2.5rem, 1.8rem + 4.2vw, 5.75rem);
  line-height: 1.02;
  color: var(--vinho);
  letter-spacing: -0.01em;
}
.titulo-gigante i { font-style: italic; }
.titulo-creme { color: var(--creme); }

.rotulo {
  font-size: var(--rotulo);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--terra);
}
.rotulo-ceu { color: var(--ceu); }

.legenda {
  font-size: var(--legenda);
  font-weight: 500;
  letter-spacing: 0.24em;
  line-height: 1.4;
  text-transform: uppercase;
}

.separador { display: inline-block; margin-inline: 0.55em; }

/* ---------- grafismos ---------- */

.filete { height: 1px; background: var(--terra); width: 100%; }
.filete-creme { background: var(--creme); }
.filete-titulo { margin-top: clamp(1.5rem, 3vh, 2.25rem); }

.logotipo {
  font-family: var(--serifada);
  font-weight: 400;
  line-height: 1;
  display: inline-block;
  padding-bottom: 0.04em;
  border-bottom: 0.02em solid currentColor;
  color: var(--vinho);
}
.logotipo i { font-style: italic; }
.logotipo-cabecalho { font-size: 4.25rem; }
.logotipo-rodape { font-size: clamp(3.5rem, 7vw, 5.5rem); }

/* ---------- acessibilidade ---------- */

.pular-navegacao {
  position: absolute;
  left: -100vw;
  top: 0;
  z-index: 50;
  background: var(--vinho);
  color: var(--creme);
  padding: 0.75rem 1.25rem;
  border-bottom: 0;
  font-size: var(--rotulo);
  text-transform: uppercase;
  letter-spacing: 0.22em;
}
.pular-navegacao:focus-visible { left: 0; }

/* ---------- 00 · cabeçalho ---------- */

.cabecalho {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 30;
  height: var(--altura-cabecalho);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: var(--margem-pagina);
  background: var(--creme);
  border-bottom: 1px solid var(--terra);
  transition: transform 300ms ease;
}
.cabecalho.recolhido { transform: translateY(-100%); }
.cabecalho-marca { border-bottom: 0; }
.cabecalho-marca:hover { opacity: 1; }

.cabecalho-navegacao {
  font-size: var(--rotulo);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--terra);
  white-space: nowrap;
}
.cabecalho-navegacao a {
  border-bottom: 0;
  padding: 0.85rem 0.1rem;
  display: inline-block;
  position: relative;
  transition: color 200ms ease, opacity 200ms ease;
}
.cabecalho-navegacao a::after {
  content: "";
  position: absolute;
  left: 0.1rem; right: 0.1rem; bottom: 0.55rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--curva);
}
@media (hover: hover) and (pointer: fine) {
  .cabecalho-navegacao a:hover::after { transform: scaleX(1); }
}
.cabecalho-navegacao a:active { transform: scale(0.97); }
.cabecalho-navegacao a { transition: color 200ms var(--curva-hover), transform 160ms var(--curva); }
.cabecalho-navegacao a:hover { color: var(--vinho); opacity: 1; }

/* ---------- 01 · abertura ---------- */

.abertura {
  background: var(--vinho);
  color: var(--creme);
  display: flex;
  align-items: center;
  /* Mosaico quase encostado no cabeçalho e na faixa do lema (pedido de 16/09) */
  padding-top: calc(var(--altura-cabecalho) + clamp(0.5rem, 1.2vh, 0.875rem));
  padding-bottom: clamp(0.5rem, 1.2vh, 0.875rem);
}
.abertura .medida { width: 100%; }

/* Texto à esquerda, mosaico dos criadores à direita */
.abertura-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.abertura-mosaico {
  margin: 0;
  justify-self: end;
  width: 100%;
  max-width: calc(min(78vh, 46rem) * 1122 / 1402);
}
.abertura-mosaico img {
  display: block;
  width: 100%;
  height: auto;
}

.abertura-manchete {
  font-family: var(--serifada);
  font-weight: 400;
  color: var(--creme);
  line-height: 0.92;
  letter-spacing: -0.015em;
  font-size: clamp(3rem, 6.6vw, 6.25rem);
  display: flex;
  flex-direction: column;
}
.abertura-manchete i { font-style: italic; color: var(--ceu); }
/* Cada linha é uma máscara; o texto sobe de dentro dela ao carregar */
.manchete-linha { display: block; overflow: hidden; padding-bottom: 0.24em; margin-bottom: -0.24em; padding-right: 0.08em; }
.manchete-texto { display: inline-block; }
.manchete-recuo { margin-left: clamp(2rem, 10vw, 10rem); }

.abertura-rodape {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(2rem, 6vw, 5rem);
  margin-top: clamp(2rem, 5vh, 3.5rem);
}

.abertura-definicao { max-width: 28em; }

/* Selo circular giratório (rodapé) — círculo pleno Vinho, tinta Creme */
.selo {
  position: relative;
  width: clamp(6rem, 9vw, 8.25rem);
  aspect-ratio: 1;
  flex-shrink: 0;
}
.selo-giro {
  width: 100%;
  height: 100%;
  animation: selo-gira 24s linear infinite;
}
.selo-texto {
  fill: var(--creme);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.selo-centro {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serifada);
  font-style: italic;
  font-size: clamp(2rem, 3vw, 2.75rem);
  color: var(--creme);
  padding-bottom: 0.1em;
}
@keyframes selo-gira {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---------- faixas rolantes ---------- */

.faixa {
  overflow: hidden;
  white-space: nowrap;
  border-block: 1px solid var(--terra);
  background: var(--vinho);
  padding-block: clamp(0.9rem, 1.6vh, 1.4rem);
}

.faixa-trilho {
  display: inline-flex;
  align-items: baseline;
  will-change: transform;
}
.trilho-esquerda { animation: rola-esquerda 60s linear infinite; }
.trilho-direita { animation: rola-direita 70s linear infinite; }

.faixa:hover .faixa-trilho { animation-play-state: paused; }

@keyframes rola-esquerda {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes rola-direita {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* Faixa do lema — Creme com tinta Vinho, separando o hero Vinho do bloco Céu */
.faixa-lema { background: var(--creme); padding-block: clamp(0.5rem, 1vh, 0.75rem); }
.faixa-lema .item-faixa {
  font-family: var(--serifada);
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  color: var(--vinho);
  line-height: 1.1;
}
.faixa-lema .ponto-faixa { color: var(--terra); }

/* Faixa de marcas */
.faixa-marcas { border-bottom: 0; }
.faixa-marcas-segunda { border-top: 0; border-bottom: 1px solid var(--terra); }

.faixa-marcas .item-faixa {
  font-family: var(--serifada);
  font-size: clamp(1.625rem, 3vw, 2.75rem);
  color: var(--creme);
  line-height: 1.1;
}
.faixa-marcas-segunda .item-faixa {
  font-family: var(--sans);
  font-size: clamp(1.125rem, 1.8vw, 1.625rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ceu);
}

/* Logotipos das marcas — o SVG é embutido na página por pagina.js e vem
   com fill="currentColor", então adota a cor da própria faixa (Creme na
   primeira, Céu na segunda). A proporção sai do viewBox do arquivo: basta
   fixar a altura que a largura se ajusta sozinha */
.faixa-marcas .faixa-trilho { align-items: center; }

.item-faixa-logo {
  --altura: clamp(1.5rem, 2.7vw, 2.375rem);
  display: inline-flex;
  align-items: center;
  height: var(--altura);
}
.item-faixa-logo svg,
.item-faixa-logo img {
  display: block;
  height: 100%;
  width: auto;
  max-width: clamp(7rem, 16vw, 14rem);
}
/* Logotipo colorido (sem SVG de traço único disponível): entra com a cor
   própria, então ganha um respiro maior — senão lê mais fraco que os
   logotipos em Creme cheio ao lado */
.item-faixa-logo-colorido { --altura: clamp(1.75rem, 3.1vw, 2.75rem); }

/* Brasões, assinaturas verticais e desenhos muito detalhados precisam de
   mais área que um wordmark simples para terem o mesmo peso óptico. */
.item-faixa-ajuste-maior.item-faixa-logo {
  --altura: clamp(1.8rem, 3.15vw, 2.75rem);
}
.item-faixa-ajuste-maior.item-faixa-logo svg,
.item-faixa-ajuste-maior.item-faixa-logo img {
  max-width: clamp(8rem, 18vw, 16rem);
}
.item-faixa-ajuste-maximo.item-faixa-logo {
  --altura: clamp(2rem, 3.5vw, 3.125rem);
}
.item-faixa-ajuste-maximo.item-faixa-logo svg,
.item-faixa-ajuste-maximo.item-faixa-logo img {
  max-width: clamp(9rem, 20vw, 18rem);
}
/* Selos quase quadrados precisam de mais altura que os wordmarks para
   alcançarem massa visual semelhante sem perder sua proporção original. */
.item-faixa-ajuste-quadrado.item-faixa-logo {
  --altura: clamp(2.35rem, 4.1vw, 3.5rem);
}
.item-faixa-ajuste-quadrado.item-faixa-logo svg,
.item-faixa-ajuste-quadrado.item-faixa-logo img {
  max-width: clamp(3.5rem, 7vw, 5rem);
}

.ponto-faixa {
  display: inline-block;
  margin-inline: clamp(0.8rem, 1.6vw, 1.5rem);
  color: var(--ceu);
}

/* ---------- 02 · a agência ---------- */

.agencia {
  background: var(--ceu);
  color: var(--cafe);
  padding-block: var(--respiro-secao);
}

.rotulo-secao { margin-bottom: 1.25rem; }

/* Título em uma linha só a partir do tablet; no celular quebra naturalmente */
@media (min-width: 56.01rem) {
  .titulo-linha-unica {
    white-space: nowrap;
    font-size: clamp(2.5rem, 4.6vw, 4.25rem);
  }
}

.agencia-subtitulo {
  font-family: var(--serifada);
  font-size: var(--subtitulo);
  line-height: 1.25;
  color: var(--vinho);
  margin-top: clamp(1rem, 2.5vh, 1.5rem);
}
/* Sem filete entre o subtítulo e as colunas (pedido da Mariana, 16/09) */
.agencia-subtitulo + .pilares { margin-top: clamp(2.5rem, 5vh, 3.5rem); }

/* Três colunas abaixo do filete: visão · percepção · execução */
.pilares {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
}
.pilar-icone {
  width: 2.75rem;
  height: 2.75rem;
  color: var(--vinho);
  display: block;
}
.pilar-titulo {
  font-family: var(--serifada);
  font-weight: 400;
  font-size: var(--subtitulo);
  line-height: 1.2;
  color: var(--vinho);
  margin-top: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--terra);
}
.pilar .corpo { margin-top: 1em; }

/* Execução: duas engrenagens encaixadas, estáticas (pedido da Mari, 17/09) */
.icone-engrenagens { overflow: visible; }

.socios {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  margin-top: clamp(3rem, 6vh, 4.5rem);
}

/* Coluna da direita: as duas falas empilhadas, sem vão esticado */
.socios-texto {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4vh, 2.5rem);
}

.fala { margin: 0; }
.fala + .fala {
  border-top: 1px solid var(--terra);
  padding-top: clamp(1.75rem, 4vh, 2.5rem);
}
.fala-texto {
  font-family: var(--serifada);
  font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem);
  line-height: 1.4;
  color: var(--vinho);
  margin: 0;
}
.fala-texto p { margin: 0; }
.fala-texto p + p { margin-top: 0.85em; }
.fala-autoria {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  margin-top: 1rem;
}
.fala-autoria .socio-nome {
  font-family: var(--serifada);
  font-size: clamp(1.125rem, 1.02rem + 0.35vw, 1.375rem);
  line-height: 1.2;
}

/* Foto conjunta dos sócios — retângulo de canto reto, o outro formato da marca */
.socios-retrato {
  margin: 0;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--terra);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.socios-retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}

.retrato-espera {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--vinho);
  color: var(--creme);
  font-family: var(--serifada);
  font-size: 1.75rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.retrato-espera-dupla { width: 5.5rem; height: 5.5rem; font-size: 1.5rem; }
.retrato-espera-dupla .ponto { margin-inline: 0.2em; }

.socio-nome { color: var(--vinho); }

/* Aspas em Vinho — uma ocorrência por peça, abrindo as falas */
.citacao-aspas {
  font-family: var(--serifada);
  font-size: clamp(3.75rem, 6vw, 5.625rem);
  line-height: 1;
  height: 0.4em;
  color: var(--vinho);
  display: block;
  margin-bottom: clamp(-1.25rem, -2vh, -0.75rem);
}

/* ---------- 03 · casting — modelo de retratos circulares ---------- */

.casting {
  background: var(--cafe);
  color: var(--creme);
  padding-block: var(--respiro-secao) 0;
}

.corpo-creme { color: var(--creme); }
.vinculo-creme { color: var(--creme); }

.casting-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(3.5rem, 8vh, 6rem);
}

.cartao {
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cartao-retrato {
  position: relative;
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--creme);
}
.cartao-retrato img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cartao-retrato .foto-segunda {
  opacity: 0;
  transition: opacity 300ms ease;
}
.cartao:hover .foto-segunda,
.cartao:focus-within .foto-segunda { opacity: 1; }

.cartao .retrato-espera {
  background: var(--creme);
  color: var(--cafe);
  width: 5rem;
  height: 5rem;
  font-size: 2.25rem;
}

.cartao-nome {
  font-family: var(--serifada);
  font-weight: 400;
  font-size: clamp(1.625rem, 2.2vw, 2.25rem);
  line-height: 1.15;
  color: var(--creme);
  margin-top: clamp(1.5rem, 3vh, 2.25rem);
}

.cartao-segmentos {
  font-size: var(--rotulo);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ceu);
  margin-top: 0.75rem;
  line-height: 1.9;
}
/* Segmento nunca se parte ao meio; letra e espaçamento contidos
   para os mais longos caberem inteiros na largura do cartão */
.cartao-segmentos,
.minibio-segmentos {
  font-size: clamp(0.625rem, 0.58rem + 0.18vw, 0.75rem);
  letter-spacing: 0.14em;
}
.segmento { white-space: nowrap; }

/* "saiba mais" — retângulo de canto reto, moldura 1px Creme */
.cartao-saiba-mais {
  margin-top: 1.5rem;
  min-height: 44px;
  padding: 0.6rem 1.25rem;
  background: transparent;
  color: var(--creme);
  border: 1px solid var(--creme);
  border-radius: 0;
  font-family: var(--sans);
  font-size: var(--rotulo);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 200ms var(--curva-hover), color 200ms var(--curva-hover), transform 160ms var(--curva);
}
@media (hover: hover) and (pointer: fine) {
  .cartao-saiba-mais:hover { background: var(--creme); color: var(--cafe); }
}
.cartao-saiba-mais:active { transform: scale(0.97); }
.cartao-saiba-mais:focus-visible { outline: 2px solid var(--creme); outline-offset: 3px; }

/* ---------- minibio — caixa sobre a página ---------- */

.minibio {
  width: min(44rem, calc(100vw - 2rem));
  max-height: min(88vh, 56rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: auto;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--creme);
  color: var(--cafe);
  border: 1px solid var(--terra);
  border-radius: 0;
}
.minibio::backdrop { background: rgba(35, 24, 21, 0.82); }
.minibio[open] { animation: minibio-entra 240ms var(--curva); }
.minibio[open]::backdrop { animation: minibio-fundo 240ms ease; }
@keyframes minibio-entra {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes minibio-fundo { from { opacity: 0; } to { opacity: 1; } }
html.minibio-aberta { overflow: hidden; }

/* Fica preso ao topo da caixa enquanto a minibio rola */
.minibio-fechar {
  position: sticky;
  top: 0;
  float: right;
  z-index: 3;
  margin: calc(-1 * clamp(1rem, 2.5vw, 2rem)) calc(-1 * clamp(1rem, 2.5vw, 2rem)) 0 0;
  background: var(--creme);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  color: var(--vinho);
  cursor: pointer;
  transition: transform 160ms var(--curva);
}
.minibio-fechar svg { width: 22px; height: 22px; }
.minibio-fechar:active { transform: scale(0.92); }
.minibio-fechar:focus-visible { outline: 2px solid var(--vinho); outline-offset: 2px; }

.minibio-topo {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.75rem);
  margin-bottom: clamp(1.25rem, 3vh, 1.75rem);
}
.minibio-retrato {
  position: relative;
  flex-shrink: 0;
  width: clamp(5rem, 14vw, 7rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--terra);
  display: flex;
  align-items: center;
  justify-content: center;
}
.minibio-retrato img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.minibio-nome {
  font-family: var(--serifada);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  line-height: 1.1;
  color: var(--vinho);
}
.minibio-segmentos { color: var(--terra); margin-top: 0.4rem; line-height: 1.8; }
.minibio-saudacao { color: var(--vinho); margin-top: clamp(1.25rem, 3vh, 1.75rem); }
.minibio-texto p {
  font-size: var(--corpo);
  line-height: 1.65;
  margin-top: 1em;
}

/* Vínculos do cartão — retrato e nome levam ao perfil do criador */
.cartao-vinculo {
  border-bottom: 0;
  color: inherit;
}
.cartao-vinculo:hover { opacity: 1; }
.cartao-nome .cartao-vinculo:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.cartao-vinculo-retrato {
  display: flex;
  justify-content: center;
  width: 100%;
}
.cartao-vinculo-retrato:active .cartao-retrato { transform: scale(0.985); transition-duration: 160ms; transition-delay: 0ms; }
@media (hover: hover) and (pointer: fine) {
  .cartao.visivel .cartao-retrato { transition: transform 260ms var(--curva); transition-delay: 0ms; }
  .cartao-vinculo-retrato:hover .cartao-retrato { transform: scale(1.03); }
}
.casting a:focus-visible,
.abertura a:focus-visible,
.marcas-banda a:focus-visible { outline-color: var(--creme); }

.cartao-identificacoes {
  font-size: var(--legenda);
  letter-spacing: 0.12em;
  color: var(--creme);
  margin-top: 1rem;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

/* ---------- 04 · faixa de marcas ---------- */

.marcas-banda {
  background: var(--vinho);
  padding-top: var(--respiro-secao);
}
.marcas-banda .medida { padding-bottom: clamp(3rem, 7vh, 5rem); }

/* ---------- 05 · para marcas ---------- */

.marcas { padding-block: var(--respiro-secao); }

/* Projetos em PDF — capa em miniatura, sem linhas de grade (como o casting).
   3 por linha no computador, 2 no tablet, 1 no celular.
   "abrir" aparece ao passar o mouse; em tela de toque fica sempre visível */
.projetos {
  list-style: none;
  padding: 0;
  margin: clamp(3rem, 7vh, 5rem) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
}

.projeto {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--cafe);
  border-bottom: 0;
  text-decoration: none;
  transition: transform 160ms var(--curva);
}
.projeto:hover { opacity: 1; }
.projeto:active { transform: scale(0.985); }

.projeto-capa {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--terra);
  box-shadow: 0 1px 0 rgba(35, 24, 21, 0.08), 0 14px 30px -18px rgba(35, 24, 21, 0.45);
}
.projeto-capa img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 260ms var(--curva);
}

.projeto-nome {
  font-family: var(--serifada);
  font-size: var(--subtitulo);
  line-height: 1.15;
  margin-top: 1.25rem;
}
.projeto-marca {
  font-size: var(--corpo);
  letter-spacing: 0.02em;
  color: var(--terra);
  margin-top: 0.4rem;
}
.projeto-abrir {
  margin-top: 1rem;
  font-size: var(--rotulo);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vinho);
  border-bottom: 1px solid currentColor;
  transition: opacity 200ms var(--curva-hover), transform 200ms var(--curva);
}
@media (hover: hover) and (pointer: fine) {
  .projeto-abrir { opacity: 0; transform: translateY(0.35rem); }
  .projeto:hover .projeto-abrir, .projeto:focus-visible .projeto-abrir { opacity: 1; transform: none; }
  .projeto:hover .projeto-capa img { transform: scale(1.03); }
}

.marcas-abertura {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  max-width: 36em;
}

/* Botão pílula centralizado */
.marcas-chamada { margin-top: clamp(3.5rem, 8vh, 5.5rem); text-align: center; }
.marcas-chamada a {
  display: inline-block;
  font-size: var(--corpo-grande);
  color: var(--vinho);
  border: 1px solid var(--vinho);
  border-radius: 999px;
  padding: 0.95rem 2.25rem;
  min-height: 44px;
  transition: background-color 200ms var(--curva-hover), color 200ms var(--curva-hover), transform 160ms var(--curva);
}
.marcas-chamada a:hover { opacity: 1; }
.marcas-chamada a:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .marcas-chamada a:hover { background-color: var(--vinho); color: var(--creme); }
}

/* ---------- 06 · rodapé ---------- */

.rodape { padding-block: clamp(2.5rem, 5vh, 4rem); }

.rodape-conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}



/* ---------- tratamento fotográfico do guia (seção 13) ----------
   Aplicado por CSS, igual para todo o acervo: temperatura quente,
   saturação reduzida, granulação aparente e pretos elevados em
   direção ao Café. Trocar a foto não exige reeditar. */

.foto-tratada { position: relative; isolation: isolate; }
.foto-tratada img {
  filter: sepia(0.22) saturate(0.8) contrast(0.96) brightness(1.02);
}
/* pretos puxados ao Café: nada fica mais escuro que a tinta da marca */
.foto-tratada::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cafe);
  mix-blend-mode: lighten;
  pointer-events: none;
  z-index: 1;
}
/* granulação de filme */
.foto-tratada::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  opacity: 0.28;
  pointer-events: none;
  z-index: 2;
}

/* ---------- redes — ícones monolineares (seção 12) ---------- */

.cabecalho-navegacao { margin-left: auto; }

.cabecalho-redes,
.rodape-redes {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.rede-vinculo {
  border-bottom: 0;
  color: var(--terra);
  display: inline-flex;
  padding: 0.8rem; /* alvo de toque ≥ 44px */
  transition: color 200ms ease;
}
.rede-vinculo { transition: color 200ms var(--curva-hover), transform 160ms var(--curva); }
.rede-vinculo:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .rede-vinculo:hover { color: var(--vinho); opacity: 1; }
}
.rede-vinculo svg { width: 18px; height: 18px; display: block; }
/* No rodapé os ícones acompanham a escala do logotipo */
.rodape-redes .rede-vinculo svg { width: 28px; height: 28px; }

/* ---------- movimento — entrada editorial, transform e opacidade ----------
   Regra: nada pula, nada decora. Os elementos chegam à página
   como numa impressão: sobem, o filete se desenha, o texto assenta. */

:root { --curva: cubic-bezier(0.23, 1, 0.32, 1); --curva-hover: ease; }

/* Abertura: a manchete sobe linha por linha depois que a fonte carrega */
.manchete-texto { transform: translateY(110%); }
body.pronta .manchete-texto {
  animation: sobe-linha 850ms var(--curva) forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}
.entra-depois { opacity: 0; transform: translateY(1rem); }
body.pronta .entra-depois { animation: assenta 700ms var(--curva) 380ms forwards; }
/* Mosaico chega junto com a manchete, com escala sutil */
.entra-mosaico { opacity: 0; transform: translateY(1.25rem) scale(0.97); }
body.pronta .entra-mosaico { animation: assenta-mosaico 900ms var(--curva) 180ms forwards; }
@keyframes assenta-mosaico {
  from { opacity: 0; transform: translateY(1.25rem) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.cabecalho { opacity: 0; }
body.pronta .cabecalho { animation: assenta 500ms var(--curva) 200ms forwards; }
body.pronta .cabecalho.recolhido { animation: none; opacity: 1; }

@keyframes sobe-linha {
  from { transform: translateY(110%); }
  to { transform: translateY(0); }
}
@keyframes assenta {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* Revelação ao rolar */
.revela {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 700ms var(--curva), transform 700ms var(--curva);
}
.revela.visivel { opacity: 1; transform: none; }

/* Títulos gigantes sobem um pouco mais */
.revela-titulo { transform: translateY(2.5rem); }

/* Filete se desenha da esquerda para a direita */
.revela-filete {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--curva) 100ms;
}
.revela-filete.visivel { transform: scaleX(1); }

/* Filhos escalonados: cada um chega um pouco depois do anterior */
.escalona > * {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 650ms var(--curva), transform 650ms var(--curva);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.escalona.visivel > * { opacity: 1; transform: none; }

/* Casting: os cartões entram em cascata por coluna */
.cartao { transition-delay: calc(var(--i, 0) * 80ms); }
.cartao .cartao-retrato { transform: scale(0.94); transition: transform 700ms var(--curva); transition-delay: calc(var(--i, 0) * 80ms + 60ms); }
.cartao.visivel .cartao-retrato { transform: scale(1); }


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Sem deslocamento; permanece só um esmaecer curto, que ajuda a leitura */
  .revela, .revela-titulo, .escalona > *, .cartao .cartao-retrato {
    transform: none !important;
    transition: opacity 200ms ease !important;
    transition-delay: 0ms !important;
  }
  .revela-filete { transform: scaleX(1) !important; transition: none !important; }
  .manchete-texto, .entra-depois, .entra-mosaico, .cabecalho {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  .cabecalho.recolhido { transform: translateY(-100%) !important; }
  .selo-giro { animation: none; }
  .minibio[open], .minibio[open]::backdrop { animation: none; }
  .cartao-saiba-mais, .minibio-fechar { transition: none !important; }
  .faixa-trilho { animation: none; }
  .faixa { overflow-x: auto; }
  .cartao-retrato, .cabecalho-navegacao a, .rede-vinculo, .marcas-chamada a, .projeto, .projeto-capa img, .projeto-abrir { transition: none !important; }
}

/* ---------- responsivo ---------- */

@media (max-width: 56rem) {
  .pilares { grid-template-columns: 1fr; gap: 2.5rem; }
  /* Tablet e celular: mosaico abaixo do texto, centralizado */
  .abertura-grade { grid-template-columns: 1fr; gap: clamp(2.5rem, 6vh, 3.5rem); }
  .abertura-mosaico { justify-self: center; max-width: min(34rem, 92%); }
  .casting-grade { grid-template-columns: repeat(2, 1fr); }
  .cartao:nth-child(3n) { border-right: 1px solid var(--creme); }
  .cartao:nth-child(2n) { border-right: 0; }
  .socios { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .projetos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  .projetos { grid-template-columns: 1fr; }
  .marcas-chamada a { font-size: var(--corpo); padding: 0.85rem 1.5rem; white-space: nowrap; }
  :root { --altura-cabecalho: 7.5rem; }
  .cabecalho {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.35rem;
  }
  .logotipo-cabecalho { font-size: 3rem; }
  /* No celular o texto vem antes do mosaico: mantém respiro abaixo do cabeçalho */
  .abertura { padding-top: calc(var(--altura-cabecalho) + 2rem); padding-bottom: 1rem; }
  .cabecalho-navegacao { letter-spacing: 0.12em; font-size: 0.6875rem; }
  .cabecalho-navegacao a { padding-block: 0.4rem; }
  .cabecalho-navegacao .separador { margin-inline: 0.35em; }
  .cabecalho-redes { display: none; }
  .cabecalho-navegacao { margin-left: 0; }


  .casting-grade { grid-template-columns: 1fr; }
  .cartao,
  .cartao:nth-child(2n),
  .cartao:nth-child(3n) { border-right: 0; }
  .socios { grid-template-columns: 1fr; }
  .socios-retrato { max-width: 24rem; }
}