/*
 * PlanejaMídia — layout próprio, sistema de design compartilhado.
 *
 * A ESTRUTURA desta página é dela: hero, texto de abertura, quadrantes
 * alternados, cartões de edição e banner. Isso não se mistura com a
 * atvriosul e não deve ser uniformizado.
 *
 * Já os VALORES visuais são os do atv.css, a folha que define a
 * identidade do site. Nada aqui deve inventar escala própria:
 *
 *   container ......... 1140px / recuo 12px      (padrão Bootstrap, = atvriosul)
 *   seção ............. padding 100px 0          (.section)
 *   título de seção ... 2.8rem / 700 / lh 1.2    (.section-title; 2.2rem <= 768px)
 *   subtítulo ......... 1.2rem / lh 1.5          (.section-subtitle)
 *   título de bloco ... clamp(1.6, 2.6vw, 2.2rem) / 500 / lh 1.22
 *                                                (.about-content .section-title)
 *   corpo ............. 1.02rem / lh 1.65        (.about-texto)
 *   hero .............. clamp(1.7, 3vw, 2.9rem) / 500  +  clamp(.95, 1.2vw, 1.1rem)
 *   botão ............. pad .72rem 1.5rem / .95rem / 600 / raio 999px (.btn-atv)
 *   cartão ............ raio 20px / pad 40px 30px / sombra 0 10px 30px #0000000f
 *                                                (.feature-card)
 *   quebras ........... 991px e 767px (768px para os títulos, como no atv.css)
 *
 * Mudou algo no atv.css? Traga a mudança para cá também, senão as duas
 * páginas voltam a divergir.
 */

/* Escala única de arredondamento e de respiro vertical. Antes cada peça
   tinha o seu (32, 24, 20, 16, 12px), o que deixava a página sem um
   sistema visível. */
/* Os valores abaixo são os mesmos do atv.css, a folha que define a
   identidade do site — não uma escala própria desta página. Alterar aqui
   sem alterar lá quebra a padronização entre as duas. */
.pm-wrap {
  /* 20px é o raio dominante do sistema (cartões e imagens da atvriosul) */
  --pm-raio-g: 20px;   /* peças grandes: quadrantes, banners */
  --pm-raio-m: 20px;   /* cartões */
  --pm-raio-p: 12px;   /* elementos miúdos */
  /* Mesmo respiro vertical de seção do restante do site (.section) */
  --pm-secao: 100px;
}

/* ===== Cores em degradê aplicáveis pelo editor =====
   Os quatro degradês que o projeto já usa. O texto recebe a cor pelo
   recorte do fundo, então precisa de `inline-block` para o gradiente ter
   caixa própria — sem isso, num texto que quebra em duas linhas o
   degradê reinicia em cada linha. */
.pm-c-marca,
.pm-c-quente,
.pm-c-roxo,
.pm-c-frio,
.pm-c-livre {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Se o navegador não suportar o recorte, o texto some. O fallback
     devolve uma cor sólida antes de a regra acima ser aplicada. */
  -webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .pm-c-marca, .pm-c-quente, .pm-c-roxo, .pm-c-frio, .pm-c-livre {
    color: var(--primary);
    -webkit-text-fill-color: currentColor;
    background: none;
  }
}

.pm-c-marca  { background-image: linear-gradient(135deg, #8c0cfe 0%, #0091ff 100%); }
.pm-c-quente { background-image: linear-gradient(135deg, #ff00cc, #ff6b00); }
.pm-c-roxo   { background-image: linear-gradient(135deg, #8a2be2, #007bff); }
.pm-c-frio   { background-image: linear-gradient(135deg, #6e00ff, #007bff); }

/* ===== Tamanhos de texto aplicáveis pelo editor =====
   Em `em`, e não `px`, para o trecho acompanhar a escala do elemento onde
   está: um "grande" dentro de um título continua maior que o corpo. */
.pm-t-p  { font-size: 0.82em; }
.pm-t-g  { font-size: 1.25em; }
.pm-t-gg { font-size: 1.55em; }

/* ===== Grid base =====
   No PlanejaMídia esta folha não definia `.container`: aquela página carrega
   o CSS do Bootstrap, e valia o de lá (1140px com 12px de recuo). O Talentos
   carrega só o JS do Bootstrap, então ao portar a folha o `.container` ficou
   sem estilo nenhum — largura cheia e recuo zero, que era o texto encostando
   nas bordas da página. As medidas abaixo são as mesmas do Bootstrap 5, para
   o resultado continuar igual ao da página de referência. */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 12px;
}

@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

.pm-wrap .section {
  padding: var(--pm-secao) 0;
}

/* Duas seções seguidas somam o recuo de baixo de uma com o de cima da
   outra — 100 + 100 = 200px de vão, que abre um buraco no meio da
   página. Zerando o de cima da seguinte, o intervalo passa a ser um
   `--pm-secao` limpo, que é a unidade do sistema. A atvriosul resolve o
   mesmo problema à mão, encurtando o recuo de algumas seções.
   A primeira seção não é afetada: ela vem depois do hero, que não é
   `.section`, e mantém o respiro cheio. */
.pm-wrap .section + .section {
  padding-top: 0;
}

#edicoes,
#ultima-edicao {
  scroll-margin-top: 90px;
}

/* ===== Faixa de um bloco do Talentos =====
   Cada bloco montado no editor vira uma faixa própria na página. Sem estas
   regras as faixas saíam sem recuo nenhum e o texto de um bloco encostava
   no do seguinte — e a cor escolhida no editor não aparecia no site, porque
   a regra do fundo só existia na folha do editor.

   O recuo NÃO é zerado entre faixas seguidas (ao contrário de `.section`):
   aqui cada faixa costuma ter cor de fundo própria, e encurtar o recuo de
   cima faria o texto colar na dobra entre duas cores. */
/* O respiro é o da página multiplicado pelo fator do bloco (100% → 1), que o
   editor grava em `--tal-bloco-espaco`. Sem o fator vale 1, que é o de
   sempre — blocos antigos não mudam de lugar. */
.tal-bloco {
  padding: calc(var(--pm-secao, 72px) * var(--tal-bloco-espaco, 1)) 0;
}

.tal-bloco > .container {
  position: relative;
}

/* A faixa pinta o próprio fundo com as variáveis que o editor grava nela.
   Sem cor escolhida as variáveis não existem e a faixa fica transparente,
   herdando o fundo da página. */
.tal-bloco--colorido {
  background: var(--tal-bloco-fundo);
  color: var(--tal-bloco-texto);
}

/* A cor do texto vale tanto na faixa colorida (onde ela é calculada a partir
   do fundo) quanto num bloco em que só o texto foi pintado à mão. */
.tal-bloco--colorido,
.tal-bloco--texto-cor {
  color: var(--tal-bloco-texto);
}

.tal-bloco--colorido .pm-head h2,
.tal-bloco--colorido .pm-head p,
.tal-bloco--colorido .pm-prose h2,
.tal-bloco--colorido .pm-prose p,
.tal-bloco--colorido .pm-tile-conteudo h2,
.tal-bloco--colorido .pm-tile-conteudo h3,
.tal-bloco--colorido .pm-tile-conteudo p,
.tal-bloco--colorido .pm-lista li,
.tal-bloco--colorido .tal-categoria__nome,
.tal-bloco--texto-cor .pm-head h2,
.tal-bloco--texto-cor .pm-head p,
.tal-bloco--texto-cor .pm-prose h2,
.tal-bloco--texto-cor .pm-prose p,
.tal-bloco--texto-cor .pm-tile-conteudo h2,
.tal-bloco--texto-cor .pm-tile-conteudo h3,
.tal-bloco--texto-cor .pm-tile-conteudo p,
.tal-bloco--texto-cor .pm-lista li,
.tal-bloco--texto-cor .tal-categoria__nome,
.tal-bloco--texto-cor .tal-info__rotulo,
.tal-bloco--texto-cor .tal-info__valor {
  color: var(--tal-bloco-texto);
}

/* Boa parte das páginas do Talentos (login, cadastro, inscrição, contato,
   vencedores...) usa `<section id="sobre">` como moldura padrão do conteúdo.
   O recuo delas vinha das regras do cartão antigo do "Sobre", que saíram
   junto com ele — sem isto o conteúdo dessas páginas cola na barra do topo.
   Só o respiro: fundo e grade eram do cartão e não voltam. */
#sobre {
  /* Recuo lateral também: essas páginas montam o cartão direto na seção,
     sem `.container`, então sem isso ele encosta na borda em tela estreita. */
  padding: var(--pm-secao, 72px) 24px;
}

.tal-centro {
  text-align: center;
  margin-top: 32px;
}

.tal-vazio {
  text-align: center;
  opacity: .75;
}

/* ===== Bloco "Fique por dentro" =====
   Os itens ficam lado a lado numa faixa só, em vez da coluna estreita que
   a versão antiga prendia ao lado do texto de abertura. */
.tal-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 64px;
}

.tal-info__item {
  display: grid;
  grid-template-columns: 18px auto;
  align-items: start;
  gap: 4px 8px;
}

.tal-info__item img {
  width: 18px;
  height: 18px;
  margin-top: 3px;
}

.tal-info__rotulo {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--pink, #ff22af);
  text-transform: uppercase;
}

/* O valor cai para a linha de baixo, alinhado ao rótulo (e não ao ícone). */
.tal-info__valor {
  grid-column: 2;
  margin: 0;
  font-size: 17px;
}

@media (max-width: 600px) {
  .tal-info {
    justify-content: flex-start;
    gap: 20px 32px;
  }
}

/* ===== Banner de ponta a ponta =====
   O da PÁGINA PRINCIPAL. Abre a seção como o topo das outras páginas do
   portal: sem `.container`, encostando nas duas bordas da tela.

   Sem recorte escolhido a peça aparece inteira, na altura que a arte tiver —
   é o comportamento certo para um banner já diagramado, que não deve ser
   cortado por engano. */
.tal-banner-cheio {
  display: block;
}

.tal-banner-cheio__peca {
  display: block;
  position: relative;
  overflow: hidden;
}

.tal-banner-cheio__peca img {
  display: block;
  width: 100%;
  height: auto;
}

/* Com recorte escolhido, a moldura manda na altura e a arte preenche. */
.tal-banner-cheio__peca.pm-moldura {
  aspect-ratio: var(--pm-tile-proporcao, 16 / 9);
}

.tal-banner-cheio__peca.pm-moldura img {
  height: 100%;
  object-fit: cover;
}

/* ===== Bloco "Categorias" =====
   Um cartão por categoria: a foto em cima, o nome embaixo. Substitui a linha
   de nomes separados por bolinhas que havia antes — a mesma informação, mas
   com a arte que o prêmio já usava.

   O grid é `auto-fit` com mínimo de 170px: cinco cartões cabem lado a lado no
   desktop e vão quebrando sozinhos até ficarem dois no celular, sem media
   query e sem sobrar um cartão órfão esticado. */
.tal-categorias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 28px 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.tal-categoria {
  text-align: center;
}

.tal-categoria__foto {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(15, 23, 42, .06);
  box-shadow: 0 6px 18px rgba(16, 24, 40, .10);
  transition: transform .25s ease, box-shadow .25s ease;
}

.tal-categoria:hover .tal-categoria__foto {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(16, 24, 40, .16);
}

.tal-categoria__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tal-categoria__nome {
  margin: 14px 0 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ===== Vencedores ===== */
.tal-vencedor__categoria {
  color: var(--pink, #ff22af);
  margin-top: 32px;
}

.tal-vencedor {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.tal-vencedor__titulo {
  color: var(--purple, #6a24bd);
}

.tal-vencedor__video {
  max-width: 640px;
  aspect-ratio: 16 / 9;
}

/* ===== Hero =====
   Altura fluida na mesma escala das outras páginas de conteúdo
   (atvriosul, cases, cobertura), em vez de um valor fixo que ficava
   pequeno em telas grandes e desproporcional nas médias.
   O `object-position` é próprio porque a arte daqui é quadrada — a da
   atvriosul é 3:1, e o `right center` herdado cortaria esta foto no
   tronco em vez do rosto. */
.pm-wrap .hero-art {
  height: clamp(320px, 34vw, 560px);
  object-position: center 22%;
}

.pm-wrap .hero-texto {
  max-width: 46ch;
}

/* O título e o subtítulo do hero não são redefinidos aqui: valem os do
   atv.css — clamp(1.7rem, 3vw, 2.9rem)/500 e clamp(0.95rem, 1.2vw,
   1.1rem)/1.55 — para as duas páginas abrirem na mesma escala. */

/* No celular o atv.css solta a altura para mostrar a peça inteira — com
   arte quadrada isso viraria um bloco enorme antes do primeiro texto. */
/* Abaixo de 768px o atv.css solta a altura para exibir a peça inteira —
   funciona lá porque a arte é 3:1. Com a arte quadrada daqui isso viraria
   um bloco enorme antes do primeiro texto, então a faixa é recortada em
   33vw, que é exatamente a altura que uma peça 3:1 teria. */
@media (max-width: 768px) {
  .pm-wrap .hero-art {
    height: 33vw;
    object-fit: cover;
    object-position: center 22%;
  }
}

/* ===== Cabeçalho de seção =====
   Sem limite de largura aqui: quem decide quanto o título e o subtítulo
   ocupam é o controle de largura de cada campo, ajustado no editor. Com
   um `max-width` no contêiner, o campo a 100% ficava preso a esta caixa
   e não conseguia se estender pelo resto da página. */
/* O respiro abaixo do cabeçalho é o mesmo `margin-bottom: 3rem` que o
   .section-subtitle tem no atv.css, e o vão entre título e subtítulo é o
   `margin-bottom: 1.5rem` do .section-title. */
.pm-head {
  margin: 0 auto 3rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Mesma escala do .section-title */
.pm-head h2 {
  font-size: 2.8rem;
  line-height: 1.2;
  font-weight: 700;
  margin: 0;
}

/* Mesma escala do .section-subtitle */
.pm-head p {
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--text-color);
  margin: 0;
}

/* ===== Bloco de texto corrido (abertura) ===== */
/* A barrinha é posicionada, e não um item de flex: com `display: flex` no
   h2 todo <span> de formatação viraria item flex — ou seja, bloco — e o
   título quebraria em uma linha por trecho colorido. */
/* Mesma escala do .section-title: é o título que abre a seção */
.pm-prose h2 {
  position: relative;
  padding-left: 18px;
  font-size: 2.8rem;
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 1.5rem;
}

/* Barrinha vertical antes do título, como na referência.
   O preenchimento vem da variável --pm-kicker, escrita no HTML a partir do
   que foi escolhido no editor (cor chapada ou degradê). */
.pm-prose h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.08em;
  bottom: 0.08em;
  width: 4px;
  border-radius: 2px;
  background: var(--pm-kicker, linear-gradient(135deg, #8c0cfe 0%, #0091ff 100%));
}

.pm-prose.pm-k-nenhum h2::before { display: none; }
.pm-prose.pm-k-nenhum h2 { padding-left: 0; }

/* Imagem opcional ao lado do texto de abertura. Sem ela a abertura segue
   sendo um bloco simples e o texto ocupa a linha inteira. */
.pm-prose--com-img {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}

.pm-prose--img-direita .pm-prose__img {
  order: 2;
}

.pm-prose__img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

/* Em telas estreitas as duas colunas viram uma só, com a imagem em cima */
@media (max-width: 767px) {
  .pm-prose--com-img {
    grid-template-columns: 1fr;
  }

  .pm-prose--img-direita .pm-prose__img {
    order: 0;
  }
}

/* Medida de leitura: linha muito longa cansa e faz o olho perder a
   próxima. ~72 caracteres é o limite confortável. */
/* Corpo de texto na mesma escala do .about-texto do atv.css */
.pm-prose p {
  max-width: 72ch;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text-color);
  margin: 0 0 1.1rem;
}

.pm-prose p:last-child {
  margin-bottom: 0;
}

.pm-prose strong {
  font-weight: 600;
  color: var(--dark-text);
}

/* ===== Blocos alternados: gap 60px, colunas iguais ===== */
/* Grid (e não flex) para as colunas ficarem exatamente iguais: o
   aspect-ratio da imagem infla a coluna quando o dimensionamento é flex. */
/* Ao encolher a peça, quem encolhe é a COLUNA — não a peça dentro de uma
   coluna fixa. Centralizar a peça numa coluna do tamanho de antes deixava
   a borda dela desalinhada da margem do texto, e a linha perdia o prumo.
   Com `fr`, a sobra vai para o texto e os dois lados seguem rentes. */
.pm-tile-row {
  display: grid;
  grid-template-columns: minmax(0, var(--pm-tile-fr, 1fr)) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 3.75rem);
  align-items: center;
}

/* Na linha invertida a peça vai para a segunda faixa, então é a segunda
   que precisa carregar a proporção. */
.pm-tile-row--reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--pm-tile-fr, 1fr));
}

.pm-tile-row--reverse .pm-tile {
  order: 2;
}

.pm-tile-row--reverse .pm-tile-conteudo {
  order: 1;
}

/* O vão entre um quadrante e o próximo é proporcional à peça: cerca de
   7% da largura da imagem, a mesma relação da referência. Com os 6vw
   anteriores o vão passava de 14% e as linhas soltavam umas das outras,
   o que fazia a sequência perder o ritmo. */
.pm-tile-row + .pm-tile-row {
  margin-top: clamp(2rem, 3.2vw, 2.75rem);
}

/* Banner e bloco de texto ocupam a linha inteira, sem as duas colunas */
.pm-tile-row--largo {
  display: block;
}

/* Faixa larga: a altura vem da proporção da própria arte */
.pm-faixa {
  display: block;
  border-radius: var(--pm-raio-g);
  overflow: hidden;
  line-height: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pm-faixa img {
  display: block;
  width: 100%;
  height: auto;
}

a.pm-faixa:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}

/* Bloco só de texto: largura de leitura confortável e centralizado */
.pm-tile-conteudo--largo {
  max-width: 68ch;
  margin: 0 auto;
}

.pm-tile-conteudo--largo .pm-lista {
  max-width: none;
}

/* Imagem quadrada — a proporção da referência.
   A sombra dá profundidade e separa a peça do fundo branco, que sem ela
   deixava as imagens claras parecendo "coladas" na página. */
.pm-tile {
  position: relative;
  display: block;
  /* A forma do recorte é escolhida por quadrante; 1/1 é o padrão de sempre */
  aspect-ratio: var(--pm-tile-proporcao, 1 / 1);
  /* A peça preenche a faixa que lhe cabe; quem define o tamanho é a
     largura da própria faixa (--pm-tile-fr, na linha). */
  width: 100%;
  border-radius: var(--pm-raio-g);
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(15, 23, 42, 0.1);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Só a peça que leva a algum lugar reage ao mouse */
a.pm-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 46px rgba(15, 23, 42, 0.17);
}

/* O enquadramento vem de variáveis escritas na moldura pelo editor.
   O mesmo ponto focal serve de `object-position` e de `transform-origin`:
   assim o zoom aproxima justamente o trecho escolhido, em vez de puxar o
   assunto para fora do recorte. */
.pm-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pm-img-x, 50%) var(--pm-img-y, 18%);
  transform: scale(var(--pm-img-zoom, 1));
  transform-origin: var(--pm-img-x, 50%) var(--pm-img-y, 18%);
  display: block;
}

/* Peça gráfica: encaixada por inteiro sobre o degradê, sem recorte */
.pm-tile--card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: var(--gradient);
}

.pm-tile--card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  /* Encaixada sobre a cor a peça aparece inteira, então só o zoom faz
     sentido — o ponto focal serve apenas de origem da aproximação. */
  object-position: center;
}

.pm-tile--cor {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  background: var(--gradient);
}

.pm-tile__label strong {
  display: block;
  font-size: 40px;
  line-height: 44px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #fff;
}

.pm-tile__label span {
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.88);
}

.pm-tile__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.pm-tile__play span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--dark-text);
  font-size: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
}

.pm-tile__play:hover span {
  background: #fff;
  transform: scale(1.1);
}

/* Coluna de texto do bloco */
/* Título de bloco: a mesma escala secundária do atv.css
   (.about-content .section-title), um degrau abaixo do título de seção. */
.pm-tile-conteudo h2,
.pm-tile-conteudo h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.22;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}

.pm-tile-conteudo p {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text-color);
  margin: 0 0 1.25rem;
}

/* ===== Lista com marcador no degradê ===== */
.pm-lista {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.pm-lista li {
  position: relative;
  padding-left: 24px;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text-color);
}

.pm-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gradient);
}

/* ===== Etiquetas de cidade ===== */
.pm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

.pm-tags span {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--light-bg);
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-color);
}

/* ===== Botão =====
   Em pílula, como o .btn-atv do resto do site — o raio de 12px que veio
   da referência destoava de todas as outras páginas. */
.pm-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.72rem 1.5rem;
  border-radius: 999px;
  border: 1px solid rgba(110, 0, 255, 0.28);
  background: transparent;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* Mesmo hover do .btn-atv: só a cor muda, sem deslocamento */
.pm-btn:hover {
  background: rgba(110, 0, 255, 0.05);
  border-color: rgba(110, 0, 255, 0.55);
}

/* ===== Cards de edição ===== */
/* ===== Carrossel das edições =====
   A trilha é um simples container com rolagem horizontal e encaixe: no
   celular passa com o dedo, sem biblioteca nenhuma, e no computador as
   setas laterais empurram a trilha. Sem JS, continua rolável. */
/* Três cartões por vez. O cálculo desconta os dois vãos entre eles, para
   que a trilha termine exatamente na borda do terceiro — sem meio cartão
   sobrando, que é o que dava aparência de coisa cortada. */
.pm-edicoes {
  --pm-edicoes-gap: 16px;

  display: flex;
  gap: var(--pm-edicoes-gap);
  /* Âncora de posicionamento: com isto o `offsetLeft` dos cartões passa a
     ser medido a partir da própria trilha. Sem isso ele incluía a margem
     que centraliza a janela, e a conta da rolagem saía deslocada. */
  position: relative;
  /* `hidden`, e não `auto`: a passagem é sempre pelas setas, então não há
     rolagem livre nem arrasto — o JS move a trilha pelo `scrollLeft`, que
     continua funcionando mesmo com o excesso escondido. */
  overflow: hidden;
  /* `auto`, e não `smooth`: quem anima a trilha é o JS, quadro a quadro,
     porque só assim ele sabe a hora exata em que o movimento terminou
     para emendar a volta infinita sem solavanco. */
  scroll-behavior: auto;
  /* Folga só na vertical, para a sombra do cartão não ser aparada. A
     medida acompanha a sombra mais alta que o JS escreve (deslocamento de
     26px com 56px de esfumado): com os 14px de antes o recorte da trilha
     cortava o rodapé da sombra num traço reto. O recuo negativo devolve o
     espaço, então a seção continua ocupando a mesma altura de antes. */
  padding-block: 34px 90px;
  margin-block: -34px -90px;
}

/* Folga e esmaecimento das bordas são encenação do carrossel, então ficam
   sob `.pm-carrossel` — o editor usa a mesma classe `.pm-edicoes` para uma
   grade simples de quadradinhos e não deve herdar nada disso.

   Na horizontal só havia 12px de cada lado, bem menos que os 30px de
   esfumado da sombra (56px no cartão em foco): o `overflow: hidden` aparava
   a sombra e deixava um traço reto ao lado do cartão. O JS soma este recuo
   à largura da janela, então o espaço ocupado pelos cartões não muda. */
.pm-carrossel .pm-edicoes {
  padding-inline: var(--pm-edicoes-folga, 36px);

  /* E a borda da janela deixa de ser um corte seco: os últimos pixels
     esmaecem. O que sobra da sombra e do cartão vizinho sai de cena por
     transparência, em vez de terminar numa linha reta. A faixa do
     esmaecimento é menor que o recuo acima, então o cartão em foco nunca
     é tocado por ela. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--pm-edicoes-fade, 26px),
    #000 calc(100% - var(--pm-edicoes-fade, 26px)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--pm-edicoes-fade, 26px),
    #000 calc(100% - var(--pm-edicoes-fade, 26px)),
    transparent 100%
  );
}

.pm-edicoes::-webkit-scrollbar {
  display: none;
}

/* Arrasto com o dedo: `pan-y` entrega o eixo horizontal para o JS e deixa
   o vertical com o navegador, então passar o dedo sobre o carrossel para
   descer a página continua rolando normalmente. Sem isto o gesto lateral
   era engolido pela rolagem da página e o carrossel parecia travado.
   `touch-action` é a única forma de dizer isso ao compositor — não dá para
   resolver só com preventDefault. */
.pm-edicoes {
  touch-action: pan-y;
  cursor: grab;
  /* Sem isto o gesto seleciona o texto dos cartões enquanto arrasta. */
  -webkit-user-select: none;
  user-select: none;
}

.pm-edicoes.pm-arrastando {
  cursor: grabbing;
}

/* Durante o arrasto o cartão acompanha o dedo quadro a quadro; a transição
   de 0,22s ficaria correndo atrás e daria a sensação de atraso. */
.pm-edicoes.pm-arrastando .pm-edicao-card {
  transition: none;
}

.pm-edicoes:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

/* Perspectiva: o cartão do meio vem à frente e os das pontas recuam,
   girados. O JS só escreve as três variáveis abaixo conforme a distância
   de cada cartão até o centro da trilha — a transformação em si fica aqui,
   para o hover continuar funcionando por cima em vez de ser sobrescrito
   por um `transform` inline. */
/* Tudo o que é encenação do carrossel fica sob `.pm-carrossel`, que só
   existe na página publicada. Assim o editor — onde a lista é uma grade
   simples de quadradinhos — não herda giro, reflexo nem bloqueio de
   clique, sem precisar desfazer regra por regra. */
/* Largura natural do cartão em cada faixa. É só o VALOR PADRÃO: quem manda,
   quando existe, é o `--pm-card-w` que o JS fixa em pixels.

   Antes cada media query redeclarava `flex-basis` direto no cartão. Como
   vinham depois da regra abaixo, elas venciam o `--pm-card-w` — e aí a
   medida que o JS tinha acabado de tomar deixava de valer: ele media o
   cartão com 182px, estreitava a trilha para 182px, e o cartão virava 76%
   dessa nova trilha (120px). O passo guardado ficava 60px maior que o real
   e o erro somava a cada cartão, até o cartão ativo parar fora da tela —
   com os visíveis todos marcados como não clicáveis.

   Mantendo a variação por faixa numa VARIÁVEL, o valor do JS continua
   tendo a última palavra em qualquer largura de tela. */
.pm-carrossel .pm-edicoes {
  --pm-card-base: calc((100% - 2 * var(--pm-edicoes-gap)) / 3);
}

.pm-carrossel .pm-edicao-card {
  flex: 0 0 var(--pm-card-w, var(--pm-card-base));
  /* Só o cartão em foco recebe clique; os vizinhos são cenário. O JS
     liga isto no cartão do meio e o desliga nos demais. */
  pointer-events: var(--pm-card-clique, none);
  transform:
    perspective(1100px)
    rotateY(var(--pm-card-ry, 0deg))
    scale(var(--pm-card-escala, 1));
  opacity: var(--pm-card-opacidade, 1);
  z-index: var(--pm-card-z, 1);
  transform-origin: center;

  /* A borda marca o contorno dos cartões laterais, que sem o fundo do
     palco se dissolviam no branco da página. O JS escreve a opacidade
     conforme a distância até o centro: quem está em foco fica com o traço
     quase apagado, porque quem o destaca ali é a fita e a sombra. */
  border-color: rgba(90, 61, 158, var(--pm-card-borda, 0.14));

  /* Sem `-webkit-box-reflect`: o espelho no "chão" terminava num corte
     reto quando esbarrava no recorte da trilha, e era isso que aparecia
     como sombra cortada embaixo do cartão. A profundidade agora vem só da
     sombra, que se comporta igual em todos os navegadores. */

  /* A sombra que cresce em direção ao centro é escrita pelo JS direto no
     elemento (`style.boxShadow`), e não por variável: por aqui a
     declaração não vencia a do cartão comum, mesmo com especificidade
     maior, e a profundidade não aparecia. */

  /* Curto de propósito: com a transição longa herdada o cartão ficava
     arrastando atrás da rolagem em vez de acompanhá-la. */
  transition:
    transform 0.22s ease-out,
    opacity 0.22s ease-out,
    border-color 0.22s ease-out,
    box-shadow 0.22s ease-out;
}

.pm-carrossel .pm-edicao-card:hover {
  transform:
    perspective(1100px)
    rotateY(var(--pm-card-ry, 0deg))
    scale(calc(var(--pm-card-escala, 1) + 0.03))
    translateY(-6px);
  opacity: 1;
}

/* Só durante a emenda da volta infinita: a cópia e o original trocam de
   papel no mesmo quadro, e sem isto as duas transições apareceriam como
   um estica-e-encolhe no lugar de uma continuação. O JS liga e desliga
   esta classe dentro do mesmo quadro, então ela nunca alcança um
   movimento que o visitante devesse ver. */
.pm-edicoes.pm-sem-transicao .pm-edicao-card,
.pm-edicoes.pm-sem-transicao .pm-edicao-card::before {
  transition: none;
}

/* Quem prefere menos movimento não recebe a perspectiva */
@media (prefers-reduced-motion: reduce) {
  .pm-carrossel .pm-edicao-card,
  .pm-carrossel .pm-edicao-card:hover {
    transform: none;
    opacity: 1;
  }
}

/* Palco: só o espaço lateral onde ficam as setas, para que elas nunca
   encostem nos cartões. Sem fundo nem moldura — os cartões flutuam
   direto sobre a página. */
.pm-carrossel {
  position: relative;
  padding: 40px 60px 28px;
}

/* Os controles só entram quando há JS e excesso para rolar (o JS tira o
   `hidden`); no toque o gesto já resolve e eles somem. */
.pm-carrossel__seta {
  position: absolute;
  top: 50%;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #5b6576;
  font-size: 0.72rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.12);
  transition: all 0.3s;
}

.pm-carrossel__seta[data-carrossel="-1"] { left: 14px; }
.pm-carrossel__seta[data-carrossel="1"]  { right: 14px; }

.pm-carrossel__seta:hover:not([disabled]) {
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 8px 20px rgba(140, 12, 254, 0.3);
}

.pm-carrossel__seta[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* O cartão do meio ganha a fita de degradê no topo, como na referência.
   Nos demais ela fica recolhida. */
.pm-carrossel .pm-edicao-card::before {
  height: 4px;
  transform: scaleX(var(--pm-card-fita, 0));
  transform-origin: center;
  transition: transform 0.3s ease;
}

/* O cartão ganha uma fita do degradê no topo ao passar o mouse — o mesmo
   recurso do .feature-card do atv.css, para a seção conversar com o
   restante do site em vez de ser só uma caixa branca. */
/* Mesmo padrão do .feature-card do atv.css: raio 20px, recuo 40/30,
   borda e sombra idênticas. */
.pm-edicao-card {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 40px 30px;
  border-radius: var(--pm-raio-m);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  color: inherit;
  text-align: center;
  transition: all 0.4s;
}

.pm-edicao-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.pm-edicao-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  color: inherit;
}

.pm-edicao-card:hover::before {
  transform: scaleX(1);
}

/* ===== Vídeo aberto na própria página =====
   Alternativa a mandar o visitante para o YouTube: o play abre o vídeo
   aqui, e ele volta para a página ao fechar em vez de ficar perdido em
   outra aba. */
.pm-video {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(9, 12, 20, 0.86);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.pm-video[hidden] {
  display: none;
}

/* O quadro segue a proporção do vídeo e nunca ultrapassa a janela: sem o
   limite de altura, num monitor baixo as bordas saíam da tela. */
.pm-video__palco {
  position: relative;
  width: min(100%, 1100px);
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 96px);
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.pm-video__palco iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.pm-video__fechar {
  position: absolute;
  top: 18px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.pm-video__fechar:hover {
  background: rgba(255, 255, 255, 0.26);
}

/* Trava a rolagem do fundo enquanto o vídeo está aberto */
body.pm-video-aberto {
  overflow: hidden;
}

/* Tarja de página em rascunho. Fixa no topo, acima de tudo: a página é
   mostrada inteira e do jeito que ficará no ar, então o aviso precisa
   acompanhar a rolagem para não sumir na primeira tela. */
.pm-tarja-rascunho {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #f79009, #dc6803);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 2px 12px rgba(16, 24, 40, 0.18);
}

.pm-tarja-rascunho a {
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.pm-tarja-rascunho a:hover {
  background: rgba(255, 255, 255, 0.34);
  color: #fff;
}

/* A tarja é fixa e cobriria o menu, que também é fixo; o corpo desce a
   altura dela para os dois conviverem. */
.pm-rascunho {
  padding-top: 38px;
}

/* O menu é `sticky top: 0`; sem descê-lo a mesma altura, ao rolar ele
   pararia embaixo da tarja e ficaria encoberto. */
.pm-rascunho .site-navbar {
  top: 38px;
}

.pm-edicao-card strong {
  display: block;
  font-size: 24px;
  line-height: 28px;
  font-weight: 600;
  margin-bottom: 4px;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pm-edicao-card span {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-color);
}

/* ===== Banner do rodapé =====
   Peça larga trocada a cada edição. A altura vem da própria imagem, para
   aceitar qualquer proporção sem cortar a arte. */
.pm-banner {
  display: block;
  border-radius: var(--pm-raio-g);
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pm-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================
   Enquadramento das imagens fixas (hero, abertura, banner)
   =========================================================
   As mesmas variáveis que a mídia dos quadrantes já usava, agora
   valendo também para os três blocos que antes só podiam ser
   trocados. Sem isto, uma foto com o assunto fora do centro
   aparecia cortada e não havia como corrigir pelo editor. */

/* A moldura recorta; a imagem dentro dela é que se move. */
.pm-moldura {
  overflow: hidden;
  aspect-ratio: var(--pm-tile-proporcao, 1/1);
}

.pm-enquadrada {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pm-img-x, 50%) var(--pm-img-y, 50%);
  transform: scale(var(--pm-img-zoom, 1));
  transform-origin: var(--pm-img-x, 50%) var(--pm-img-y, 50%);
}

/* Dentro de uma moldura a imagem TEM de preencher a caixa — é a sobra
   que o ponto focal desloca. Cada bloco já trazia um `height: auto` no
   seu próprio seletor (`.pm-faixa img`, `.pm-banner img`,
   `.pm-prose__img img`), e esses valem mais que `.pm-enquadrada` sozinha
   por terem classe + elemento. O resultado era a caixa com a altura do
   recorte e a imagem com a altura natural: nada para recortar, e o ponto
   focal sem efeito. Este seletor tem peso maior que os três. */
.pm-moldura img.pm-enquadrada {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A hero mantém a altura que o atv.css define — ela preenche a seção,
   então aqui não entra proporção, só o trecho visível. O seletor
   repete a classe para vencer o `object-position: right center` que
   vem do atv.css sem precisar de !important. */
.hero-section .hero-art.pm-enquadrada {
  height: clamp(320px, 34vw, 560px);
  object-position: var(--pm-img-x, 50%) var(--pm-img-y, 50%);
}

/* A imagem da abertura tinha altura automática; com moldura ela passa a
   respeitar a proporção escolhida. */
.pm-prose__img.pm-moldura {
  border-radius: 14px;
}

.pm-prose__img.pm-moldura img {
  border-radius: inherit;
}

@media (max-width: 767px) {
  .hero-section .hero-art.pm-enquadrada {
    height: auto;
  }
}

/* Só o banner clicável reage ao mouse */
a.pm-banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}

/* ===== Responsivo =====
   Mesmos pontos de quebra do atv.css (991px e 767px), no lugar dos
   1023.98/767.98 que esta página usava por conta própria. */
@media (max-width: 991px) {
  .pm-tile-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .pm-tile-row--reverse .pm-tile,
  .pm-tile-row--reverse .pm-tile-conteudo {
    order: initial;
  }

  /* Empilhada, a peça segue o recorte escolhido no editor — forçar 16/10
     aqui fazia o celular mostrar um enquadramento diferente do que foi
     ajustado. O teto de altura só existe para que um recorte em pé não
     empurre o texto para fora da primeira tela. */
  .pm-tile {
    width: 100%;
    max-height: 70vh;
  }

  .pm-head {
    max-width: 100%;
  }

  /* Dois cartões na faixa intermediária. Vai na variável, não no
     `flex-basis`, para não anular a largura em pixels que o JS calcula. */
  .pm-carrossel .pm-edicoes {
    --pm-card-base: calc((100% - var(--pm-edicoes-gap)) / 2);
  }
}

/* A tipografia toda é fluida (clamp), então aqui não há mais override de
   tamanho de fonte — só o que é layout. */
@media (max-width: 767px) {
  /* As setas encostam mais no cartão, mas continuam fora dele */
  .pm-carrossel {
    padding: 26px 44px 20px;
  }

  /* No toque a seta cresce para 44px — a medida mínima de alvo confortável.
     Como o botão inteiro cresce (e não só a altura), ele continua redondo. */
  .pm-carrossel__seta {
    width: 44px;
    height: 44px;
  }

  .pm-carrossel__seta[data-carrossel="-1"] { left: 2px; }
  .pm-carrossel__seta[data-carrossel="1"]  { right: 2px; }

  /* No celular o cartão quase preenche a tela e deixa o próximo
     espiando na borda — o que mostra que dá para arrastar. Também na
     variável, pelo mesmo motivo da faixa acima. */
  .pm-carrossel .pm-edicoes {
    --pm-card-base: 76%;
  }

  /* No celular há menos largura para gastar: folga e esmaecimento menores,
     o suficiente para a sombra não ser aparada sem comer a tela.
     (O recuo negativo que havia aqui era inócuo — o JS escreve
     `margin-inline: auto` para centralizar a janela e o sobrepunha.) */
  .pm-carrossel .pm-edicoes {
    --pm-edicoes-folga: 26px;
    --pm-edicoes-fade: 18px;
  }
}

/* Redução dos títulos de seção, no mesmo ponto e com o mesmo valor que o
   atv.css usa (.section-title cai de 2.8rem para 2.2rem).
   Fica no fim do arquivo de propósito: as regras base de `.pm-head h2` e
   `.pm-prose h2` têm a mesma especificidade, então só vence quem vier
   depois — declarado lá em cima, o override era ignorado. */
@media (max-width: 768px) {
  .pm-head h2,
  .pm-prose h2 {
    font-size: 2.2rem;
  }
}