/* ----------------------------------------------------------------------------
 * Manrope ExtraBold — só o wordmark
 * ----------------------------------------------------------------------------
 * AUTO-HOSPEDADA de propósito, não vinda do Google Fonts. A política de
 * privacidade deste site afirma que não há ferramenta de rastreamento; buscar
 * a fonte num terceiro faria o navegador do visitante entregar o IP dele a
 * cada visita, contradizendo o próprio texto por 14 KB. Também é mais rápido:
 * sem DNS e sem handshake TLS extra.
 *
 * Subconjunto latim + acentos do português, convertida de OTF para WOFF2:
 * 71 KB viraram 13,5 KB.
 *
 * `swap`: o texto aparece na hora com a fonte do sistema e troca quando a
 * Manrope chega. Sem isso, o cabeçalho fica invisível durante o carregamento.
 *
 * Um peso só, e só na marca. O corpo do texto segue em system-ui: fonte de
 * leitura o visitante já tem, e baixar outra não melhora nada que ele perceba.
 * ---------------------------------------------------------------------------- */
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-extrabold.woff2?v=1787253109") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ============================================================================
 * SmartPost — institucional
 * ============================================================================
 * Os TOKENS abaixo seguem o sistema da casa: mesmos nomes de variável usados
 * por Linkgram, Atlas, Marcdown e Accounts. Nome próprio (`--sp-*`) tornaria
 * nada aqui reaproveitável e faria o dia de unificar virar reescrita.
 *
 * O bloco de tokens é auto-contido de propósito: quando o painel existir, ele
 * é copiado para lá (hosts diferentes não compartilham arquivo por HTTP) e só
 * o resto do arquivo muda.
 *
 * ⚠️ `color-scheme` é obrigatório nos dois temas. Sem ele o popup do <select>
 *    nativo e as barras de rolagem nascem com as cores do sistema, brigando
 *    com a página — armadilha documentada no tokens.css do Linkgram.
 * ============================================================================ */

:root {
  color-scheme: light;

  /* ---- Fundo ---- */
  --color-bg:            #FAFAF8;   /* off-white QUENTE — é o chassi da casa */
  --color-bg-card:       #FFFFFF;
  --color-bg-hover:      #F0EFEC;

  /* ---- Texto ---- */
  --color-text:          #1A1A1A;
  --color-text-muted:    #6B6B68;
  --color-text-subtle:   #999996;
  --color-text-inverse:  #FAFAF8;

  /* ---- Bordas ---- */
  --color-border:        #E2E1DD;
  --color-border-strong: #C8C7C2;
  --color-border-subtle: #EBEAE6;

  /* ---- Primária ------------------------------------------------------------
     Rosa profundo. A escolha é por ELIMINAÇÃO dentro da família: azul do
     Telegram é do Linkgram, azul-oceano do Atlas, royal do LinkMail, verde do
     LinkZap, preto do KRP, violeta do Marcdown e do Marcup. Rosa não tinha
     dono — e nomeia o Instagram sem copiar a marca da Meta, o que importa
     numa página que um revisor deles vai abrir.

     DUAS COISAS DIFERENTES, mesma lógica dos dois azuis do Linkgram:
     `--brand` é a cor de SER VISTA (logo, favicon) e `--color-primary` é a de
     SER CLICADA. Aqui as duas passam em contraste, mas a separação fica —
     no dia em que a marca ficar mais viva, a primária não vai junto.

     #9D174D: 7,54 sobre o fundo, 7,88 com texto branco em cima. Folga larga
     sobre o mínimo de 4,5, inclusive em link de texto pequeno.             */
  --brand:               #C2185B;
  --color-primary:       #9D174D;
  --color-primary-hover: #851140;
  --color-primary-text:  #FFFFFF;

  /* ---- Semânticos (significado, não decoração) ---- */
  --color-success:       #137333;
  --color-warning:       #B06000;
  --color-danger:        #B3261E;
  --color-focus-ring:    #1A73E8;

  --font-marca: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Medida de leitura ----
     ~65 caracteres. Linha mais longa que isso faz o olho perder o retorno. */
  /* ⚠️ O EIXO DA PÁGINA, não a medida de leitura. 72rem de conteúdo (75 com o
     recuo, box-sizing border-box), para TODAS as páginas, cabeçalho incluído.
     Antes era 38rem — medida de parágrafo — servindo de largura de página, o
     que fazia tudo virar um corredor no meio da tela. A medida de parágrafo
     agora é `--leitura`, aplicada só na prosa (Marcos, 05/09: "quero o padrão
     em todo o site, não só em uma página"). */
  --medida:              75rem;
  --leitura:             44rem;
}

html.dark {
  color-scheme: dark;

  --color-bg:            #191919;
  --color-bg-card:       #232323;
  --color-bg-hover:      #2A2A2A;

  --color-text:          #ECECEC;
  --color-text-muted:    #A8A8A6;
  --color-text-subtle:   #6B6B68;
  --color-text-inverse:  #1A1A1A;

  --color-border:        #353535;
  --color-border-strong: #4A4A4A;
  --color-border-subtle: #2A2A2A;

  /* Mesma matiz (339 contra 336), clareada para o fundo escuro: 6,64 sobre
     #191919. O texto sobre ela é um rosa quase preto, análogo ao #06283A que
     o Linkgram usa sobre o azul dele. */
  --brand:               #F08FB4;
  --color-primary:       #EC7BA3;
  --color-primary-hover: #F08FB4;
  --color-primary-text:  #2E0413;

  --color-success:       #4CAF50;
  --color-warning:       #F2B445;
  --color-danger:        #F28B82;
  --color-focus-ring:    #8AB4F8;
}


/* ============================================================================
 * LAYOUT
 * ============================================================================ */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---- cabeçalho ---- */

.topo {
  border-bottom: 1px solid var(--color-border);
  padding: 1.1rem 0;
  background: var(--color-bg-card);
}

/* ---- a barra que flutua sobre o hero -------------------------------------
   Molde: `institucional_cabecalho.php` do Marcup, com `$cabecalhoFixo`. Lá, em
   Alpine: `fixed inset-x-0 top-0 z-50 border-b transition-all duration-300`,
   `bg-transparent border-white/10` no topo e `bg-marca-700/95 shadow-lg
   backdrop-blur border-transparent` depois de 24px de rolagem.

   ⚠️ O TEXTO NÃO VIRA BRANCO, e essa é a única coisa que não copio. No Marcup
      o hero é escuro e o texto do cabeçalho é branco por cima dele. O nosso
      hero é comida sobre off-white: texto branco ali desapareceria. */
.topo--flutuante {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom-color: transparent;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.topo--flutuante.topo--rolou {
  /* 95% e não 100%, como no Marcup: com o desfoque por trás, a barra
     translúcida deixa ver que há página passando embaixo dela. Opaca, ela lê
     como um bloco separado grudado no topo. */
  background: color-mix(in srgb, var(--color-bg-card) 95%, transparent);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-bottom-color: var(--color-border);
  box-shadow: 0 6px 24px -14px rgb(0 0 0 / .3);
}

/* A barra saiu do fluxo, então `main` começa em zero. Quem tem hero de tela
   cheia quer exatamente isso; o recuo de quem NÃO tem é responsabilidade da
   página, e hoje só a home do Prêmios flutua. */
.tem-topo-flutuante main { padding-top: 0; }

/* A marca nasce no MESMO eixo do conteúdo: `max-width` da página e o mesmo
   recuo do `main`. Logo colada no canto esquerdo com o conteúdo começando 130px
   depois é o segundo eixo que a página não pode ter.

   ⚠️ O EIXO É O `.topo-int`, e não o link. Até 14/09 a regra era `.topo a`,
      porque o cabeçalho tinha um link só; com o menu, a mesma regra daria eixo
      e recuo a cada item do menu. */
.topo-int {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--medida);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.topo-marca {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

/* ---- o menu: dois links e o botão -----------------------------------------
   No celular os links saem e o botão fica: é a ação que interessa a quem chegou,
   e três itens ao lado da marca não cabem em 375px. Os links continuam no
   rodapé, então nada fica sem caminho. */
.topo-nav { display: flex; align-items: center; gap: 1.4rem; }
.topo-link {
  color: var(--color-text-muted);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.topo-link:hover, .topo-link[aria-current="page"] { color: var(--color-primary); }
.topo-cta {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: .45rem 1.05rem;
  border-radius: 2rem;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-size: .9375rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, transform .2s ease;
}
.topo-cta:hover { background: var(--color-primary-hover); color: var(--color-primary-text); transform: translateY(-1px); }

@media (max-width: 47.9rem) {
  .topo-link { display: none; }
  /* 44px de altura, e não 36: é o alvo de toque mínimo recomendado, e este é o
     botão que a pessoa tenta acertar com o polegar rolando a página. */
  .topo-cta { min-height: 2.75rem; padding: .4rem 1rem; font-size: .875rem; }
}
@media (max-width: 24rem) {
  .marca-por { display: none; }
}

/* ---- a barra sobre FOTO ESCURA: o padrão do Marcup inteiro -----------------
   Aqui o texto VIRA branco, ao contrário da barra flutuante de cima (lá o hero
   é comida sobre off-white). O hero da home e da landing é foto com véu escuro,
   então: transparente com texto branco no topo, e ao rolar a barra ganha a COR
   da marca — `bg-marca-700/95` no Marcup, rosa a 95% aqui.

   ⚠️ O ROSA É O #9D174D FIXO, e não `--color-primary`. No tema escuro a
      primária vira um rosa claro (#EC7BA3), e texto branco em cima dele não
      passa de 2:1. A barra sobre foto é a mesma nos dois temas. */
.topo--sobre-foto .marca,
.topo--sobre-foto .topo-link { color: #fff; }
.topo--sobre-foto .marca-por { color: rgb(255 255 255 / .8); }
.topo--sobre-foto .topo-link:hover,
.topo--sobre-foto .topo-link[aria-current="page"] { color: #fff; text-decoration: underline; text-underline-offset: .35em; }
.topo--sobre-foto .topo-cta { background: #fff; color: #9D174D; }
.topo--sobre-foto .topo-cta:hover { background: #FCE7F0; color: #851140; }
.topo--flutuante.topo--sobre-foto.topo--rolou {
  background: color-mix(in srgb, #9D174D 95%, transparent);
  border-bottom-color: transparent;
  box-shadow: 0 8px 28px -14px rgb(46 4 19 / .55);
}
/* No topo da página a barra precisa de um véu próprio: o hero escurece do
   centro para a direita, e a marca branca no canto superior esquerdo pode cair
   sobre um pedaço claro da foto. */
.topo--sobre-foto:not(.topo--rolou) {
  background: linear-gradient(180deg, rgb(20 6 12 / .45), rgb(20 6 12 / 0));
}

/* O link "pular para o conteúdo": invisível até receber foco pelo teclado. */
.pular {
  position: absolute; left: .75rem; top: -3rem; z-index: 60;
  padding: .5rem .9rem; border-radius: .5rem;
  background: var(--color-bg-card); color: var(--color-text); font-weight: 650;
}
.pular:focus { top: .75rem; }

/* O `main` sem eixo: a página desenha as próprias faixas (ver `$mainLivre`). */
main.main--livre { max-width: none; padding: 0; }

/* ---- o WhatsApp flutuante, animado ----------------------------------------
   Cópia do `.wpp-fab` do Biscoitos da Madrinha (Marcos, 14/09: "o animado, tem
   no biscoitos da madrinha"). O verde é o #128C4B de lá, e não o #25D366 da
   marca do WhatsApp: com o ícone branco em cima, o claro não passa contraste.
   A onda que pulsa sai para quem pediu menos movimento. */
.zap-fab {
  position: fixed;
  right: clamp(1rem, 3vw, 1.8rem);
  bottom: clamp(1rem, 3vw, 1.8rem);
  z-index: 70;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #128C4B;
  color: #fff;
  box-shadow: 0 16px 34px -10px rgba(18, 140, 75, .7);
  transition: transform .3s ease;
}
.zap-fab:hover { transform: scale(1.08) rotate(4deg); color: #fff; }
.zap-fab svg { width: 32px; height: 32px; }
.zap-fab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(18, 140, 75, .5);
  animation: zap-pulsa 2.4s ease-out infinite;
}
@keyframes zap-pulsa { to { box-shadow: 0 0 0 18px rgba(18, 140, 75, 0); } }
@media (prefers-reduced-motion: reduce) { .zap-fab::after { animation: none; } }

/* Largura e altura no HTML também, não só aqui: sem elas o texto pula quando
   a imagem carrega. */
.selo {
  width: 30px;
  height: 30px;
  display: block;
  border-radius: 7px;   /* 23% — acompanha o raio do próprio selo */
}

.marca {
  font-family: var(--font-marca);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -.03em;   /* a Manrope foi desenhada para entrelinha apertada */
  line-height: 1;

  /* Rosa, e não a cor do texto: o cabeçalho do site tem que ser o MESMO logo
     que está em `marca/lockup.png`, usado em proposta, slide e assinatura.
     Site com wordmark preto e arquivo com wordmark rosa são duas marcas, e a
     diferença aparece no dia em que as duas peças ficam lado a lado. */
  color: var(--color-primary);
}

.marca-por {
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}

/* ---- corpo ---- */

main {
  flex: 1;
  width: 100%;
  max-width: var(--medida);
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

/* A PROSA fica na medida de leitura (~70 caracteres), mas encostada no eixo,
   não centralizada. Só os filhos DIRETOS do `main`: as páginas de documento
   (guia, privacidade, termos) escrevem parágrafos direto nele; as seções de
   grade (Prêmios) são `<section>` e ficam fora desta lista de propósito.
   Tabela e bloco de código largos rolam dentro da própria caixa. */
main > :is(h1, h2, h3, h4, p, ul, ol, dl, blockquote, figure, table, pre):not([class]),
.lado-a-lado__principal > :is(h1, h2, h3, h4, p, ul, ol, dl, blockquote, figure, table, pre):not([class]),
main > .vigencia, .lado-a-lado__principal > .vigencia {
  max-width: var(--leitura);
}
main > :is(table, pre):not([class]), .lado-a-lado__principal > :is(table, pre):not([class]) { overflow-x: auto; }
/* ⚠️ `:not([class])`: prosa é elemento SEM classe; componente tem classe. Sem
   esta ressalva a regra pegava a galeria de frases (`<ul class="pr-frases">`,
   filha direta do main) e prendia uma grade de três colunas em 704px — cards
   de 225px num eixo de 1152. Medido em 05/09. */

h1 {
  margin: 0 0 .35rem;
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: balance;
}

h2 {
  margin: 2.5rem 0 .75rem;
  font-size: 1.1875rem;
  letter-spacing: -.01em;
  text-wrap: balance;
}

h3 {
  margin: 1.75rem 0 .5rem;
  font-size: 1rem;
  color: var(--color-primary);
}

p, li { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin-bottom: .5rem; }

a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

strong { font-weight: 650; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .875em;
  background: var(--color-bg-hover);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: .1em .35em;
}

.vigencia {
  color: var(--color-text-muted);
  font-size: .875rem;
  margin-bottom: 2rem;
}

.nota {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: 6px;
  padding: 1rem 1.15rem;
  margin: 1.5rem 0;
}
.nota > :last-child { margin-bottom: 0; }

.def { margin: 0 0 1.25rem; }
.def dt { font-weight: 650; margin-bottom: .15rem; }
.def dd { margin: 0 0 1rem; color: var(--color-text-muted); }

/* ---- rodapé ---- */

.rodape {
  border-top: 1px solid var(--color-border);
  padding: 1.5rem;
  font-size: .8125rem;
  color: var(--color-text-muted);
  background: var(--color-bg-card);
}

.rodape-int {
  max-width: var(--medida);
  margin: 0 auto;
  /* O mesmo recuo do `main` e da marca: sem ele o "2026 Constructo" nascia 24px
     à esquerda do eixo de tudo — o rodapé era a única coisa fora do alinhamento. */
  padding: 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  align-items: baseline;
}

.rodape a { color: var(--color-text-muted); text-decoration: none; }
.rodape a:hover { color: var(--color-primary); text-decoration: underline; }
.rodape-sep { flex: 1; }

@media (max-width: 30rem) {
  main { padding-top: 2rem; }
  .rodape-sep { display: none; }
}


/* ============================================================================
 * GUIA — passo a passo longo, lido no celular
 * ============================================================================
 * A pessoa que lê isto é leiga e está com o Facebook aberto noutra aba. O
 * desenho serve a isso: passo numerado que ela reencontra depois de sair da
 * página, confirmação visível ao fim de cada etapa, e o número do portfólio
 * grande o bastante para não errar ao digitar.
 * ============================================================================ */

.sumario {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1.15rem 1.25rem;
  margin: 2rem 0 2.5rem;
}
.sumario h2 { margin: 0 0 .75rem; font-size: .8125rem; letter-spacing: .1em;
              text-transform: uppercase; color: var(--color-text-muted); }
.sumario ol { margin: 0; padding-left: 1.35rem; }
.sumario li { margin-bottom: .35rem; }

/* Cada etapa numerada. `scroll-margin-top` para o título não colar no topo
   quando ela volta pelo sumário. */
.etapa {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
  scroll-margin-top: 1.5rem;
}
.etapa:first-of-type { border-top: 0; }

.etapa > h2 {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-top: 0;
  font-size: 1.3125rem;
}

.etapa-num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-size: .875rem;
  font-weight: 700;
  align-self: center;
}

/* O número de cada sub-passo (1.1, 1.2) em destaque, para ela achar de novo
   depois de trocar de aba. */
.passo { font-weight: 700; color: var(--color-primary); }

/* Confirmação ao fim da etapa: leigo não sabe se deu certo sem isto. */
.pronto {
  display: flex;
  gap: .6rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-success);
  border-radius: 6px;
  padding: .85rem 1rem;
  margin: 1.25rem 0 0;
}
.pronto strong { color: var(--color-success); }
.pronto > :last-child { margin-bottom: 0; }

.aviso {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-warning);
  border-radius: 6px;
  padding: .95rem 1.1rem;
  margin: 1.25rem 0;
}
.aviso > :last-child { margin-bottom: 0; }

/* O número do portfólio: grande, monoespaçado e com botão de copiar.
   Digitar 16 dígitos no celular erra; copiar não. */
.copiavel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  padding: .9rem 1rem;
  margin: 1.25rem 0;
}
.copiavel code {
  font-size: 1.125rem;
  letter-spacing: .04em;
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.copiavel button {
  margin-left: auto;
  font: inherit;
  font-size: .875rem;
  font-weight: 650;
  padding: .45rem .9rem;
  border: 0;
  border-radius: 6px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  cursor: pointer;
}
.copiavel button:hover { background: var(--color-primary-hover); }

/* Perguntas frequentes */
.faq { margin-top: 1.5rem; }
.faq dt { font-weight: 650; margin-bottom: .2rem; }
.faq dd { margin: 0 0 1.25rem; color: var(--color-text-muted); }

@media (max-width: 30rem) {
  .etapa { margin-top: 2.25rem; padding-top: 1.5rem; }
  .copiavel button { margin-left: 0; width: 100%; }
}

/* ---- a faixa de logos (parceiros e patrocinadores) ----------------------
   Mora no site.css porque vale para o site INTEIRO: Prêmios e também
   privacidade, termos e exclusão de dados (Marcos, 05/09).
   Azulejo do mesmo tamanho do card (56px) e o nome miúdo embaixo. Quem
   patrocina prêmio leva a borda na cor da marca. Na lateral (participar, no
   desktop) a lista vira coluna: azulejo menor, nome ao lado. */
/* O mesmo cartão do "Comunicado oficial": borda fina, filete de 4px na cor da
   marca à esquerda e o selo antes do rótulo (Marcos, 05/09: "podia ter um
   detalhe na cor accent, tipo o comunicado"). */
.pr-faixa-parceiros {
  margin: clamp(2rem, 6vw, 3.5rem) 0 0; padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--color-border-strong); border-left: 4px solid var(--color-primary);
  border-radius: .625rem; background: var(--color-bg-card);
}
.pr-faixa-parceiros__rotulo { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.pr-faixa-parceiros__rotulo img { width: 18px; height: 18px; border-radius: .25rem; }
.pr-faixa-parceiros__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; }
.pr-faixa-parceiros__item { display: flex; flex-direction: column; align-items: center; gap: .45rem; width: 5.75rem; text-decoration: none; color: var(--color-text-muted); font-size: .75rem; line-height: 1.2; text-align: center; }
.pr-faixa-parceiros__item:hover { color: var(--color-primary); }
.pr-faixa-parceiros__item img, .pr-faixa-parceiros__iniciais { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; background: var(--color-bg-card); border: 1px solid var(--color-border); transition: transform .2s, border-color .2s; }
.pr-faixa-parceiros__item:hover img, .pr-faixa-parceiros__item:hover .pr-faixa-parceiros__iniciais { transform: translateY(-2px); border-color: var(--color-primary); }
.pr-faixa-parceiros__iniciais { display: grid; place-items: center; font-family: var(--font-marca); font-weight: 800; font-size: 1.2rem; letter-spacing: -.03em; color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card)); }
.pr-faixa-parceiros__item--patro img, .pr-faixa-parceiros__item--patro .pr-faixa-parceiros__iniciais { border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border)); }
.pr-faixa-parceiros__nome { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- lado a lado: conteúdo + coluna de parceiros (chassi, pagina.php) ----
   Celular: uma coluna, a faixa no fim. Desktop: coluna de 15rem à direita,
   fixa ao rolar. Tela larga (≥1500px): a coluna SAI do eixo e ocupa a margem
   direita, e o conteúdo fica com a largura inteira dos 72rem, alinhado com o
   topo — é o "bastante espaço nas laterais" sendo usado. */
.lado-a-lado { display: grid; gap: 1.5rem; }
.lado-a-lado__principal { min-width: 0; }
@media (min-width: 1024px) {
  .lado-a-lado { grid-template-columns: minmax(0, 1fr) 15rem; gap: 3rem; align-items: start; }
  .lado-a-lado__lado { position: sticky; top: 5.5rem; }
  .pr-faixa-parceiros--lateral { margin-top: 0; }
  .pr-faixa-parceiros--lateral .pr-faixa-parceiros__lista { flex-direction: column; gap: .7rem; }
  .pr-faixa-parceiros--lateral .pr-faixa-parceiros__item { flex-direction: row; width: auto; text-align: left; gap: .7rem; font-size: .8125rem; }
  .pr-faixa-parceiros--lateral .pr-faixa-parceiros__item img, .pr-faixa-parceiros--lateral .pr-faixa-parceiros__iniciais { width: 44px; height: 44px; border-radius: 11px; flex: 0 0 auto; }
}
@media (min-width: 1500px) {
  .lado-a-lado { margin-right: -18rem; }
}

/* ---- a chamada para o Prêmios, no alto da home ----------------------------
   Arte do ciclo à esquerda (a mesma do hero, 16:9), texto à direita, os três
   prêmios em lista e dois botões. Uma coluna no celular, arte em cima. Não é
   prosa: tem classe, então ocupa o eixo inteiro. */
.chamada-premios {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  margin: 0 0 3rem; overflow: hidden;
  border: 1px solid var(--color-border-strong); border-radius: .875rem;
  background: var(--color-bg-card);
}
.chamada-premios__arte {
  display: block; min-height: 100%;
  background: var(--chamada-arte) center / cover no-repeat, var(--color-bg-hover);
}
.chamada-premios__texto { padding: 1.5rem 1.75rem 1.6rem; display: flex; flex-direction: column; gap: .7rem; border-left: 4px solid var(--color-primary); }
.chamada-premios__kicker { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); }
.chamada-premios__titulo { margin: 0; font-family: var(--font-marca); font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.chamada-premios__tema { margin: 0; font-weight: 650; font-size: 1.0625rem; }
.chamada-premios__premios { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; font-size: .9375rem; }
.chamada-premios__pos { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.6rem; margin-right: .25rem; padding: 0 .4rem; border-radius: 2rem; background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card)); color: var(--color-primary); font-weight: 800; font-size: .75rem; letter-spacing: .02em; }
.chamada-premios__meta { margin: 0; font-size: .875rem; color: var(--color-text-muted); }
.chamada-premios__acoes { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
.chamada-premios__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: .6rem 1.25rem;
  border: 1px solid var(--color-primary); border-radius: .625rem;
  background: var(--color-primary); color: var(--color-primary-text);
  font-weight: 650; text-decoration: none;
}
.chamada-premios__btn:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.chamada-premios__btn--leve { background: transparent; color: var(--color-primary); }
.chamada-premios__btn--leve:hover { background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary); }
@media (max-width: 47.9rem) {
  .chamada-premios { grid-template-columns: 1fr; }
  .chamada-premios__arte { aspect-ratio: 16 / 9; min-height: 0; }
  .chamada-premios__texto { border-left: 0; border-top: 4px solid var(--color-primary); padding: 1.25rem 1.25rem 1.4rem; }
  .chamada-premios__btn { flex: 1 1 auto; }
}