/* Site pessoal de Kaymi França · só composição.
   Cor, tipo, raio, sombra e movimento vêm do Notório Design System (02_Design-System/dist: tokens.css e bundle.css).
   Mesmas regras do site do Notório (tests/site-css.test.mjs): nenhuma cor solta, só variáveis que existem,
   px solto só 0, 1 ou 2, sem gradiente, sombra ou peso escrito aqui. A tipografia entra pelas classes do sistema no HTML. */

/* ---------- acesso direto ao conteúdo e texto só para leitor de tela ---------- */
.skip-link { position: absolute; z-index: var(--z-tooltip); left: var(--espaco-4); top: var(--espaco-4); padding: var(--espaco-3) var(--espaco-5); border-radius: var(--raio-pilula); background: var(--primario); color: var(--sobre-primario); text-decoration: none; translate: 0 -300%; }
.skip-link:focus-visible { translate: 0 0; }
.site-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- header: a pílula de vidro do design system, fixa sobre a página ---------- */
/* ---------- largura: o conteúdo ocupa a tela, como no site da Human. Sem o teto de 1440 px do sistema (só um limite
   alto, para telas 4K); no desktop a margem cresce com a tela, nunca menor que a do sistema. Header, hero e rodapé
   seguem a mesma margem, então tudo fica alinhado pelas bordas. ---------- */
:root { --site-margem: var(--grid-margem-celular); }
@media (min-width: 768px) { :root { --site-margem: var(--grid-margem-tablet); } }
@media (min-width: 1200px) { :root { --site-margem: max(var(--grid-margem-desktop), 4.5vw); } }
.nt-container { max-width: 160rem; padding-inline: var(--site-margem); }
.site-abertura { padding-inline: var(--site-margem); }

/* ---------- barra de navegação, como a do portfólio Ora: largura toda, fixa no topo; links à esquerda, logo K✶F no
   centro e a pílula Contato à direita (no celular, logo e a pílula Menu). No topo da página é transparente, com um
   fio entre as margens; ao rolar (is-rolada, site.js) ganha o fundo da página e o fio some. Passando o mouse, um traço
   corre sob o link, da esquerda para a direita; a página atual fica com o traço. ---------- */
:root { --site-barra-altura: calc(var(--espaco-10) + var(--espaco-1)); }
html { scroll-padding-top: calc(var(--site-barra-altura) + var(--espaco-6)); }
.site-barra {
  position: fixed; inset: 0 0 auto; z-index: var(--z-nav);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--espaco-5);
  height: var(--site-barra-altura); padding-inline: var(--site-margem); color: var(--tinta);
  transition: background-color var(--duracao-media) var(--curva-padrao);
}
.site-barra::after { content: ""; position: absolute; left: var(--site-margem); right: var(--site-margem); bottom: 0; height: 1px; background: var(--borda); transition: opacity var(--duracao-media) var(--curva-padrao); }
.site-barra.is-rolada { background: var(--fundo); }
.site-barra.is-rolada::after { opacity: 0; }
/* sobre vídeo e blocos escuros (data-nav-escuro: reel, O que faço e rodapé) ela volta a ser transparente, no tema escuro
   do sistema (texto claro, pílula clara), com o fio, como a do Ora sobre o vídeo de abertura */
.site-barra.is-sobre-escuro { background: transparent; }
.site-barra.is-sobre-escuro::after { opacity: 1; background: var(--borda-forte); }
.site-barra__links { display: flex; gap: var(--espaco-6); margin: 0; padding: 0; list-style: none; }
.site-barra__link { position: relative; display: inline-block; padding-block: var(--espaco-2); color: inherit; text-decoration: none; }
.site-barra__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--espaco-1); height: 1px; background: currentColor; scale: 0 1; transform-origin: right; transition: scale var(--duracao-media) var(--curva-entrada); }
.site-barra__link[aria-current="page"]::after { scale: 1 1; }
@media (hover: hover) and (pointer: fine) { .site-barra__link:hover::after { scale: 1 1; transform-origin: left; } }
.site-barra__link:focus-visible::after { scale: 1 1; }
.site-barra__logo { display: flex; align-items: center; color: inherit; }
.site-barra__logo .site-logo { height: var(--espaco-6); }
.site-barra__acoes { display: flex; align-items: center; justify-content: flex-end; gap: var(--espaco-2); }
.site-barra__menu { display: none; }
@media (max-width: 760px) {
  .site-barra { grid-template-columns: auto minmax(0, 1fr); }
  .site-barra__links, .site-barra__contato { display: none; }
  .site-barra__logo { order: -1; }
  .site-barra__menu { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) { .site-barra, .site-barra::after, .site-barra__link::after { transition: none; } }
:root[data-movimento="reduzido"] :is(.site-barra, .site-barra::after, .site-barra__link::after) { transition: none; }
/* logo pessoal K✶F no menu do celular */
.nt-menu-cheio__topo .site-logo { height: var(--espaco-6); color: var(--tinta); }

/* ---------- abertura da home, como no portfólio de Jacob Turner: no fundo da página, logo abaixo da barra, a frase de
   apresentação grande, com um vídeo pequeno entre "diretor" e "criativo", da altura das maiúsculas, para ler como uma
   palavra, e embaixo uma linha de informações nas colunas 1, 4, 8 e 12 da grade. A frase sobe linha a linha (site.js);
   a linha de baixo aparece em seguida (nt-entra, do sistema). ---------- */
.site-abertura {
  display: grid; grid-template-rows: 1fr auto; gap: var(--espaco-9);
  min-height: 72svh; max-width: 160rem; margin-inline: auto; padding-block: calc(var(--site-barra-altura) + var(--espaco-9)) var(--espaco-5);
}
.site-abertura__linha { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-calha-desktop); align-items: baseline; margin: 0; color: var(--tinta); }
.site-abertura__linha > :nth-child(1) { grid-column: 1 / span 3; }
.site-abertura__linha > :nth-child(2) { grid-column: 4 / span 4; }
.site-abertura__linha > :nth-child(3) { grid-column: 8 / span 4; }
.site-abertura__linha > :nth-child(4) { grid-column: 12 / span 1; justify-self: end; white-space: nowrap; }
.site-abertura__linha a { color: inherit; text-decoration: none; }
.site-abertura__linha a > svg { width: 1em; height: 1em; margin-left: var(--espaco-1); vertical-align: -.125em; }
@media (hover: hover) and (pointer: fine) { .site-abertura__linha a:hover { text-decoration: underline; text-underline-offset: .2em; } }
.site-abertura__titulo { align-self: center; margin: 0; font-size: clamp(2.25rem, 5.5vw, 7.5rem); line-height: .96; letter-spacing: -.04em; color: var(--tinta); }
.site-abertura__miniatura { position: relative; display: inline-block; overflow: hidden; width: 1.16em; height: .73em; margin-inline: .02em; vertical-align: baseline; border-radius: var(--raio-xs); background: var(--superficie-3); }
.site-abertura__miniatura > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* frase linha a linha: o site.js põe cada linha numa máscara; ela sobe de baixo, uma depois da outra, e o vídeo pequeno
   entra por último. Antes do site.js a frase espera escondida (com uma saída de 2 s, caso o script não rode). */
.js :is(.site-abertura__titulo, .site-links__frase)[data-linhas]:not(.is-linhas):not(.is-solta) { opacity: 0; animation: site-aparece 1ms linear 2s forwards; }
:is(.site-abertura__titulo, .site-links__frase) .site-linha-mascara { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
:is(.site-abertura__titulo, .site-links__frase) .site-linha-texto { display: block; animation: site-linha-sobe calc(var(--duracao-cena) * var(--site-ritmo)) var(--curva-entrada) both; animation-delay: calc((var(--i, 0) * 110ms + 100ms) * var(--site-ritmo)); }
:is(.site-abertura__titulo, .site-links__frase).is-linhas .site-abertura__miniatura > video { animation: site-linha-sobe calc(var(--duracao-cena) * var(--site-ritmo)) var(--curva-entrada) both; animation-delay: calc((var(--n, 3) * 110ms + 350ms) * var(--site-ritmo)); }
:is(.site-abertura__titulo, .site-links__frase).is-solta :is(.site-linha-mascara, .site-linha-texto) { display: inline; overflow: visible; padding: 0; margin: 0; animation: none; }
@keyframes site-linha-sobe { from { transform: translateY(110%); } }
@keyframes site-aparece { to { opacity: 1; } }
@media (max-width: 760px) {
  .site-abertura { min-height: 64svh; gap: var(--espaco-7); }
  .site-abertura__linha { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--espaco-5); }
  .site-abertura__linha > :nth-child(n) { grid-column: auto; }
  /* celular: em cima, nome e Menu; embaixo, a disponibilidade e o ano (as redes ficam no menu e no rodapé) */
  .site-abertura__linha > :is(:nth-child(2), :nth-child(3)) { display: none; }
}

/* ---------- transição entre páginas, como a do Kierkegaard (kierkegaard.framer.website): ao clicar num link do site, a
   tela se cobre de azul em quadrados (de cima para baixo, com um pouco de acaso); a página nova nasce coberta e o azul se
   desfaz em quadrados, também de cima para baixo. Os quadrados são desenhados num canvas por um script curto no começo
   do <body> (templates.mjs, TRANSICAO); aqui ficam a cor, a camada e a cobertura lisa da página nova até esse script
   assumir (com saída de segurança em 1,5 s, se ele não rodar). */
:root { --site-cor-transicao: var(--azul-500); }
.site-transicao { position: fixed; inset: 0; z-index: calc(var(--z-tooltip) + 1); width: 100%; height: 100%; pointer-events: none; }
html.com-transicao::after { content: ""; position: fixed; inset: 0; z-index: calc(var(--z-tooltip) + 1); background: var(--site-cor-transicao); animation: site-transicao-some var(--duracao-media) ease-out 1.5s forwards; }
@keyframes site-transicao-some { to { opacity: 0; visibility: hidden; } }

/* ---------- animação de abertura da home, como a do Milo: um véu no fundo da página cobre tudo; capas grandes (27% da
   largura, em 3:2, com o canto dos cartões de projeto) aparecem uma a uma numa grade de tijolos (4, 3, 4) em volta do centro; depois as de fora se afastam e
   somem, o véu se desfaz e a capa do centro desce até o vídeo pequeno da frase. Quem anima é o site.js; sem JavaScript ou
   com movimento reduzido ela não existe. Enquanto roda, a página não rola, a linha de baixo da abertura espera e o vídeo
   pequeno fica escondido até a capa pousar nele. ---------- */
/* --site-ritmo multiplica os tempos da abertura (CSS e site.js): 1 na home, 0,6 na página de links (mais rápida) */
:root { --site-ritmo: 1; }
.site-intro--tela, .site-links--miniatura { --site-ritmo: .6; }
.site-intro { display: none; }
.js .site-intro { --w: 27vw; --h: calc(var(--w) * 2 / 3); --vao: 2.5vw; display: block; position: fixed; inset: 0; z-index: var(--z-modal); overflow: hidden; cursor: pointer; }
.site-intro__fundo { position: absolute; inset: 0; background: var(--fundo); }
.site-intro__img {
  --x: 0; --y: 0; --ordem: 0; /* a posição na grade e a ordem de entrada vêm de cada capa (style no HTML) */
  position: absolute; left: calc(50% + var(--x) * (var(--w) + var(--vao)) - var(--w) / 2); top: calc(50% + var(--y) * (var(--h) + var(--vao)) - var(--h) / 2);
  width: var(--w); height: var(--h); object-fit: cover; border-radius: var(--raio-2xl); opacity: 0;
}
@media (max-width: 760px) { .js .site-intro { --w: 58vw; --vao: 4vw; } .site-intro__img { border-radius: var(--raio-xl); } }
/* a entrada é do CSS, desde a primeira pintura (não espera o script): a capa do centro já está lá e as outras entram
   em seguida, 35 ms uma depois da outra. Se o site.js não assumir (is-controlada), o véu sai sozinho depois de 4 s. */
.js .site-intro__img { animation: site-intro-entra calc((var(--duracao-media) + 50ms) * var(--site-ritmo)) var(--curva-entrada) both; animation-delay: calc(var(--ordem) * 35ms * var(--site-ritmo)); }
.js .site-intro__img[data-centro] { animation: none; opacity: 1; }
@keyframes site-intro-entra { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.js .site-intro:not(.is-controlada) { animation: site-intro-sai var(--duracao-media) ease-out 4s forwards; }
@keyframes site-intro-sai { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .js .site-intro { display: none; } }
:root[data-movimento="reduzido"].js .site-intro { display: none; }
/* página de links: as capas fecham a tela inteira. A altura de cada capa é a maior entre o 3:2 e um terço da tela (com
   uma sobra), então as três faixas cobrem a altura em qualquer tela; no celular em pé as capas ficam mais largas (80% da
   tela), para as faixas de cima e de baixo terem duas capas visíveis e não sobrar fundo nas laterais. A capa recorta a
   imagem (object-fit). As duas capas extras nas pontas da faixa do meio fecham as laterais no computador. */
.js .site-intro--tela { --h: max(calc(var(--w) * 2 / 3), calc((100svh - var(--vao) * 2) / 3 + 2svh)); }
@media (orientation: portrait) { .js .site-intro--tela { --w: 80vw; --vao: 3vw; } }
html { scrollbar-gutter: stable; }
html.intro-ativa { overflow: hidden; }
.intro-segura .site-abertura .nt-entra { animation-play-state: paused; }
.intro-ativa .site-abertura__miniatura > video { opacity: 0; }
:is(.site-abertura__titulo, .site-links__frase).sem-subida .site-abertura__miniatura > video { animation: none; }

/* ---------- reel: uma janela da altura da tela logo abaixo da abertura. O vídeo fica preso à tela (fixed) e a janela
   (clip-path) só mostra a parte dele que está por baixo dela: ao rolar, a página passa por cima do vídeo parado. ---------- */
.site-reel { height: 100svh; clip-path: inset(0); }
.site-reel__video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: site-reel-entra var(--duracao-cena) var(--curva-entrada) .4s both; }
@keyframes site-reel-entra { from { opacity: 0; } }
.site-reel__pausa { position: absolute; z-index: 1; right: var(--site-margem); bottom: var(--espaco-6); }
@media (prefers-reduced-motion: reduce) {
  .js :is(.site-abertura__titulo, .site-links__frase)[data-linhas] { opacity: 1; animation: none; }
  .site-reel__video { animation: none; }
}
:root[data-movimento="reduzido"].js :is(.site-abertura__titulo, .site-links__frase)[data-linhas] { opacity: 1; animation: none; }
:root[data-movimento="reduzido"] .site-reel__video { animation: none; }

/* ---------- ritmo das páginas ---------- */
.site-topo { display: grid; gap: var(--espaco-5); justify-items: start; padding-top: calc(var(--espaco-13) + var(--espaco-5)); padding-bottom: var(--espaco-9); }
.site-topo__titulo { max-width: 18ch; }
.site-colado { padding-top: 0; }
.site-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--espaco-5); margin-bottom: var(--espaco-9); }
.site-cab__titulo { display: grid; gap: var(--espaco-4); }
.stack-site { display: grid; gap: var(--espaco-10); }
.site-texto { margin: 0; max-width: 56ch; color: var(--tinta-2); }
.site-texto--forte { color: var(--tinta); }

/* ---------- frase de abertura (depois do hero) ---------- */
.site-manifesto__corpo { display: grid; gap: var(--espaco-6); justify-items: start; }
.site-manifesto__frase { max-width: 34ch; color: var(--tinta); }

/* ---------- projetos: a organização do portfólio Ora (ora-portfolio.framer.website). As linhas alternam um par e um
   projeto inteiro, com calha estreita; o cartão é a capa inteira, de cantos arredondados, com categoria, título e a pílula
   "Ver projeto" embaixo, no centro. Num par, o cartão sob o mouse (ou com foco) cresce para 60% e o vizinho cede para 40%:
   a capa já tem a largura maior desde o início e fica centrada, então ela se revela, não estica. As alturas seguem a
   largura da grade (cqi), com teto na altura da tela; o par é um pouco mais baixo que a linha inteira, para as capas
   em 16:9 não perderem as laterais. ---------- */
.site-trabalhos { --calha-trabalhos: var(--espaco-4); container-type: inline-size; display: grid; gap: var(--calha-trabalhos); }
.site-fileira { display: flex; gap: var(--calha-trabalhos); height: min(46cqi, 82svh); }
.site-fileira--par { height: min(37cqi, 78svh); }
.site-trabalho {
  position: relative; isolation: isolate; flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden; border-radius: var(--raio-2xl); background: var(--superficie-3); color: var(--tinta); text-decoration: none;
  transition: flex-grow calc(var(--duracao-cena) * .6) var(--curva-entrada);
}
.site-trabalho__midia { position: absolute; inset: 0; z-index: 0; }
/* o véu do sistema esticado para baixo: o topo da capa fica limpo, como no Ora, e o escuro se concentra atrás do texto */
.site-trabalho > .nt-capa__veu { inset: auto 0 0; height: 160%; }
.site-trabalho__midia > img { position: absolute; top: 0; left: 50%; width: 100%; height: 100%; max-width: none; object-fit: cover; translate: -50% 0; }
.site-fileira--par .site-trabalho__midia > img { width: calc((100cqi - var(--calha-trabalhos)) * .6); }
/* embaixo, de ponta a ponta: o nome da campanha à esquerda e o cliente à direita, na mesma linha de base (a última,
   se o nome quebrar) */
.site-trabalho__texto { position: relative; z-index: 2; flex: 1; display: flex; justify-content: space-between; align-items: last baseline; gap: var(--espaco-5); padding: var(--espaco-6) var(--espaco-7); }
.site-trabalho__titulo { flex: 1 1 auto; min-width: 0; margin: 0; }
.site-trabalho__cliente { flex: 0 1 auto; max-width: 50%; color: var(--tinta-2); text-align: right; }
@media (hover: hover) and (pointer: fine) {
  .site-fileira--par > .site-trabalho:hover { flex-grow: 1.5; }
}
.site-fileira--par > .site-trabalho:focus-visible { flex-grow: 1.5; }
/* depois do último projeto da home, a pílula "Ver todos os projetos", no centro */
.site-ver-todos { display: flex; justify-content: center; margin-top: var(--espaco-9); }
@media (prefers-reduced-motion: reduce) { .site-trabalho { transition: none; } }
:root[data-movimento="reduzido"] .site-trabalho { transition: none; }
/* celular: um projeto por linha, todos do mesmo tamanho */
@media (max-width: 760px) {
  .site-fileira, .site-fileira--par { flex-direction: column; height: auto; }
  .site-trabalho { flex: none; aspect-ratio: 1; border-radius: var(--raio-xl); }
  .site-fileira--par .site-trabalho__midia > img { width: 100%; }
  .site-trabalho__texto { gap: var(--espaco-4); padding: var(--espaco-5); }
  .site-trabalho__texto > * { font-size: 1rem; line-height: 1.25; }
}

/* ---------- O que faço, como as Capabilities do portfólio de Tommas Quinn: a seção ocupa a tela, de ponta a ponta, com
   uma foto de fundo (escurecida); o rótulo fica no alto à esquerda e as frentes de trabalho, em letras grandes, da coluna 8
   em diante. A frente ativa fica acesa (branco) e as outras apagadas; trocar de frente troca o fundo numa fusão rápida,
   com a foto nova assentando de 104% para 100%. A seção fica presa na tela (sticky) dentro de um trilho com 40% da altura
   da tela de rolagem para cada frente: rolando, o destaque desce de uma frente para a próxima (site.js); o mouse e o
   foco também acendem uma frente. ---------- */
.site-capacidades-trilho { --n: 6; height: calc(100svh + var(--n) * 40svh); }
.site-capacidades {
  isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-calha-desktop); align-content: start;
  position: sticky; top: 0; height: 100svh; padding: calc(var(--site-barra-altura) + var(--espaco-6)) var(--site-margem) var(--espaco-9);
  background: var(--neutro-1000); color: var(--tinta);
}
.site-capacidades__fundos { position: absolute; inset: 0; z-index: -1; }
.site-capacidades__fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.62); opacity: 0; scale: 1.04; transition: opacity var(--duracao-media) ease-out, scale var(--duracao-cena) var(--curva-entrada); }
.site-capacidades__fundo.is-ativo { opacity: 1; scale: 1; }
.site-capacidades__fundo--galeria img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.site-capacidades__fundo--galeria img.is-vista { visibility: visible; }
.site-capacidades__rotulo { grid-column: 1 / span 6; margin: 0; }
.site-capacidades__lista { grid-column: 8 / -1; margin: 0; padding: 0; list-style: none; }
.site-capacidades__item { display: inline-block; color: inherit; text-decoration: none; font-size: clamp(2.25rem, 4.2vw, 4.75rem); line-height: 1.17; letter-spacing: -.035em; opacity: .28; transition: opacity var(--duracao-media) var(--curva-padrao); }
.site-capacidades__item.is-ativo { opacity: 1; }
@media (max-width: 760px) {
  .site-capacidades__rotulo { grid-column: 1 / -1; margin-bottom: var(--espaco-7); }
  .site-capacidades__lista { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .site-capacidades__fundo, .site-capacidades__item { transition: none; } .site-capacidades__fundo { scale: 1; } }

/* ---------- marcas: no tema claro, os logos nas cores das marcas (como no Framer); no escuro, em uma cor só ---------- */
.site-marcas-bloco { display: grid; gap: var(--espaco-7); margin-top: var(--espaco-11); }
.site-marcas-bloco__titulo { margin: 0; color: var(--tinta-3); }
.site-marcas-linhas { display: grid; gap: var(--espaco-8); }
.site-marcas__trilho { margin: 0; gap: var(--espaco-11); padding: 0 var(--espaco-11) 0 0; list-style: none; }
/* a segunda faixa corre no sentido contrário */
.site-marcas--volta .nt-logos__trilho { animation-direction: reverse; }
.site-marcas__trilho > li { flex: none; display: grid; place-items: center; color: var(--tinta-3); transition: color var(--duracao-instante) ease-out; }
.site-logo-cor { display: block; height: calc(var(--espaco-9) * var(--alt, 1)); width: auto; max-width: 100%; }
/* o logo de uma cor é uma máscara: a forma vem do arquivo, a cor vem do texto (tinta-3, tinta no hover) */
.site-logo-marca {
  display: block; height: calc(var(--espaco-9) * var(--alt, 1)); max-width: 100%; background: currentColor;
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.site-marcas-grade .site-logo-marca, .site-marcas-grade .site-logo-cor { height: calc(var(--espaco-8) * var(--alt, 1)); }
@media (max-width: 640px) {
  /* no celular, logos menores e mais juntos: cabem uns três na tela (o vão e o recuo final andam juntos, para o laço não pular) */
  .site-marcas .site-logo-cor, .site-marcas .site-logo-marca { height: calc(var(--espaco-7) * var(--alt, 1)); }
  .site-marcas .site-marcas__trilho { gap: var(--espaco-8); padding-right: var(--espaco-8); }
  .site-marcas-linhas { gap: var(--espaco-6); }
}
.site-logo-marca--escuro { display: none; }
[data-theme="escuro"] .site-logo-cor { display: none; }
[data-theme="escuro"] .site-logo-marca--escuro { display: block; }
@media (hover: hover) and (pointer: fine) { .site-marcas__trilho > li:hover { color: var(--tinta); } }

/* ---------- entrada ao rolar, como no rascunho do Framer: os projetos e o convite sobem aparecendo,
   os cartões de "O que faço" assentam (de 105% para 100%) e a faixa de logos aparece. A segunda coluna vem depois. ---------- */
.js [data-entra] { transition-property: opacity, translate, scale; transition-duration: var(--duracao-cena); transition-timing-function: var(--curva-entrada); transition-delay: calc(var(--i, 0) * 120ms); }
.js [data-entra="sobe"]:not(.is-visivel) { opacity: 0; translate: 0 var(--espaco-7); }
.js [data-entra="aparece"]:not(.is-visivel) { opacity: 0; }
.js [data-entra="assenta"]:not(.is-visivel) { scale: 1.05; }
@media (prefers-reduced-motion: reduce) { .js [data-entra] { transition: none; opacity: 1; translate: none; scale: none; } }
:root[data-movimento="reduzido"].js [data-entra] { transition: none; opacity: 1; translate: none; scale: none; }

/* ---------- foto com resumo (home, como no portfólio antigo) e retrato da página Sobre ---------- */
.site-dupla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--espaco-6); align-items: center; }
.site-dupla__texto { grid-column: 7 / span 6; display: grid; gap: var(--espaco-5); justify-items: start; }
.site-midia { margin: 0; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--raio-3xl); background: var(--superficie-3); outline: 1px solid var(--contorno-imagem); outline-offset: -1px; }
.site-midia > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.site-midia--retrato { aspect-ratio: 3 / 4; }
.site-retrato__foto { grid-column: 1 / span 5; }
.site-retrato__foto--quadrada { aspect-ratio: 1; }
/* na home e na página Sobre, a foto fica do tamanho do texto ao lado: no máximo 28rem de largura (em tela larga ela não cresce sem fim) e
   o texto vem logo depois, com um respiro fixo entre os dois, em vez de seguir as colunas da grade */
.site-retrato { grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); column-gap: clamp(var(--espaco-9), 7vw, var(--espaco-13)); }
.site-retrato .site-retrato__foto { grid-column: 1; }
.site-retrato .site-dupla__texto { grid-column: 2; }
/* na página Sobre: a foto com no máximo 26rem (perto de um terço da área de conteúdo) e o primeiro parágrafo da bio como
   linha de abertura maior, para o texto ganhar peso ao lado da foto (ela fica só um pouco mais alta que ele) */
.site-retrato--sobre { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); }
.site-retrato--sobre .site-dupla__texto { max-width: 38rem; }
.site-texto--lide { font-size: clamp(1.375rem, 1.9vw, 1.875rem); line-height: 1.3; letter-spacing: -.015em; }
/* a assinatura no fim do resumo: grande e em negrito (o <b> dá o peso), no lugar dos canais de contato */
.site-retrato__assinatura { margin: var(--espaco-4) 0 0; font-size: clamp(2.25rem, 4.6vw, 5.5rem); line-height: 1; letter-spacing: -.04em; color: var(--tinta); }
@media (max-width: 860px) { .site-retrato__foto, .site-dupla__texto, .site-retrato :is(.site-retrato__foto, .site-dupla__texto) { grid-column: 1 / -1; } .site-retrato { grid-template-columns: minmax(0, 1fr); } .site-retrato__foto { max-width: 30rem; } }

/* ---------- página de projeto ---------- */
/* a ficha do projeto em pílulas de dado (cliente, papel, entregas, agência, ano), sem linha por cima */
/* abertura do projeto: título à esquerda e a descrição ao lado, à direita */
.site-topo--projeto { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; column-gap: var(--grid-calha-desktop); justify-items: stretch; }
.site-topo--projeto .site-topo__titulo { grid-column: 1 / span 6; }
.site-topo--projeto .site-topo__lide { grid-column: 7 / -1; }
.site-topo--projeto .site-topo__titulo { max-width: none; }
.site-topo__lide { padding-top: var(--espaco-4); max-width: 46ch; }
@media (max-width: 860px) { .site-topo--projeto .site-topo__titulo, .site-topo--projeto .site-topo__lide { grid-column: 1 / -1; } .site-topo__lide { padding-top: 0; } }
/* ficha técnica no fim da página, dentro de uma caixa */
.site-ficha-tecnica .nt-ficha__grupo dd { overflow-wrap: anywhere; }
/* regra de diagramação dos projetos (GridEditorial e CaseCapitulo): 12 colunas com a calha do sistema; título do capítulo
   da coluna 1 à 5, fixo ao rolar; texto e destaques da 7 à 12 (a mesma coluna da descrição do topo), alinhados à
   esquerda e com no máximo 60 caracteres por linha; rótulo de mídia em pílula na coluna 1, colado na mídia que nomeia.
   Ritmo em linhas inteiras: 1 linha entre parágrafos, 3 entre blocos (2 no celular), 1 entre o rótulo e a mídia. */
.site-blocos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ritmo-3); padding-bottom: var(--ritmo-4); }
.site-capitulo { gap: var(--grid-calha-desktop); align-items: start; }
.site-capitulo .nt-capitulo__rotulo { grid-column: 1 / span 5; max-width: 16ch; color: var(--tinta); top: calc(var(--espaco-12) + var(--espaco-4)); font-size: clamp(1.5rem, 2.1vw, 2rem); line-height: 1.1; letter-spacing: -.02em; }
.site-capitulo .nt-capitulo__corpo { grid-column: 7 / -1; gap: var(--ritmo-1); }
.site-capitulo .nt-capitulo__destaque { max-width: 24ch; color: var(--tinta); }
.site-capitulo .nt-capitulo__corpo p:not(.nt-capitulo__destaque) { max-width: 60ch; }
.site-rotulo-midia { justify-self: start; margin-bottom: calc(var(--ritmo-1) - var(--ritmo-3)); }
@media (max-width: 860px) {
  .site-blocos { gap: var(--ritmo-2); }
  .site-capitulo .nt-capitulo__rotulo, .site-capitulo .nt-capitulo__corpo { grid-column: 1 / -1; }
  .site-rotulo-midia { margin-bottom: calc(var(--ritmo-1) - var(--ritmo-2)); }
}

/* imagens em linhas justificadas: a mesma altura na linha, sem cortar nenhuma peça */
.site-imagens { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espaco-4); }
.site-linha { display: flex; gap: var(--espaco-4); width: 100%; max-width: min(100%, calc(var(--soma, 2) * 62.5%)); margin-inline: auto; }
.site-linha__item { flex-basis: 0; min-width: 0; margin: 0; overflow: hidden; aspect-ratio: var(--ar); border-radius: var(--raio-2xl); background: var(--superficie-3); outline: 1px solid var(--contorno-imagem); outline-offset: -1px; }
.site-linha__item > img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) {
  .site-linha { flex-wrap: wrap; gap: var(--espaco-3); max-width: 100%; }
  .site-linha__item { flex: 1 1 40%; border-radius: var(--raio-xl); }
  .site-imagens { gap: var(--espaco-3); }
}

/* vídeos: o player do sistema na proporção original; verticais lado a lado */
.site-video { display: grid; grid-template-columns: minmax(0, 1fr); }
/* player estreito (vertical, celular): sai o tempo, ficam play, barra e tela cheia */
.site-blocos .nt-player { container-type: inline-size; }
@container (max-width: 26rem) { .nt-player__tempo, .nt-player__volume { display: none; } }
@container (max-width: 14rem) { .nt-player__barra { min-width: 0; margin: 0; } }
.site-player--916 { aspect-ratio: 9 / 16; width: 100%; max-width: min(100%, calc(80svh * .5625)); margin-inline: auto; }
.site-player--45 { aspect-ratio: 4 / 5; width: 100%; max-width: min(100%, calc(80svh * .8)); margin-inline: auto; }
.site-videos { display: grid; gap: var(--espaco-4); width: 100%; margin-inline: auto; }
.site-videos--vertical { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); max-width: calc(var(--n, 2) * 22rem); }
.site-videos--vertical > .site-player--916 { max-width: none; }
.site-videos--paisagem { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-videos--paisagem > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 640px) { .site-videos--paisagem { grid-template-columns: minmax(0, 1fr); } }
.site-yt > iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; }
.site-audio { display: grid; gap: var(--espaco-3); margin: 0; }
.site-audio > figcaption { color: var(--tinta-2); }
.site-audio > audio { width: 100%; }
.site-comparador { margin: 0; }
.site-comparador__antes { left: var(--espaco-4); }
.site-comparador__depois { right: var(--espaco-4); }

/* projeto anterior e próximo: caixas com a capa em retângulo ao lado do nome */
.site-vizinhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-5); }
.site-vizinho { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--espaco-6); align-items: center; color: var(--tinta); text-decoration: none; }
.site-vizinho--anterior { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); }
.site-vizinho__capa { display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: calc(var(--raio-3xl) - var(--caixa-pad) / 2); background: var(--superficie-3); }
.site-vizinho__capa > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 600ms var(--curva-entrada); }
.site-vizinho__texto { display: grid; gap: var(--espaco-3); justify-items: start; min-width: 0; }
.site-vizinho__titulo { overflow-wrap: anywhere; }
.site-vizinho__cliente { color: var(--tinta-2); }
.site-vizinho__seta { display: grid; place-items: center; width: var(--espaco-10); height: var(--espaco-10); border-radius: var(--raio-pilula); background: var(--primario); color: var(--sobre-primario); transition: translate var(--duracao-media) var(--curva-entrada); }
.site-vizinho__seta svg { width: 40%; height: 40%; }
@media (max-width: 1100px) { .site-vizinhos { grid-template-columns: minmax(0, 1fr); } }
/* no celular a capa vai para cima nos dois cartões; no anterior, a seta fica antes do texto */
@media (max-width: 560px) {
  .site-vizinho { grid-template-columns: minmax(0, 1fr) auto; } .site-vizinho__capa { grid-column: 1 / -1; }
  .site-vizinho--anterior { grid-template-columns: auto minmax(0, 1fr); } .site-vizinho--anterior .site-vizinho__capa { order: -1; }
}

/* ---------- sobre ---------- */
/* cada experiência numa caixa, separadas por espaço, sem as linhas */
.site-exps { display: grid; gap: var(--espaco-3); margin: 0; padding: 0; list-style: none; }
.site-exp { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--espaco-4) var(--espaco-6); }
.site-exp__cab { grid-column: 1 / span 4; display: grid; gap: var(--espaco-2); align-content: start; }
.site-exp__lugar, .site-exp__papel { margin: 0; }
.site-exp__papel { color: var(--tinta-3); }
.site-exp__texto { grid-column: 6 / -1; margin: 0; max-width: 64ch; color: var(--tinta-2); }
@media (max-width: 860px) { .site-exp__cab, .site-exp__texto { grid-column: 1 / -1; } }
.site-processo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .site-processo { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 600px) and (max-width: 900px) { .site-processo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- contato ---------- */
/* cada canal numa caixa que é o link: o ícone no círculo, o nome pequeno e o endereço grande, sem linhas */
.site-canais { display: grid; gap: var(--espaco-3); }
.site-canal { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 3fr); gap: var(--espaco-5); align-items: center; color: var(--tinta); text-decoration: none; }
.site-canal__icone { display: grid; place-items: center; width: calc(var(--espaco-9) - var(--espaco-1)); height: calc(var(--espaco-9) - var(--espaco-1)); border-radius: 50%; background: var(--pilula-circulo); color: var(--pilula-circulo-tinta); }
.site-canal__icone svg { width: var(--espaco-5); height: var(--espaco-5); }
.site-canal__rotulo { margin: 0; color: var(--tinta-3); }
.site-canal__valor { min-width: 0; color: var(--tinta); overflow-wrap: anywhere; transition: color var(--duracao-instante) ease-out; }
.site-base { margin: var(--espaco-6) 0 0; color: var(--tinta-3); }
@media (max-width: 640px) { .site-canal { grid-template-columns: auto minmax(0, 1fr); gap: var(--espaco-2) var(--espaco-4); } .site-canal__icone { grid-row: span 2; } }


/* ---------- rodapé, como o do portfólio de Jacob Turner: um vídeo em tela cheia (escurecido, com o véu do sistema) e,
   por cima, no tema escuro, o rótulo e o logo K✶F, os contatos em letras grandes com uma etiqueta pequena no alto do fim
   da linha e, depois de um fio, a linha de informações nas colunas 1, 4, 8 e 12. No hover, as letras perto do cursor se
   alargam (site.js escreve o transform de cada letra; aqui só a origem e a transição). ---------- */
.site-rodape {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: auto auto 1fr auto; min-height: 100svh;
  padding: calc(var(--site-barra-altura) + var(--espaco-6)) var(--site-margem) var(--espaco-5); background: var(--neutro-1000); color: var(--tinta);
}
.site-rodape__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.72); }
.site-rodape > :not(.site-rodape__video, .nt-capa__veu) { position: relative; z-index: 2; }
.site-rodape__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--espaco-5); }
/* a frase de convite tem o mesmo tamanho, entrelinha e espaçamento dos contatos logo abaixo, mas em cinza, para se
   diferenciar deles */
.site-rodape__frase { margin: 0; color: var(--tinta-2); }
.site-rodape__logo { color: inherit; }
.site-rodape__logo .site-logo { height: var(--espaco-7); }
.site-rodape__contatos { display: grid; justify-items: start; margin: var(--espaco-3) 0 0; padding: 0; list-style: none; }
.site-rodape__contato { display: inline-flex; align-items: flex-start; gap: var(--espaco-2); color: inherit; text-decoration: none; }
.site-rodape__frase, .site-rodape__contato { font-size: clamp(1.75rem, 5.6vw, 6rem); line-height: 1.12; letter-spacing: -.045em; }
.site-rodape__letras { white-space: nowrap; }
.site-rodape__letras > span { display: inline-block; white-space: pre; transform-origin: 50% 100%; transition: transform var(--duracao-media) var(--curva-entrada); }
.site-rodape__etiqueta { margin-top: var(--espaco-3); letter-spacing: 0; }
.site-rodape__base { grid-row: 4; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-calha-desktop); align-items: baseline; padding-top: var(--espaco-5); border-top: 1px solid var(--borda-forte); }
.site-rodape__base > :nth-child(1) { grid-column: 1 / span 3; }
.site-rodape__base > :nth-child(2) { grid-column: 4 / span 4; }
.site-rodape__base > :nth-child(3) { grid-column: 8 / span 4; }
.site-rodape__base > :nth-child(4) { grid-column: 12 / span 1; justify-self: end; white-space: nowrap; }
.site-rodape a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .site-rodape__base a:hover { text-decoration: underline; text-underline-offset: .2em; } }
@media (max-width: 760px) {
  .site-rodape__frase, .site-rodape__contato { line-height: 1.2; }
  .site-rodape__base { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--espaco-3); }
  .site-rodape__base > :nth-child(1) { display: none; }
  .site-rodape__base > :nth-child(2) { grid-column: 1; grid-row: 1; }
  .site-rodape__base > :nth-child(4) { grid-column: 2; grid-row: 1; }
  .site-rodape__base > :nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) { .site-rodape__letras > span { transition: none; } }


@media (hover: hover) and (pointer: fine) {
  .site-canal:hover .site-canal__valor, .site-vizinho:hover .site-vizinho__titulo { color: var(--destaque); }
  .site-vizinho:hover .site-vizinho__capa > img { scale: calc(1 + .03 * var(--nt-movimento)); }
  .site-vizinho--proximo:hover .site-vizinho__seta { translate: calc(var(--espaco-1) * var(--nt-movimento)) 0; }
  .site-vizinho--anterior:hover .site-vizinho__seta { translate: calc(var(--espaco-1) * -1 * var(--nt-movimento)) 0; }
}

/* ---------- página de links (links/index.html): o link da bio nas redes sociais, toda no tema escuro do sistema
   (data-theme no <html>), numa coluna estreita e sem a barra e o rodapé do site. Aprovada em 2026-10-17. A capa é a foto
   em 4:5 que some no fundo da página por uma máscara (media/links/mascara-capa.svg, passada no HTML como --site-mascara,
   como os logos das marcas); sem véu, que escurecia além do fundo e deixava uma emenda;
   por cima, o logo KAYMI ✶ FRANÇA, DIRETOR CRIATIVO e a frase, centralizados. Depois, o reel em loop, o carrossel de
   projetos (rolagem nativa com encaixe), a pílula do portfólio e as redes. ---------- */
/* peso light só no DIRETOR CRIATIVO (pedido do Kaymi; o design system não tem light, a fonte vem em static/fonts.css) */
:root { --site-peso-leve: 300; --site-mascara: none; }
.site-links { width: 100%; max-width: 30rem; margin-inline: auto; }
/* a foto fica atrás, presa ao topo e subida (sem a sobra clara em cima da cabeça); o texto vem no fluxo, depois do rosto
   (o respiro de cima é o padding em % da largura, então acompanha a foto), com respiro também embaixo, antes do reel */
.site-links__capa { position: relative; overflow: hidden; padding: 76% var(--espaco-5) var(--espaco-4); color: var(--tinta); }
.site-links__foto { position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; translate: 0 -9.4%; -webkit-mask: var(--site-mascara) center / 100% 100% no-repeat; mask: var(--site-mascara) center / 100% 100% no-repeat; }
.site-links__apresentacao { position: relative; z-index: 2; display: grid; justify-items: center; gap: var(--espaco-2); text-align: center; }
.site-links__nome { width: 100%; margin: 0; line-height: 0; }
.site-links__nome svg { display: block; width: 100%; max-width: 18.75rem; height: auto; margin-inline: auto; fill: currentColor; }
.site-links__papel { margin: calc(var(--espaco-1) * -1) 0 0; font-size: 1rem; line-height: 1.25; font-weight: var(--site-peso-leve); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta); }
.site-links__frase { margin: calc(var(--espaco-1) / 2) 0 0; max-width: 32ch; color: var(--tinta-2); text-wrap: balance; }
/* com {miniatura} (teste de 2026-10-17): a frase vira uma manchete pequena, como a da abertura da home (tinta cheia,
   entrelinha e espaço entre letras apertados), com o vídeo pequeno da home entre "soluções" e "criativas"; sobe linha a
   linha depois da animação das capas (site.js) */
/* respiro igual em cima e embaixo da frase: 32 px até DIRETOR CRIATIVO (a margem soma com o gap de 8 da coluna) e 32 px
   até o reel (o padding de 16 embaixo da capa mais os 16 em cima do corpo) */
/* o maior tamanho em que "soluções [vídeo] criativas" (site-links__junto, 8,46 vezes a letra) ainda cabe numa linha da
   coluna, com 2% de folga: a letra é medida pela largura do bloco de texto (container), então acompanha a tela */
.site-links--miniatura .site-links__apresentacao { container-type: inline-size; }
.site-links--miniatura .site-links__frase { margin-top: calc(var(--espaco-7) - var(--espaco-2)); max-width: none; font-size: 11.58cqi; line-height: 1.02; letter-spacing: -.03em; color: var(--tinta); }
.site-links__junto { white-space: nowrap; }
.site-links__corpo { display: grid; gap: var(--espaco-5); padding: var(--espaco-4) var(--espaco-4) var(--espaco-7); }
.site-links__reel { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--raio-2xl); background: var(--caixa); }
.site-links__reel video { display: block; width: 100%; height: 100%; object-fit: cover; }
.site-links__trabalhos { display: grid; gap: var(--espaco-3); }
.site-links__cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espaco-3); padding-inline: var(--espaco-1); }
.site-links__cab h2 { margin: 0; }
.site-links__dica { flex: none; color: var(--tinta-3); }
.site-links__carrossel { display: flex; gap: .625rem; margin: 0 calc(var(--espaco-4) * -1); padding: 0 var(--espaco-4); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--espaco-4); scrollbar-width: none; overscroll-behavior-x: contain; }
.site-links__carrossel::-webkit-scrollbar { display: none; }
.site-links__carrossel > li { flex: 0 0 74%; scroll-snap-align: start; }
.site-links__card { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--raio-2xl); color: var(--tinta); text-decoration: none; }
.site-links__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.site-links__card > .nt-capa__veu { inset: auto 0 0; height: 160%; }
.site-links__card-texto { position: absolute; z-index: 2; left: .875rem; right: .875rem; bottom: var(--espaco-3); display: flex; justify-content: space-between; align-items: flex-end; gap: var(--espaco-2); }
.site-links__card-titulo { font-size: .875rem; line-height: 1.25; }
.site-links__card-cliente { max-width: 45%; color: var(--tinta-2); text-align: right; }
.site-links__site { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--espaco-3); padding: .375rem; border: 1px solid var(--pilula-borda); border-radius: var(--raio-pilula); background: var(--pilula-fundo); color: var(--tinta); text-decoration: none; transition: border-color var(--duracao-rapida) var(--curva-padrao); }
.site-links__site:hover { border-color: var(--borda-forte); }
.site-links__site-imagem { width: 3.25rem; height: 3.25rem; border-radius: 50%; object-fit: cover; }
.site-links__site-texto { display: grid; gap: .125rem; }
.site-links__site-titulo { font-size: 1rem; line-height: 1.25; }
.site-links__site-endereco { color: var(--tinta-3); }
.site-links__seta { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--primario); color: var(--sobre-primario); transition: translate var(--duracao-rapida) var(--curva-padrao); }
.site-links__seta svg { width: 1.25rem; height: 1.25rem; }
.site-links__site:hover .site-links__seta { translate: calc(var(--espaco-1) * var(--nt-movimento, 1)) 0; }
.site-links__redes { display: flex; justify-content: center; gap: .625rem; margin: 0; padding: 0; list-style: none; }
.site-links__rede { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border: 1px solid var(--pilula-borda); border-radius: 50%; background: var(--pilula-fundo); color: var(--tinta); transition: border-color var(--duracao-rapida) var(--curva-padrao); }
.site-links__rede:hover { border-color: var(--borda-forte); }
.site-links__rede svg { width: 1.375rem; height: 1.375rem; }
.site-links__assina { margin: 0; text-align: center; color: var(--tinta-3); }
/* no computador a coluna fica no meio da tela, com respiro em cima e a capa de cantos arredondados */
@media (min-width: 560px) {
  .site-links { padding-block: var(--espaco-8); }
  .site-links__capa { border-radius: var(--raio-3xl); }
}