/* ==========================================================================
   PRODUTO 2 — cópia de identidade-v918.css, feita em 08/09/2026.
   É ela que dá à v919 o hero da v14: tarja vermelha, linha de apoio em
   texto vermelho (não o selo azul da v916) e manchete centralizada.
   Veste APENAS a v919.html. Editar aqui não mexe na v918, e vice-versa.
   Editar aqui NÃO afeta as páginas do produto 1, e editar as folhas originais
   em assets/css/ NÃO afeta as do produto 2. As duas árvores seguem separadas
   de propósito — é produto diferente.
   Não há url() em nenhuma delas, então a mudança de pasta é segura.
========================================================================== */

/* ==========================================================================
   STYLE-V3.CSS — identidade visual da versão 3
   Carregado DEPOIS do style.css, em v3.html apenas. Camada de sobreposição,
   não folha completa. NÃO carrega nada da V2: cantoneira, alinhamento à
   esquerda e Anton no corpo são exclusivos de lá.

   Referência visual: capa de tabloide alemão — barra de seções no topo,
   linha de apoio em vermelho ANTES da manchete, manchete enorme e preta,
   tudo centralizado, condensada e pesada.

   ATENÇÃO à especificidade: o pitch.css entra DEPOIS deste arquivo (ele é
   não-blocante). Para sobrepor algo do bloco de oferta é preciso seletor
   mais forte, tipo .oferta .oferta__titulo.

   ÍNDICE
     [v3.1] Tipografia e cores
     [v3.2] Cabeçalho e marca
     [v3.3] Tarja da editoria
     [v3.5] Linha de apoio e manchete
     [v3.6] Rodapé
     [v3.7] Responsivo
========================================================================== */

/* ------------------------------------------------- [v3.1] Tipografia --- */
:root{
  --v3-vermelho:#D40E14;
  --v3-tinta:#111111;
  --v3-tinta-2:#4A4F55;
  --v3-linha:#DFE2E6;
  --v3-rodape:#1A1D24;
  --sans:"Fira Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --serif:"Fira Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --v3-titulo:"Fira Sans Condensed","Fira Sans",Arial,sans-serif;
}

body{
  background:#fff;
  color:var(--v3-tinta);
  font-family:var(--sans);
}

/* --------------------------------------------- [v3.2] Cabeçalho --- */
.masthead{
  background:#fff;
  border-bottom:0;
  color:var(--v3-tinta);
}
.masthead__top{ padding-block:10px; align-items:center; }
.brand{ text-decoration:none; }
/* Logo em imagem.
   O tamanho é comandado pela ALTURA; a largura acompanha sozinha, então
   qualquer proporção de arquivo funciona sem distorcer.
   max-width impede que um logo muito largo empurre os ícones para fora. */
/* Seletor precisa ser MAIS FORTE que o .brand img do style.css, que fixa
   30x30 para o logo antigo. .brand img vale (0,1,1); .brand__logo sozinho
   vale (0,1,0) e perderia sempre, em qualquer ordem de arquivo. */
.brand img.brand__logo{
  display:block;
  height:72px;
  width:auto;
  max-width:62vw;
}

.masthead__icones{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:18px;
  pointer-events:none;   /* decorativos, como na V2 */
}
.masthead__icone{ display:block; width:24px; height:24px; color:var(--v3-tinta); }
.masthead__icone svg{ width:100%; height:100%; display:block; }

/* --------------------------------------- [v3.3] Tarja da editoria --- */
/* Faixa larga em vermelho com o nome da editoria, e abaixo uma tira mais
   escura com texto correndo em laço. Substitui o menu e o breadcrumb. */
.tarja{ background:var(--v3-vermelho); color:#fff; }

.tarja__titulo{
  font-family:var(--v3-titulo);
  font-weight:800;
  font-size:clamp(26px,1rem + 2.6vw,40px);
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
  padding:22px 16px;       /* o respiro pedido */
  line-height:1;
}

/* Tira de baixo: mesmo vermelho, escurecido, para separar sem virar
   outra cor. overflow:hidden é o que recorta o trilho que corre. */
.tarja__faixa{
  background:rgba(0,0,0,.22);
  overflow:hidden;
  padding:11px 0;
}
.tarja__trilho{
  display:flex;
  align-items:center;
  gap:26px;
  width:max-content;
  animation:deslizaTarja var(--tarja-tempo, 28s) linear infinite;
}
.tarja__item{
  font-family:var(--v3-titulo);
  font-size:13px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
  color:rgba(255,255,255,.95);
}
.tarja__sep{ color:rgba(255,255,255,.5); font-size:13px; }

/* O deslocamento de uma volta é UMA cópia do conteúdo mais o vão que a
   separa da cópia seguinte — nunca "metade do trilho".

   Por que não -50%: metade só fecha o laço quando existem exatamente duas
   cópias. Em tela larga duas não bastam para cobrir a faixa, e o trilho
   precisa de três, quatro, às vezes cinco. Aí metade deixa de coincidir
   com uma volta e o fim da faixa aparece vazio. Era esse o buraco vermelho.

   Quem mede a volta e conta quantas cópias cabem é o duplicarTrilho() na
   seção [08], que escreve --tarja-passo e --tarja-tempo aqui. O tempo
   acompanha a distância para a velocidade não mudar com o tamanho da tela.
   Os valores de reserva valem só se o JS não rodar. */
@keyframes deslizaTarja{
  from{ transform:translateX(0); }
  to  { transform:translateX(calc(var(--tarja-passo, 50%) * -1)); }
}
@media (hover:hover) and (pointer:fine){
  .tarja:hover .tarja__trilho{ animation-play-state:paused; }
}

@media (prefers-reduced-motion:reduce){
  .tarja__trilho{ animation:none; }
}

/* --------------------------- [v3.5] Linha de apoio e manchete --- */
/* A ordem no v3.html já põe a linha de apoio primeiro. Aqui só o peso.
   Ela é o "kicker" vermelho da capa: menor que a manchete, centralizada. */
.standfirst{
  font-family:var(--v3-titulo);
  font-weight:700;
  font-size:clamp(17px,1rem + .7vw,23px);
  line-height:1.25;
  color:var(--v3-vermelho);
  text-align:center;
  margin:18px 0 6px;
}

/* Manchete: o elemento mais pesado da página inteira, de propósito. */
.article__inner h1{
  font-family:var(--v3-titulo);
  font-weight:800;
  font-size:clamp(28px,1rem + 3.6vw,54px);
  line-height:1.02;
  letter-spacing:-.02em;
  text-align:center;
  color:var(--v3-tinta);
  margin:0 0 20px;
}

/* --------------------------------------------------- [v3.6] Rodapé --- */
.site-footer{
  background:var(--v3-rodape);
  color:rgba(255,255,255,.72);
}
.site-footer a{ color:rgba(255,255,255,.88); }
.site-footer .disclaimer{ color:rgba(255,255,255,.5); }

/* ----------------------------------------------- [v3.7] Responsivo --- */
@media (max-width:760px){
  .brand img.brand__logo{ height:56px; max-width:58vw; }
  .masthead__icones{ gap:14px; }
  .masthead__icone{ width:22px; height:22px; }
  .tarja__titulo{ padding:17px 16px; }
  .standfirst{ margin-top:14px; }
}