/* ==========================================================================
   home.css — seções 02 a 08 da Home
   Ordem e conteúdo definidos no Briefing Técnico v1.0, "ARQUITETURA DA HOME".
   ========================================================================== */

/* Grade de 12 colunas reaproveitada pelas seções que a usam. */
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

/* ==========================================================================
   02 · Hero
   ========================================================================== */
/* Mesma dinâmica da faixa do Paulista FC: a fotografia é o fundo, full-bleed,
   com o texto por cima. O espaço negativo da imagem fica à esquerda, que é
   justamente onde o texto entra. */
.hero {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  min-height: 88vh;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(5rem, 9vh, 8rem);
  background-color: var(--bg);
  /* Dois background-image de propósito, nesta ordem: o JPEG é o piso, para o
     navegador que não entende image-set() com type(); quem entende baixa o WebP,
     que aqui pesa 57 KB contra 120 KB. Mesma dupla nos outros cinco fundos. */
  background-image: url("../img/hero-fundo.jpg");
  background-image: image-set(url("../img/hero-fundo.webp") type("image/webp"),
                              url("../img/hero-fundo.jpg") type("image/jpeg"));
  background-size: cover;
  /* 10% no eixo vertical, não center: a imagem é mais alta que a faixa, então o
     cover corta na vertical. Centralizado, o corte comeria o topo da cabeça.
     Puxando para cima, o que sai é a mesa vazia embaixo. */
  background-position: 62% 10%;
  background-repeat: no-repeat;
}

/* Dois véus: um horizontal, que garante o contraste do texto sobre a parede
   escura à esquerda e libera o retrato à direita; outro vertical na base, para
   a fotografia não cortar em seco na faixa de indicadores. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(23, 23, 23, 0) 58%, rgba(23, 23, 23, .88) 100%),
    linear-gradient(95deg,
      rgba(23, 23, 23, .95) 0%,
      rgba(23, 23, 23, .88) 30%,
      rgba(23, 23, 23, .58) 48%,
      rgba(23, 23, 23, .18) 66%,
      rgba(23, 23, 23, 0) 82%);
}

.hero__inner { position: relative; z-index: 2; align-items: center; }
.hero__text  { grid-column: 1 / span 6; display: grid; gap: 1.5rem; }

/* Os quatro termos do briefing só cabem numa linha acima de ~1400px. Abaixo
   disso o balance divide em duas linhas equilibradas, que é melhor do que
   encolher a tipografia ou cortar termo do briefing. */
.hero__eyebrow {
  margin-bottom: -.5rem;
  text-wrap: balance;
}
.hero__sub { max-width: 34ch; }
.hero__cta { margin-top: .5rem; justify-self: start; }
.hero__cta .arrow { transition: transform var(--t-fast) var(--ease); }
.hero__cta:hover .arrow { transform: translateY(3px); }

@media (max-width: 900px) {
  /* Arquivo menor e véu vertical: aqui o texto passa por cima do retrato, e o
     enquadramento em 70% mantém o rosto no quadro. */
  .hero {
    min-height: 78vh;
    padding-bottom: var(--space-inner);
    background-image: url("../img/hero-fundo-900.jpg");
    background-image: image-set(url("../img/hero-fundo-900.webp") type("image/webp"),
                                url("../img/hero-fundo-900.jpg") type("image/jpeg"));
    background-position: 70% center;
  }
  /* Véu mais fechado que no desktop, e não é excesso de zelo: no mobile o texto
     passa por cima do caderno, a área mais clara da foto. Abaixo de ~0,90 de
     opacidade o dourado do CTA não alcança 4,5:1 sobre aquele trecho. */
  .hero::before {
    background: linear-gradient(180deg,
      rgba(23, 23, 23, .88) 0%,
      rgba(23, 23, 23, .90) 45%,
      rgba(23, 23, 23, .95) 100%);
  }
  .hero__text { grid-column: 1 / -1; }
  .hero__sub { max-width: none; }
}

/* ==========================================================================
   03 · Indicadores de autoridade
   Faixa que sobrepõe levemente a base da fotografia do Hero.
   ========================================================================== */
.stats-band {
  position: relative;
  z-index: 3;
  margin-top: calc(-1 * clamp(2rem, 4vw, 3.5rem));
}

/* O gap de 1px sobre fundo --line desenha as divisórias sozinho, em
   qualquer configuração de colunas. Nada a reescrever no breakpoint. */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.stat {
  display: grid;
  gap: .5rem;
  align-content: start;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  background: var(--bg-alt);
}

.stat__num {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-title);
}

/* Blocos de reconhecimento: ícone grande à esquerda, texto ao lado. */
.stat--icone {
  display: flex;
  align-items: flex-start;
  gap: clamp(.875rem, 1.4vw, 1.25rem);
}
.stat__icone {
  flex: none;
  width: clamp(2rem, 2.6vw, 2.75rem);
  height: auto;
  margin-top: .125rem;
  color: var(--gold);
}
.stat__texto { display: grid; gap: .5rem; }

.stat__title {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
}

.stat__label {
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--text-dim);
}
.stat__label--upper { text-transform: uppercase; letter-spacing: .1em; }

@media (max-width: 900px) {
  .stats-band { margin-top: 0; }
  /* Grade 2 × 2, nunca carrossel — informação essencial. */
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  /* Célula estreita: encolhe ícone e vão para devolver largura ao texto, que
     senão quebra em cinco linhas. O ícone continua à esquerda. */
  .stat--icone { gap: .75rem; }
  .stat__icone { width: 1.75rem; }
}

/* ==========================================================================
   04 · Case principal — Paulista FC
   ========================================================================== */
.case {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  margin-top: var(--space-section);
  /* Faixa baixa de propósito: ela não se estica para caber a fotografia
     inteira. Com o master em 2,88 de proporção o corte vertical é pequeno, e
     centralizado ele mantém a estrela e o escudo inteiros no quadro. */
  min-height: clamp(18rem, 24vw, 26rem);
  background-color: var(--grena-dark);
  background-image: url("../img/paulista-fc-fundo.jpg");
  background-image: image-set(url("../img/paulista-fc-fundo.webp") type("image/webp"),
                              url("../img/paulista-fc-fundo.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: 72% center;
  background-repeat: no-repeat;
}

/* Véu graná que vai de quase opaco à esquerda, onde fica o texto, a
   transparente à direita, onde a camisa aparece. É o que garante o contraste
   AA por cima da fotografia sem esconder a imagem. */
.case::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg,
    rgba(23, 23, 23, .95) 0%,
    rgba(58, 16, 17, .90) 34%,
    rgba(58, 16, 17, .72) 52%,
    rgba(58, 16, 17, .30) 70%,
    rgba(58, 16, 17, 0) 86%);
}

.case__inner {
  position: relative;
  z-index: 2;
  align-items: center;
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
}
.case__text { grid-column: 1 / span 6; display: grid; gap: 1.125rem; justify-items: start; }

/* O nome do clube sai da serif editorial e vai para a sans em caixa-alta: dá o
   ar esportivo que o case pede sem carregar uma terceira família, que o
   briefing proíbe ("no máximo duas famílias"). */
.case__title {
  font-family: var(--font-sans);
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1;
}

/* Vermelho fechado. Um vermelho saturado escuro não alcança 4,5:1 sobre o
   graná — é impossível, não é falta de ajuste. O piso de 24px resolve: nessa
   medida a linha conta como texto grande no WCAG, cujo mínimo é 3:1, e este par
   dá 4,18:1. Não reduzir esse font-size sem trocar a cor. */
.case__force {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 1.875rem);
  font-weight: 500;
  color: var(--vermelho);
  letter-spacing: var(--ls-title);
}
.case__desc { color: var(--text-dim); max-width: 42ch; }
.case .btn { margin-top: .625rem; border-color: var(--gold-soft); }
.case .btn:hover { border-color: var(--gold); background: rgba(242, 240, 235, .06); }

@media (max-width: 900px) {
  /* Arquivo menor e véu vertical: no mobile o texto passa por cima da camisa. */
  .case {
    min-height: 17rem;
    background-image: url("../img/paulista-fc-fundo-900.jpg");
    background-image: image-set(url("../img/paulista-fc-fundo-900.webp") type("image/webp"),
                                url("../img/paulista-fc-fundo-900.jpg") type("image/jpeg"));
    background-position: 70% center;
  }
  .case::before {
    background: linear-gradient(180deg,
      rgba(23, 23, 23, .93) 0%,
      rgba(58, 16, 17, .88) 55%,
      rgba(58, 16, 17, .72) 100%);
  }
  .case__text { grid-column: 1 / -1; }
}

/* ==========================================================================
   05 · Trabalhos selecionados
   ========================================================================== */
.section__head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem var(--gutter);
}

.projects {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}

/* O card inteiro é o controle: um único tab stop, foco visível no bloco todo.
   Os 8 projetos abrem modal, então o card é <button>; só o Paulista FC tem
   página própria, e ele fica na faixa de case, não neste grid. */
.card {
  display: grid;
  grid-template-rows: auto 1fr;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t) var(--ease);
}
.card:hover { border-color: var(--gold-soft); color: var(--text); }

.card__media { overflow: hidden; }

/* contain, não cover: a capa é uma peça de design, e a composição é o trabalho.
   Com cover a célula 4:3 decepava a headline dos KVs quadrados e verticais —
   perder a diagramação é pior que ter tarja escura ao lado. O aspect-ratio fixo
   reserva o box, então não há salto de layout. */
.card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #131313;
  display: block;
  transition: transform var(--t) var(--ease);
}
/* Hover amplia a imagem no máximo 3%, conforme o briefing. */
.card:hover .card__media img { transform: scale(1.03); }

.card__body {
  display: grid;
  gap: .625rem;
  align-content: start;
  padding: 1.25rem;
}
.card__title { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.card__desc  { font-size: var(--fs-caption); line-height: 1.55; color: var(--text-dim); }
.card__cta   { margin-top: .375rem; }

@media (max-width: 1024px) { .projects { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .projects { grid-template-columns: 1fr; } }

/* ==========================================================================
   Modal de projeto
   Oito dos nove projetos abrem aqui em vez de ter página própria. Usa <dialog>
   nativo: contenção de foco, Escape e backdrop vêm do navegador, sem JS de
   acessibilidade escrito à mão. O conteúdo está no HTML, não é injetado, então
   segue rastreável por buscadores.
   ========================================================================== */
.modal {
  width: min(1280px, calc(100vw - 2 * var(--margin-side)));
  max-width: none;
  max-height: min(88vh, 940px);
  padding: 0;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  color: var(--text);
  overflow: hidden;
}
.modal[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }

.modal::backdrop {
  background: rgba(10, 10, 10, .8);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gutter);
  padding: clamp(1.25rem, 2.6vw, 2rem);
  border-bottom: var(--border);
}
.modal__title { margin-top: .5rem; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }

.modal__close {
  flex: none;
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  border: var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.modal__close:hover { border-color: var(--gold); color: var(--gold); }

/* O corpo é quem rola: o cabeçalho do modal fica sempre visível. */
.modal__body {
  display: grid;
  gap: var(--space-inner);
  align-content: start;
  padding: clamp(1.25rem, 2.6vw, 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal__resumo { color: var(--text-dim); max-width: var(--measure); }

/* O corpo do modal já separa os blocos pelo gap: a margem própria do filtro
   dobraria o espaço até o primeiro grupo de marca. */
.modal__body .filtro { margin-bottom: 0; }

/* No modal a parede tem doze marcas, e o flex-wrap da Home deixaria dez numa
   linha e duas órfãs na outra. Grid de colunas iguais distribui em linhas
   parelhas e reflui sozinho nos breakpoints. */
.modal__body .brands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  row-gap: var(--space-inner);
}

@media (max-width: 600px) {
  /* O auto-fit cairia para uma coluna só, e doze marcas em fila única viram
     rolagem longa. Duas colunas fixas dão seis linhas. */
  .modal__body .brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.modal__meta { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 0; }
.modal__meta > div { display: grid; gap: .375rem; }
.modal__meta dt {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}
.modal__meta dd { margin: 0; font-size: var(--fs-caption); color: var(--text); }

/* A galeria do modal usa as mesmas colunas de base.css. Aqui só a legenda. */
.modal__gallery figcaption {
  margin-top: .625rem;
  font-size: var(--fs-caption);
  color: var(--text-dim);
}

@media (max-width: 600px) {
  .modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    border: 0;
    border-radius: 0;
  }
}

/* ==========================================================================
   06 · Marcas
   Sem arquivos de logo: wordmarks tipográficos de mesmo peso óptico.
   Quando os SVGs chegarem, cada <span> vira <img> na mesma célula.
   ========================================================================== */
/* Faixa baixa: é confirmação de repertório, não uma seção de conteúdo. */
.marcas { padding-block: clamp(2.25rem, 2.8vw, 3.25rem); }

/* O microtítulo é o próprio h2 da seção, estilizado como eyebrow: mantém o
   outline do documento sem um título grande que a referência não tem. */
.marcas__titulo { margin-bottom: clamp(2rem, 3vw, 2.75rem); }

/* Na Home a fila se distribui de ponta a ponta, como na referência. Abaixo de
   1500px ela envolve, e aí space-between esticaria a última linha — então
   volta a centralizar. O modal usa .brands sem este ajuste. */
.marcas .brands { justify-content: space-between; }
@media (max-width: 1500px) {
  .marcas .brands { justify-content: center; }
}

/* Fila única, como na referência. Envolve em telas estreitas em vez de
   comprimir os wordmarks.

   O gap entre colunas é apertado de propósito: são 10 marcas mais o "e muitas
   outras", e com o nome embaixo de cada emblema cada item passa de 100px. Acima
   de ~1,4rem de gap a fila quebra e sobra uma marca órfã na segunda linha. O gap
   de linha fica maior, para o caso em que ela realmente envolve. Acima de 1500px
   o space-between distribui o resto do espaço, então este valor é só o mínimo. */
.brands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 1.7vw, 2.25rem);
}

/* Emblema em cima, nome embaixo. O emblema sozinho não identifica a marca — um
   escudo, um velocímetro ou uma caveira não se leem como Paulista FC, Carrera
   ou Darkness. A parede existe para confirmar repertório, e sem o nome ela vira
   ícone decorativo. */
.brand-mark {
  display: grid;
  justify-items: center;
  gap: .625rem;
  font-size: clamp(.6875rem, .62rem + .3vw, .875rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.3;
  text-align: center;
  color: var(--text-dim);
  transition: color var(--t-fast) var(--ease);
}
.brands:hover .brand-mark { color: var(--text-dim); }
.brand-mark:hover { color: var(--text); }

/* Os emblemas já são traço branco puro, então não há filtro monocromático a
   aplicar: a presença vem da opacidade, cheia no hover. */
.brand-mark img {
  display: block;
  height: clamp(2.5rem, 3.2vw, 3.25rem);
  width: auto;
  margin-inline: auto;
  opacity: .72;
  transition: opacity var(--t-fast) var(--ease);
}
.brand-mark:hover img { opacity: 1; }

/* Menor que o emblema: ele lidera, o nome identifica. */
.brand-mark__nome {
  font-size: clamp(.625rem, .58rem + .22vw, .75rem);
  letter-spacing: .1em;
}

/* Omoda não tem símbolo — o logotipo dela é o próprio nome em caixa-alta. O
   wordmark ocupa o lugar do emblema, e não há nome repetido embaixo. Mostrar o
   wordmark é mostrar o logotipo; desenhar um emblema seria inventar marca. */
/* A célula tem a mesma altura das que levam emblema + nome, e o wordmark ocupa
   exatamente a faixa do emblema. Sem isso ele flutuaria no meio da célula, fora
   da linha dos emblemas vizinhos. */
.brand-mark--wordmark {
  align-content: start;
  min-height: calc(clamp(2.5rem, 3.2vw, 3.25rem) + 1.75rem);
}
.brand-mark__wordmark {
  display: grid;
  place-content: center;
  height: clamp(2.5rem, 3.2vw, 3.25rem);
  font-size: clamp(.8125rem, .74rem + .3vw, 1rem);
  letter-spacing: .18em;
  color: var(--text);
  opacity: .72;
  transition: opacity var(--t-fast) var(--ease);
}
.brand-mark--wordmark:hover .brand-mark__wordmark { opacity: 1; }

/* "e muitas outras" fecha a fila, como na referência — não é uma linha
   solta abaixo do grid. */
.brand-mark--nota {
  text-transform: none;
  letter-spacing: .01em;
  font-weight: 400;
  font-size: var(--fs-caption);
  line-height: 1.35;
}
.brand-mark--nota:hover { color: var(--text-dim); }

.brands__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.75rem, 2.6vw, 2.5rem);
}

/* ==========================================================================
   07 · Sobre
   ========================================================================== */
/* Mesmo modelo da faixa do Paulista FC, espelhado: aqui o retrato está na
   metade esquerda da fotografia, então o véu abre à esquerda e fecha à direita,
   e é à direita que o texto entra. */
.about {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(22rem, 30vw, 34rem);
  background-color: var(--bg);
  background-image: url("../img/sobre-fundo.jpg");
  background-image: image-set(url("../img/sobre-fundo.webp") type("image/webp"),
                              url("../img/sobre-fundo.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: 28% center;
  background-repeat: no-repeat;
}

.about::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(265deg,
    rgba(23, 23, 23, .95) 0%,
    rgba(23, 23, 23, .92) 38%,
    rgba(23, 23, 23, .72) 54%,
    rgba(23, 23, 23, .28) 70%,
    rgba(23, 23, 23, 0) 86%);
}

.about__inner { position: relative; z-index: 2; align-items: center; }
.about__text  { grid-column: 7 / span 6; display: grid; gap: 1.25rem; justify-items: start; }

.about__text p { color: var(--text-dim); max-width: var(--measure); }

.about__edu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem var(--gutter);
  margin-top: .75rem;
}

.edu {
  display: flex;
  gap: .875rem;
  align-items: flex-start;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--text-dim);
}
.edu svg { flex: none; margin-top: .125rem; color: var(--gold); }
.edu strong { display: block; color: var(--text); font-weight: 600; }

@media (max-width: 1024px) {
  .about__text { grid-column: 6 / span 7; }
}
@media (max-width: 900px) {
  /* Arquivo menor e véu vertical: no mobile o texto passa por cima do retrato.
     O enquadramento em 18% mantém o rosto no quadro à esquerda. */
  .about {
    min-height: 0;
    background-image: url("../img/sobre-fundo-900.jpg");
    background-image: image-set(url("../img/sobre-fundo-900.webp") type("image/webp"),
                                url("../img/sobre-fundo-900.jpg") type("image/jpeg"));
    background-position: 18% center;
  }
  .about::before {
    background: linear-gradient(180deg,
      rgba(23, 23, 23, .90) 0%,
      rgba(23, 23, 23, .93) 50%,
      rgba(23, 23, 23, .96) 100%);
  }
  .about__text { grid-column: 1 / -1; }
  .about__edu { grid-template-columns: 1fr; }
}

/* ==========================================================================
   08 · Contato
   ========================================================================== */
.contact {
  position: relative;
  z-index: 2;
  overflow: hidden;
  /* Graná fechado: sai do --grena-dark e fecha no --grena-deep, em vez de abrir
     no --grena claro. Escurecer só aumenta o contraste do texto por cima. */
  background: linear-gradient(120deg,
    var(--grena-dark) 0%,
    #2C0D0E 58%,
    var(--grena-deep) 100%);
  /* Mais baixa que as outras seções: o conteúdo é curto e não pede respiro de
     seção cheia. */
  padding-block: clamp(2.25rem, 2.5vw, 2.75rem);
}
/* Textura um pouco mais presente aqui, conforme o briefing (seção 08). */
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain);
  opacity: .06;
}

.contact__inner { position: relative; row-gap: var(--space-inner); align-items: center; }
.contact__text     { grid-column: 1 / span 5; display: grid; gap: 1.125rem; justify-items: start; }
.contact__channels { grid-column: 7 / span 6; display: grid; gap: 1rem; align-content: start; }

.contact__support { color: var(--text-dim); }
.contact .btn { margin-top: .625rem; border-color: var(--gold-soft); }
.contact .btn:hover { border-color: var(--gold); background: rgba(242, 240, 235, .06); }

.channel {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(242, 240, 235, .14);
  color: var(--text);
}
.channel:last-child { padding-bottom: 0; border-bottom: 0; }
.channel:hover { color: var(--text); }
.channel:hover .channel__value { color: var(--gold); }

.channel__icon { flex: none; margin-top: .25rem; color: var(--gold); }

/* Rótulo acima do valor: sem isto, os dois <span> ficam na mesma linha. */
.channel > span { display: grid; gap: .25rem; }

.channel__label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-dim);
}
.channel__value {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: var(--ls-title);
  transition: color var(--t-fast) var(--ease);
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .contact__text, .contact__channels { grid-column: 1 / -1; }
}