/* Blocos próprios do guia de raça, inseridos dentro do corpo do artigo.
   Todo o resto — cabeçalho, coluna de texto, lateral fixa, índice, FAQ, CTA,
   bio — vem de artigounico.css.

   Os três blocos de dado (características, ficha e curiosidades) usam o azul
   da marca. Eles são o que diferencia um guia de raça de um artigo comum, e
   ficam visualmente agrupados por isso: quem passa os olhos identifica o que é
   consulta e o que é leitura corrida. */

.raca-bloco{
  margin:var(--espaco-4) 0 var(--espaco-5);
  padding:var(--padding-card-artigo);
  border-radius:var(--raio);
  background:var(--cor-azul,#0c273b);
  color:#fff;
}

/* Escopado em .artigo-conteudo pelo mesmo motivo do texto de apoio: o titulo e
   um <p>, e ".artigo-conteudo p" vence um seletor de classe sozinho. */
.artigo-conteudo .raca-bloco__titulo{
  margin:0 0 var(--espaco-3);
  color:var(--cor-amarelo);
  font-family:var(--fonte-titulo);
  font-size:clamp(2rem,1.8rem + .5vw,2.3rem);
  font-weight:700;
}

/* Escopado em .artigo-conteudo de proposito: artigounico.css usa
   ".artigo-conteudo p" e ".artigo-conteudo li", que vencem um seletor de classe
   sozinho. Sem isso o texto sai escuro sobre o azul e fica ilegivel. */
.artigo-conteudo .raca-bloco__apoio{
  margin:0 0 var(--espaco-4);
  max-width:62rem;
  color:rgba(255,255,255,.7);
  font-size:1.45rem;
  line-height:1.6;
}

/* ---------- Números da raça ---------- */

.raca-numeros{
  display:grid;
  margin:var(--espaco-5) 0;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:var(--espaco-2);
}

.raca-numero{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  padding:var(--espaco-3) var(--espaco-2);
  border-radius:var(--raio);
  background:var(--cor-azul,#0c273b);
  color:#fff;
  text-align:center;
}

/* Escopado em .artigo-conteudo pelo mesmo motivo dos demais blocos: as regras
   de texto do artigo vencem um seletor de classe sozinho. */
.artigo-conteudo .raca-numero__rotulo,
.artigo-conteudo .raca-numero__unidade{
  color:rgba(255,255,255,.66);
  font-size:1.3rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.artigo-conteudo .raca-numero__valor{
  color:var(--cor-amarelo);
  font-family:var(--fonte-titulo);
  font-size:clamp(2.8rem,2.2rem + 1.6vw,3.6rem);
  font-weight:700;
  line-height:1.05;
}

/* ---------- Barras de características ---------- */

.raca-barras{
  display:grid;
  margin:0;
  padding:0;
  grid-template-columns:repeat(auto-fit,minmax(26rem,1fr));
  gap:1.4rem var(--espaco-5);
  list-style:none;
}

/* Anula marcador e recuo que artigounico.css aplica em lista de artigo. */
.raca-barras li{margin:0;padding:0}
.raca-barras li::before{content:none}

.raca-barra{
  display:grid;
  grid-template-columns:minmax(0,1fr) 8rem 3.4rem;
  align-items:center;
  gap:1.4rem;
}

.artigo-conteudo .raca-barra__nome{color:#fff;font-size:1.5rem;line-height:1.3}

.raca-barra__trilho{
  height:.6rem;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  overflow:hidden;
}

.raca-barra__preenchida{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--cor-amarelo);
}

.raca-barra__nota{
  color:rgba(255,255,255,.72);
  font-size:1.4rem;
  font-variant-numeric:tabular-nums;
  text-align:right;
}

/* ---------- Ficha técnica ---------- */

.raca-ficha__lista{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(22rem,1fr));
  gap:var(--espaco-3);
  margin:0;
}

.raca-ficha__item{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  padding-left:var(--espaco-2);
  border-left:3px solid var(--cor-amarelo);
}

.raca-ficha__item dt{
  color:rgba(255,255,255,.66);
  font-size:1.25rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.raca-ficha__item dd{
  margin:0;
  color:#fff;
  font-size:1.6rem;
  line-height:1.45;
}

/* ---------- Destaques e curiosidades ---------- */

/* Cards independentes, no mesmo azul dos demais blocos de dado. */
.raca-destaques{
  display:grid;
  margin:var(--espaco-4) 0 var(--espaco-5);
  grid-template-columns:repeat(auto-fit,minmax(22rem,1fr));
  gap:var(--espaco-2);
}

.raca-destaque{
  padding:var(--espaco-3);
  border-radius:var(--raio);
  background:var(--cor-azul,#0c273b);
  color:#fff;
}

.artigo-conteudo .raca-destaque h3{
  margin:0 0 var(--espaco-1);
  color:var(--cor-amarelo);
  font-size:1.75rem;
  line-height:1.3;
}

.artigo-conteudo .raca-destaque p{
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:1.5rem;
  line-height:1.65;
}