/* Gate global: enquanto a página não "liberar" o scrolly, os stepBoxes não existem */

.gabiall {
  display: block;
}

/* CSS (prefixo: nfimg) */
.nfimg {
  max-width: 690px; /* limite máximo */
  margin: 0 auto; /* centraliza no container/página */
  text-align: center; /* centraliza crédito */
}

.nfimg img {
  display: block; /* remove espaço inline abaixo da imagem */
  max-width: 100%; /* encolhe se passar de 690px/viewport */
  height: auto; /* mantém proporção */
  margin: 0 auto;
}

.nfimg2 {
  max-width: 1200px; /* limite máximo */
  margin: 0 auto; /* centraliza no container/página */
  text-align: center; /* centraliza crédito */
}

.nfimg2 img {
  max-width: 100%; /* encolhe se passar de 690px/viewport */
  height: auto; /* mantém proporção */
  margin: 0 auto;
  width: 1200px;
  border-radius: 10px;
}

/* Padrão: mostra desktop, esconde mobile */
.nfimg2 img {
  width: 100%;
  height: auto;
}
.nfimg2-desktop {
  display: block;
}
.nfimg2-mobile {
  display: none;
}

/* Mobile */
@media (max-width: 768px) {
  .nfimg2-desktop {
    display: none;
  }
  .nfimg2-mobile {
    display: block;
  }

  .nfimg2 img {
    max-width: 98%;
  }
}

.nfimg-credit {
  font-size: 12px; /* textinho pequeno */
  color: #555; /* cinza discreto */
  margin-top: 4px; /* espaço entre a imagem e o crédito */
  font-style: italic; /* estilo de crédito */
  text-align: left;
}

.tweet-wrapper {
  position: relative;
  max-width: 550px; /* largura padrão do embed do twitter */
  margin: 0 auto;
}

.custom-video {
  position: absolute;
  top: 155px; /* empurra até a área do vídeo */
  left: 15px;
  width: 95%; /* ajusta para ocupar toda a largura do tweet */
  height: auto; /* mantém proporção */
  z-index: 2; /* garante que fica por cima do tweet */
  border-radius: 12px; /* opcional, arredondar igual ao do X */
  pointer-events: none; /* evita clique bloquear o tweet */
}

.mult-header {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.twitter-tweet {
  margin: 0 auto;
}

.gabih3 {
  font-family: "Open Sans", sans-serif;
  box-sizing: border-box;
  padding: 0;
  color: #000000;
  font-size: 40px;
  letter-spacing: -2px;
  line-height: 50px;
  font-weight: 700;
  max-width: 680px;
  text-align: center;
  margin: 0 auto;
  margin-top: 100px;
}

.gabih4 {
  font-family: "Open Sans", sans-serif;
  box-sizing: border-box;
  padding: 0;
  color: #000000;
  font-size: 30px;
  letter-spacing: -2px;
  line-height: 30px;
  font-weight: 700;
  max-width: 680px;
  text-align: center;
  margin: 0 auto;
  margin-top: 100px;
  margin-bottom: 50px;
}

.gabih4chart {
  font-family: "Open Sans", sans-serif;
  box-sizing: border-box;
  padding: 0;
  color: #000000;
  font-size: 30px;
  letter-spacing: -2px;
  line-height: 30px;
  font-weight: 700;
  max-width: 580px;
  text-align: center;
  margin: 0 auto;
  margin-top: -110px; /* ajuste aqui */
  margin-bottom: 50px;
}

@media (max-width: 690px) {
  .gabih4chart {
    font-size: 25px;
    margin-top: -130px; /* ajuste no mobile */
  }

  .wrapperchart {
    margin-bottom: 150px !important;
  }
}

.hheader {
  text-align: center;
  font-family: "Open Sans", sans-serif;
  font-size: 1.7rem;
  color: #000000;
  margin: 0 auto;
  margin-top: 20px;
  font-weight: 700;
  letter-spacing: -1px;
}

@media (max-width: 3100px) {
  .hheader {
    margin-left: 25vw;
    margin-right: 25vw;
  }
}
@media (max-width: 1790px) {
  .hheader {
    font-size: 1.5rem;
    margin-left: 20vw;
    margin-right: 20vw;
  }
}

@media (max-width: 1290px) {
  .hheader {
    font-size: 1.5rem;
    margin-left: 5vw;
    margin-right: 5vw;
  }
}

@media (max-width: 890px) {
  .hheader {
    font-size: 1.5rem;
    margin-left: 10vw;
    margin-right: 10vw;
  }
}

@media (max-width: 790px) {
  .hheader {
    font-size: 1.5rem;
  }
}

@media (max-width: 690px) {
  .hheader {
    font-size: 1.5rem;
  }

  .gabih3 {
    font-size: 35px;
    margin-bottom: 50px;
  }

  .gabih4 {
    font-size: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
  }
}

@media (max-width: 490px) {
  .hheader {
    font-size: 1rem;
  }
}

.full-width-header {
  width: 100%;
  height: auto;

  display: block;
}

.divider-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0 0 0;
}

.divider {
  flex-grow: 1;
  height: 1px;
  background-color: #7c0505;
  border: none;
  margin: 0 15px;
}

.social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 10px;
}

.social-icons a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 10px;
  width: 35px;
  height: 35px;
  color: #cb2727;
  background-color: #ffffff;
  border-radius: 50%;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.social-icons a:hover {
  background-color: #ffffff;
  color: #001838;
}

.social-icons svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.section--credits {
  color: #000000;
  font-size: 0.8125rem;
  font-family: "Open Sans", sans-serif;
  line-height: 1em;
  margin: 9.375rem auto 6.875rem;
  max-width: 30.625rem;
  text-align: center;
}

.credits__title {
  font-size: 0.9rem;
  color: #000000;
  font-weight: bold;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.hrcredit {
  border-color: #000000;
}

.credit__role,
.credit__role2,
.credit__role3 {
  text-align: center;
  display: inline-block;
  width: 100%;
}

.credit__role {
  margin-top: 10px;
  margin-bottom: 3px;
}

.credit__role2,
.credit__role3 {
  margin-top: 5px;
  margin-bottom: 5px;
}

.paragraph {
  max-width: 670px;
  margin: 30px auto;
  font-family: "Open Sans", sans-serif;
  font-size: 1.25rem;
  line-height: 2.06rem;
  box-sizing: border-box;
  color: #000000;
}

.wrapper {
  max-width: 2249px;
  margin: 0 auto;
  margin-top: 60px;
  padding: 0 20px;
  box-sizing: border-box;
}

.image-full {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.imagem-centralizada {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto; /* centraliza */
  display: block;
  height: auto;
}

.imagem-centralizada img {
  max-width: 100%;
  height: auto;
  display: block; /* garante que a imagem seja um bloco */
}

.imagem-centralizada2 {
  width: 100%;
  max-width: 800px;
  margin: 0 auto; /* centraliza */
  display: block;
  height: auto;
}

.imagem-centralizada2 img {
  max-width: 100%;
  height: auto;
  display: block; /* garante que a imagem seja um bloco */
}

.img-container {
  width: 100%;
  display: flex;
  justify-content: center; /* Centraliza horizontalmente */
  margin: 40px 0;
}

.img-container picture,
.img-container img {
  width: 1200px;
  max-width: 100%;
  height: auto;
}

@media (max-width: 690px) {
  .imagem-centralizada img {
    width: 50%; /* ou max-width: 50%; dependendo da sua necessidade */
    height: auto; /* mantém a proporção da imagem */
    margin-bottom: -20px;
    margin-top: 50px;
  }
}

.gring-opinioes-estrangeiros {
  font-family: "Open Sans", sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.gring-title {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2rem;
  font-weight: bold;
}

.gring-opiniao {
  margin-bottom: 3rem;
}

.gring-header {
  display: flex;
  align-items: center;
}

.gring-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 1rem;
}

.gring-user-info .gring-name {
  font-style: italic;
  font-weight: bold;
  color: #a67c00;
  display: flex;
  align-items: center;
  font-size: 1.3rem;
  margin: 0;
}

.gring-flag {
  width: 20px;
  height: auto;
  margin: 0 0.25rem;
}

.gring-country-code {
  font-style: normal;
  color: #adadad;
  font-weight: 500;
  font-size: 0.875rem;
}

.gring-role,
.gring-topic {
  font-style: italic;
  font-size: 0.875rem;
  text-transform: uppercase;
  margin: 0.25rem 0 0;
}

.gring-role {
  color: #adadad;
  font-weight: 700;
}

.gring-topic {
  color: #666;
  font-weight: 900;
}

.gring-quote {
  position: relative;
  margin-top: 2rem;
  /* mantém o padding horizontal */
  padding: 0 2rem;
}

.gring-quote-open {
  position: absolute;
  /* sobe um pouco acima da linha inicial */
  top: -20px;
  /* move para a direita o mesmo valor de padding-left */
  left: 2rem;
  width: 24px;
  height: auto;
}

.gring-text {
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
  margin: 0;
  display: inline;
}

.gring-quote-close {
  display: inline-block;
  width: 24px;
  height: auto;
  vertical-align: text-bottom;
  margin-left: 0.25rem;
}

.video {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px -120px 20px -120px;
  background-color: #ffffff;
}

.vid-size {
  transform: scale(1);
}

@media screen and (max-width: 768px) {
  .vid-size {
    transform: scale(0.8);
  }
}

@media screen and (max-width: 480px) {
  .vid-size {
    transform: scale(0.6);
  }
}

@media screen and (max-width: 380px) {
  .vid-size {
    transform: scale(0.5);
  }
}

/* ===================== FIELD (do antigo index.html) ===================== */
:root {
  --bg: #ffffff;

  /* Tamanhos globais */
  --lineThickness: 4px;
  --ballSize: 22px;
  --yearFont: 12px;
  --yardFont: 18px;

  /* Cores por tipo */
  --color-normal: #000000; /* preto */
  --color-sub60: #000000; /* preto fino */
  --color-record: #cb2727; /* vermelho */
  --color-r2025: #2757b0; /* azul */

  /* Cabeçalhos/rodapé do gráfico */
  --headColor: #0b2f1d;
  --headNoteBlue: #2757b0;

  /* Opacidade para itens não-destaque (≥60) */
  --inactiveOpacity: 0.18;

  /* Step Boxes (cartões) */
  --sb-radius: 12px;
  --sb-bg: #ffffffe6;
  --sb-border: #dfe8df;
  --sb-shadow: 0 6px 28px rgba(0, 0, 0, 0.2);

  --sb-kicker-size: 22px;
  --sb-kicker-color: #6b7280;
  --sb-kicker-weight: 800;
  --sb-kicker-letter: 0.02em;

  --sb-title-size: clamp(14px, 3.6vw, 14px);
  --sb-title-weight: 600;
  --sb-title-color: #4b5563;

  --sb-sub-size: 14px;
  --sb-sub-weight: 600;
  --sb-sub-color: #9ca3af;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
  background: var(--bg);
  color: #0b2f1d;
}

/* ===== Espaçadores antes/depois ===== */
.nflfield-spacer {
  height: 1000px;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 28px;
  color: #222;
  letter-spacing: 0.02em;
}

/* ===== Scrollytelling ===== */
.nflfield-scrolly {
  position: relative;
  padding: 0 14px 14px;
  z-index: 3;
  margin: 0 auto;
  margin-top: 200px;
}

.testy {
  background-color: white;
  margin: 0 auto;
  width: 1500px;

  height: 800px;
  border: 4px solid #fff; /* borda branca */
  border-radius: 10px;
}

.nflfield-figure {
  position: sticky;
  top: 0;
  z-index: 2;

  /* tamanho controlável */
  height: 100vh; /* ajuste aqui: pode ser 60vh, 70vh etc */
  width: 80vw; /* opcional: controlar também a largura */

  min-height: 420px;
  max-width: 1000px; /* limite máximo opcional */

  margin: auto; /* centraliza no container */

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: visible;
  background: transparent;
}

.nflfield-imgHolder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nflfield-imgHolder img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;

  object-fit: contain;
}

.nflfield-overlay {
  position: absolute;
  pointer-events: auto;
  overflow: visible;
}

@media (max-width: 690px) {
  .nflfield-imgHolder img {
    opacity: 0.3;
  }
  .nflfield-figure {
    transform: scale(0.9);
  }
}
/* ===== Cabeçalhos sobre/abaixo do campo ===== */
.nflfield-topLeft,
.nflfield-topCenter,
.nflfield-topYearHeader,
.nflfield-bottomNote {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--headColor);
  text-shadow: 0 1px 0 #fff;
}
.nflfield-topLeft {
  top: -16px;
  left: 8px;
  font-size: 14px;
} /* “JARDAS” */
.nflfield-topCenter {
  top: -22px;
  left: 68%;
  transform: translateX(-50%); /* ícone + “Recordes” */
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}
.nflfield-topCenter img {
  width: 16px;
  margin-right: -10px;
  height: auto;
}
.nflfield-topYearHeader {
  top: 6px;
  font-size: 14px; /* “ANO” alinhado à coluna */
  transform: translate(calc(-100% - 6px), 0);
}
.nflfield-bottomNote {
  bottom: -20px;
  left: 70%;
  transform: translateX(-50%); /* “*Jogo não oficial” */
  color: var(--headNoteBlue);
  font-style: italic;
  font-weight: 700;
}
.top-recordes {
  font-size: 18px;
  font-weight: bold;
  color: #cb2727;
  margin-left: 8px;
}

/* ===== Linhas (trajetos) ===== */
.nflfield-line {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: var(--lineThickness);
  border-radius: 3px;
  transition: width 0.28s ease, left 0.28s ease, top 0.32s ease,
    opacity 0.22s ease;
  pointer-events: none;
  opacity: 0;
}
.nflfield-line.nflfield-sub60 {
  background: var(--color-sub60);
  height: 2px;
}
.nflfield-line.nflfield-normal {
  border-top: 2px dotted var(--color-normal);
}
.nflfield-line.nflfield-record {
  border-top: 2px dotted var(--color-record);
}
.nflfield-line.nflfield-r2025 {
  border-top: 2px dotted var(--color-r2025);
}

/* ===== Bolas ===== */
.nflfield-ball {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: var(--ballSize);
  height: auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 0 2px #fff);
  transition: top 0.32s ease, width 0.12s ease, opacity 0.22s ease;
  cursor: pointer;
  opacity: 0;
}

/* ===== Rótulos ===== */
.nflfield-yearLabel,
.nflfield-yardValue {
  position: absolute;
  transform: translateY(-50%);
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1;
  white-space: nowrap;
  transition: left 0.28s ease, top 0.32s ease, opacity 0.22s ease,
    font-size 0.12s ease;
  pointer-events: none;
  opacity: 0;
  background: transparent;
}
.nflfield-yearLabel {
  font-weight: 100;
  font-size: var(--yearFont);
  color: var(--color-normal);
}
.nflfield-yardValue {
  font-weight: 700;
  font-size: var(--yardFont);
  color: var(--color-normal);
}

/* cores espelhadas pelo tipo */
.nflfield-yearLabel.nflfield-sub60,
.nflfield-yardValue.nflfield-sub60 {
  color: var(--color-sub60);
}
.nflfield-yearLabel.nflfield-normal,
.nflfield-yardValue.nflfield-normal {
  color: var(--color-normal);
}

.nflfield-yardValue.nflfield-normal {
  font-style: italic;
  font-weight: 100;
  font-size: 12px;
}
.nflfield-yearLabel.nflfield-record,
.nflfield-yardValue.nflfield-record {
  color: var(--color-record);
  font-weight: 900;
}
.nflfield-yearLabel.nflfield-r2025,
.nflfield-yardValue.nflfield-r2025 {
  color: var(--color-r2025);
  font-weight: 900;
}

/* ===== Tooltip ===== */
.nflfield-tip {
  position: fixed;
  z-index: 50;
  left: 0;
  top: 0;
  transform: translate(-50%, -120%);
  background: #ffffffe6;
  color: #073b25;
  border: 1px solid #dfe8df;
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity 0.12s ease, left 0.18s ease, top 0.18s ease,
    transform 0.18s ease;
}

/* ===== Steps (cartões) ===== */
.nflfield-steps {
  position: relative;
  margin: 0 auto;
  max-width: 980px;
  pointer-events: none;
}

/* Cada step continua ocupando altura para o gatilho, mas sem centralização visual */
.nflfield-step {
  height: 100vh; /* mantém o momento do gatilho */
  min-height: 340px;
  display: block; /* sem align-center */
}

.nflfield-stepBox {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  max-width: 440px;
  margin-left: -10%;
  pointer-events: none;
  opacity: 0;
  visibility: hidden; /* <- evita ficar “aparecendo” no scroll */
  transition: opacity 440ms ease;
}

.nflfield-stepBox .stepbox {
  background: var(--sb-bg);
  border: 1px solid var(--sb-border);
  box-shadow: var(--sb-shadow);
  border-radius: var(--sb-radius);
  padding: 18px 20px;
  display: grid;
  gap: 6px;
}
.stepbox {
  display: grid;
  gap: 6px;
}

.sb-kicker1 {
  color: black;
}

.sb-kicker2 {
  color: #cb2727;
}

.sb-kicker3 {
  color: #2757b0;
}

.sb-kicker3 {
  font-size: var(--sb-kicker-size);

  font-weight: var(--sb-kicker-weight);
  letter-spacing: var(--sb-kicker-letter);
}

.stepbox {
  font-size: var(--sb-kicker-size);
  color: var(--sb-kicker-color);
  font-weight: var(--sb-kicker-weight);
  letter-spacing: var(--sb-kicker-letter);
}
.stepbox .sb-title {
  font-size: var(--sb-title-size);
  font-weight: var(--sb-title-weight);
  color: var(--sb-title-color);
  line-height: 1.1;
  max-width: 250px;
  line-height: 20px;
}
.stepbox .sb-sub {
  font-size: var(--sb-sub-size);
  font-weight: var(--sb-sub-weight);
  color: var(--sb-sub-color);
}

.nflfield-step.is-active .nflfield-stepBox {
  opacity: 1;
  visibility: visible; /* <- aparece com fade-in */
}

/* Opcional: no mobile, reduz levemente para caber melhor sobre o campo */
@media (max-width: 690px) {
  .nflfield-stepBox {
    transform: translate(-50%, -50%) scale(0.95);
  }
}

/* ===== Setas (se usar) ===== */
.nflfield-arrows {
  position: absolute;
  display: flex;
  gap: 4px;
  align-items: center;
  opacity: 0;
  pointer-events: none;
}
.nflfield-arrows.nflfield-show {
  opacity: 1;
}
.nflfield-arrows img {
  width: 22px;
  height: auto;
  opacity: 0;
  transform: translateY(4px);
  animation: arrow-pop 1200ms ease-in-out infinite;
}
.nflfield-arrows img:nth-child(3) {
  animation-delay: 0ms;
}
.nflfield-arrows img:nth-child(2) {
  animation-delay: 180ms;
}
.nflfield-arrows img:nth-child(1) {
  animation-delay: 360ms;
}

@keyframes arrow-pop {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  35% {
    opacity: 1;
    transform: translateY(0);
  }
  65% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* ===================== CHART (do chart.html) ===================== */
:root {
  --nflchart-bg: #ffffff;
  --nflchart-ink: #0e2433;
  --nflchart-muted: #6a7a86;
  --nflchart-grid: #e6edf3;
  --nflchart-lineA: #2757b0; /* tentativas */
  --nflchart-lineB: #cb2727; /* convertidos */
  --nflchart-bar: #7c3aed; /* barra % */
  --nflchart-bar-alpha: 0.18;
  --nflchart-bar-alpha-hi: 0.35;
  --nflchart-radius: 16px;
}
.nflchart-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.nflchart-title {
  margin: 0 0 40px;
  font-size: clamp(22px, 3.5vw, 30px);
  font-weight: 800;
  color: #4d4d4d;
  letter-spacing: 0.2px;

  line-height: 30px;
}
.nflchart-sub {
  margin: 0 0 18px;
  color: var(--nflchart-muted);
  font-size: 14px;
}

/* ===== Totais ===== */
.nflchart-totais {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 8px;
}
@media (max-width: 740px) {
  .nflchart-totais {
    grid-template-columns: 1fr;
  }
}
.nflchart-kpi {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 12px;
  border: 1px solid #f0f5f9;
  border-radius: var(--nflchart-radius);
  background: #fff;
  min-height: 80px;
}
.nflchart-kpi .nflchart-txt {
  min-width: 0;
}
.nflchart-kpi h3 {
  margin: 0 0 4px;
  color: var(--nflchart-muted);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.3px;
}
.nflchart-kpi .nflchart-big {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}
.nflchart-kpi .nflchart-small {
  color: var(--nflchart-muted);
  font-size: 12px;
  margin-top: 2px;
}
.nflchart-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #eef3f7;
  background: #fafcff;
  flex: 0 0 56px;
}
.nflchart-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.nflchart-gauge {
  width: 56px;
  height: 56px;
  position: relative;
  flex: 0 0 56px;
}
.nflchart-gauge .nflchart-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 11px;
  color: #0b1d2a;
}

/* Legenda + hint */
.nflchart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 6px;
}
.nflchart-lg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid #eef3f7;
  background: #fff;
  font-size: 13px;
  color: #334155;
}
.nflchart-sw {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.nflchart-a {
  background: var(--nflchart-lineA);
}
.nflchart-b {
  background: var(--nflchart-lineB);
}
.nflchart-c {
  background: var(--nflchart-bar);
}
.nflchart-hint {
  font-size: 12px;
  color: #5b6a76;
  margin: 6px 0 10px;
}

/* ===== Info boxes ACIMA do gráfico ===== */
.nflchart-infobar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 8px 0 8px;
}
@media (max-width: 720px) {
  .nflchart-infobar {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 420px) {
  .nflchart-infobar {
    grid-template-columns: 1fr;
  }
}
.nflchart-info {
  background: #ffffff;
  border: 1px solid #e6eef5;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
}
.nflchart-label {
  color: #5b6a76;
  margin-right: 6px;
}
.nflchart-val {
  font-weight: 800;
  font-size: clamp(18px, 2.8vw, 22px);
} /* números maiores no mouseover */

/* ===== Chart ===== */
.nflchart-panel {
  border: none;
  border-radius: var(--nflchart-radius);
  background: #fff;
  padding: 12px;
  overflow: hidden;
} /* sem linha ao redor */
.nflchart-chartWrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  min-height: 280px;
}
@media (max-width: 480px) {
  .nflchart-chartWrap {
    aspect-ratio: 4/3;
    min-height: 240px;
  }
}
svg {
  width: 100%;
  height: 100%;
  display: block;
}

.nflchart-axis line,
.nflchart-axis path {
  stroke: #dfe8ef;
  stroke-width: 1;
}
.nflchart-grid line {
  stroke: var(--nflchart-grid);
}
.nflchart-xlab,
.nflchart-ylab {
  font-size: 11px;
  fill: #7b8a95;
}

.nflchart-lineA {
  fill: none;
  stroke: var(--nflchart-lineA);
  stroke-width: 3;
}
.nflchart-lineB {
  fill: none;
  stroke: var(--nflchart-lineB);
  stroke-width: 3;
}
.nflchart-pt {
  stroke: #fff;
  stroke-width: 2;
  cursor: pointer;
}
.nflchart-pt.nflchart-a {
  fill: var(--nflchart-lineA);
}
.nflchart-pt.nflchart-b {
  fill: var(--nflchart-lineB);
}

/* Barras percentuais (todas ligadas) */
.nflchart-pbar {
  fill: var(--nflchart-bar);
  opacity: var(--nflchart-bar-alpha);
  transform-box: fill-box;
  transform-origin: bottom;
  transform: scaleY(0.001);
}
.nflchart-pbars-animate .nflchart-pbar {
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
  transform: scaleY(1);
}
.nflchart-pbar[data-hi="1"] {
  opacity: var(--nflchart-bar-alpha-hi);
}

/* ===== DOT CHART (retinho + mobile correto) ===== */
.dc-grid {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  justify-content: center;
  padding: 12px 8px 20px;
  background: #fff;
  /* border removido */
}

/* cada ano = coluna vertical centrada no número */
.dc-year {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.dc-colatt {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 18px; /* largura da coluna (centraliza sobre o ano) */
  height: 240px; /* altura alvo (escala por dados no JS) */
}

.dc-stack {
  display: grid;
  grid-auto-rows: 18px;
  grid-template-columns: 1fr;
  justify-items: center; /* BOLAS SOBEM RETO, alinhadas */
}

.dc-ball {
  width: 18px;
  height: 18px;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition: transform 0.45s cubic-bezier(0.02, 1, 0.06, 1), opacity 0.3s ease;
} /* sem transform/skew */

.dc-yearlab {
  font: 600 12px/1 "Open Sans", system-ui;
  color: #334155;
}

.dc-year.dc-in .dc-ball {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* ===== CONFIG =====
   Ajuste estas 3 variáveis para bater 100% com seu grid de anos.
   --years : quantidade de anos (2000–2024 => 25)
   --col-w : largura de cada coluna/ano
   --gap   : espaço horizontal entre colunas
*/
#nflchart-dots {
  --years: 25; /* 2000..2024 */
  --col-w: clamp(29px, 2.1vw, 28px); /* mesma largura das colunas */
  --gap: clamp(8px, 1vw, 14px); /* mesmo gap das colunas */

  /* aparência da linha */
  --dc-hr-thickness: 1px;
  --dc-hr-color: #000;
  --dc-hr-alpha: 0.35;

  /* largura efetiva do gráfico (1º ao último ano) */
  --graph-w: calc(
    var(--years) * var(--col-w) + (var(--years) - 1) * var(--gap)
  );
  position: relative;
}

/* ===== LINHA — DESKTOP/TABLET (HORIZONTAL) ===== */
#dc-hr {
  position: absolute !important;
  height: var(--dc-hr-thickness) !important;
  width: var(--graph-w) !important; /* largura = largura do gráfico */
  left: calc(50% - var(--graph-w) / 2) !important; /* centraliza exatamente */
  right: auto !important;
  margin-top: 10px;
  background: var(--dc-hr-color) !important;
  opacity: var(--dc-hr-alpha) !important;
  pointer-events: none;
  z-index: 2;
  /* o JS já define o "top"; não sobrescrevemos */
}

@media (max-width: 1150px) {
  #nflchart-dots {
    --col-w: clamp(31px, 2.1vw, 28px);
  }
}

@media (max-width: 1050px) {
  #nflchart-dots {
    --col-w: clamp(-50px, 2.1vw, 15px);
  }
}

/* ===== LINHA — MOBILE (VERTICAL) ===== */
@media (max-width: 690px) {
  #dc-hr {
    width: 0.1px !important; /* vira “traço” vertical */
    height: auto !important;
    top: 0 !important; /* ocupa toda a altura do gráfico */
    bottom: 0 !important;

    left: 62px !important;
    right: auto !important;
    transform: translateX(-50%); /* centraliza */
  }
}

/* ===== TOOLTIP ESTILIZADO ===== */
.dc-tip {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -120%);
  background: #ffffffe6;
  color: #0b1d2a;
  border: 1px solid #e6edf3;
  border-radius: 10px;
  padding: 6px 10px; /* <<< menos espaço interno */
  font-family: "Open Sans", sans-serif;
  font-size: 13px; /* <<< base do texto */
  line-height: 1.1; /* <<< linhas mais coladas */
  white-space: normal; /* permite <br> quebrar linha */
  text-align: center; /* centraliza o conteúdo */
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: opacity 0.12s, left 0.12s, top 0.12s, transform 0.12s;
}

/* Ano em destaque */
.dc-tip .year {
  display: block;
  font-size: 18px; /* <<< maior que o resto */
  font-weight: 800;
  margin-bottom: 2px; /* <<< encosta mais no próximo */
}

/* Números em negrito */
.dc-tip strong {
  font-weight: 800;
}

/* ===== Mobile (<=690px): gira a lógica — ano à ESQUERDA, bolinhas na HORIZONTAL ===== */
/* ===== Mobile (<=690px): ano à ESQUERDA, bolinhas à DIREITA ===== */
@media (max-width: 690px) {
  .dc-grid {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    margin-left: -32px;
  }

  .dc-year {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    max-height: 30px;
    width: 100%; /* ocupa a largura toda da linha */
  }

  .dc-yearlab {
    order: -1; /* ano sempre primeiro (à esquerda) */
    width: 52px;
    text-align: right;
    flex-shrink: 0;
  }

  .dc-colatt {
    height: auto;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* <<< força as bolinhas a grudarem no lado esquerdo */
    flex: 1; /* <<< permite ocupar o resto do espaço */
    overflow-x: auto; /* <<< evita sumir se tiver muitas bolinhas */
  }

  .dc-stack {
    display: flex;
    flex-direction: row-reverse; /* <<< acertos à ESQUERDA, erros à DIREITA */
    gap: 2px;
    justify-content: flex-start;
  }

  .dc-ball {
    width: 18px;
    height: 18px;
  }
}

/* bolas na legenda */
.legend-ball {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}
.nflchart-legend {
  display: flex;
  gap: 20px;
  margin: 10px 0;
}
.nflchart-lg {
  display: flex;
  align-items: center;
  font: 600 14px "Open Sans", sans-serif;
  color: #0b1d2a;
}

/* ===== Desktop estreito (691–1050px): ano curto e colunas mais próximas ===== */
@media (min-width: 691px) and (max-width: 1050px) {
  .dc-grid {
    gap: 2px;
    padding-inline: 4px;
  } /* aproxima colunas */
  .dc-yearlab {
    width: 22px; /* cabe o formato '00 */
    text-align: center;
    font-size: 11px;
  }
  .dc-colatt {
    width: 16px;
  } /* coluna mais fina */
  .dc-ball {
    width: 16px;
    height: 16px;
  }
  .dc-stack {
    grid-auto-rows: 16px;
  }
}

/*cHART2*/
/* ===== NFCHART – CSS COMPLETO ===== */
/* ===== NFCHART — LAYOUT IGUAL AO MOCK (só PRETO + VERMELHO) ===== */
:root {
  /* medidas */
  --nfchart-size: 220px; /* diâmetro do donut */
  --nfchart-stroke: 14; /* espessura do donut */

  /* cores */
  --nfchart-red: #cb2727; /* segmento vermelho e nº da esquerda */
  --nfchart-black: #1a1a1a; /* anel escuro */
  --nfchart-gray: #686868;

  /* tipografia */
  --nfchart-font: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;

  /* centro (aproximação número/label) */
  --nfchart-num-size: 42px;
  --nfchart-label-size: 16px;
  --nfchart-num-line: 1;
  --nfchart-num-bottom: -6px;
  --nfchart-label-top: -2px;

  /* início do VERMELHO (graus a partir do topo) — ajuste fino do mock */
  --red-rotate: 12deg;

  /* POSIÇÃO ABSOLUTA DAS LEGENDAS (relativas ao donut) */
  /* esquerda (acima do donut, à esquerda) */
  --legend-left-left: calc(50% - var(--nfchart-size) / 2 - 90px);
  --legend-left-top: -6px;

  /* direita (à direita do donut, um pouco acima do centro) */
  --legend-right-left: calc(50% + var(--nfchart-size) / 2 + 18px);
  --legend-right-top: calc(50% - 6px);
}

.nfchart-wrap {
  position: relative; /* para posicionar legendas absolutas */
  font-family: var(--nfchart-font);
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  align-items: center;
  width: min(92vw, 560px);
  margin: 24px auto;
}

/* DONUT (só dois círculos) */
.nfchart-ring {
  position: relative;
  width: var(--nfchart-size);
  height: var(--nfchart-size);
}
.nfchart-ring svg {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 50% 50%;
}

.nfchart-seg-black,
.nfchart-seg-red {
  fill: none;
  stroke-width: var(--nfchart-stroke);
  stroke-linecap: butt; /* sem fenda */
  transform-origin: 50% 50%;
  transform: rotate(0deg);

  transition: stroke-dasharray 0.6s ease, stroke-dashoffset 0.6s ease;
}

/* PRETO cobre 360° e fica por baixo */
.nfchart-seg-black {
  stroke: var(--nfchart-black);

  transform-origin: 50% 50%;
  z-index: 0;
}

/* VERMELHO cobre só a fração, por cima; ponto inicial controlado por CSS */
.nfchart-seg-red {
  stroke: var(--nfchart-red);
  transform-origin: 50% 50%;
  transform: rotate(calc(-199deg + var(--red-rotate)));
  z-index: 1;
}

/* CENTRO (137 + Tentativas) */
.nfchart-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.nfchart-center strong {
  font-size: var(--nfchart-num-size);
  font-weight: 800;
  line-height: var(--nfchart-num-line);
  margin-bottom: var(--nfchart-num-bottom);
  color: var(--nfchart-gray);
  display: block;
}
.nfchart-center span {
  font-size: var(--nfchart-label-size);
  color: var(--nfchart-gray);
  transform: translateY(var(--nfchart-label-top));
  margin-top: 0;
  display: block;
}

/* ===== LEGENDAS POSICIONADAS COMO NO MOCK ===== */
.nfchart-legend {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.nfchart-item {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px; /* controla o “colar” entre bola e texto */
  white-space: nowrap;
  pointer-events: auto;
}

.nfchart-item img {
  width: 22px;
  height: auto;
  flex: 0 0 32px; /* garante largura fixa e mantém à esquerda */
  display: block;
  margin-bottom: 20px;
}

/* empilha número em cima do label */
.nfchart-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.nfchart-item > .nfchart-text {
  font-weight: 800;
  font-size: 20px;
  color: #333;
}

.nfchart-item small {
  font-size: 0.8em;
  margin-top: 2px;
}

/* esquerda (acima/à esquerda do donut) */
.nfchart-item--left {
  left: var(--legend-left-left);
  top: var(--legend-left-top);
}

.nfchart-item--left .nfchart-conv {
  color: var(--nfchart-red);
  font-size: 35px;
}

/* direita (à direita do donut). bola segue à esquerda */
.nfchart-item--right {
  left: var(--legend-right-left);
  top: var(--legend-right-top);
  text-align: left;
}

.nfchart-item--right .nfchart-nconv {
  color: #000;
  font-size: 35px;
}

/* ajustes finais */
.nfchart-conv1 {
  color: var(--nfchart-red);
  font-weight: 700;

  margin-left: -40px;
}

.nfchart-conv2 {
  color: #000;
  font-weight: 700;
  margin: 0;
  transform: none;
  margin-left: -45px;
}

/* taxa (abaixo, central) — mantenha se precisar */
.nfchart-rate {
  color: var(--nfchart-red);
  font-weight: 600;
  font-style: italic;
  font-size: 20px;
  margin-top: 0.5rem;
}

/* acessibilidade */
@media (prefers-reduced-motion: reduce) {
  .nfchart-seg-black,
  .nfchart-seg-red {
    transition: none;
  }
}

/* precisa ter transition nessas classes */
.nfchart-seg-black,
.nfchart-seg-red {
  transition: stroke-dasharray 0.6s ease, stroke-dashoffset 0.6s ease;
  transform-origin: 50% 50%;
}
/* inícios no topo; vermelho você ajusta pelo --red-rotate */
.nfchart-seg-black {
  transform: rotate(-90deg);
}
.nfchart-seg-red {
  transform: rotate(calc(-199deg + var(--red-rotate, 0deg)));
}

/* ===== Evolução Anual (prefixo: nfcs) ===== */
:root {
  --nfcs-title-color: #333333;
  --nfcs-sub-color: #6f6f6f;
}

.nfcs-evolucao {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px; /* distância entre título e subtítulo */
  padding: 8px 0; /* respiro vertical */
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
}

.nfcs-title {
  margin: 0;
  font-size: 24px; /* ajuste fino conforme seu layout */
  line-height: 1.1;
  font-weight: 800; /* bem forte, como no exemplo */
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--nfcs-title-color);
}

.nfcs-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  font-style: italic;
  font-weight: 400;
  color: var(--nfcs-sub-color);
  opacity: 0.95; /* leve suavizada no tom */
}

/* Opcional: ajuste em telas menores */
@media (max-width: 420px) {
  .nfcs-title {
    font-size: 22px;
  }
  .nfcs-sub {
    font-size: 13px;
  }
}

@media (max-width: 690px) {
  .nfchart-wrap {
    transform: scale(0.9);
  }

  .nfchart-item--left {
    margin-left: 40px;
    margin-top: -30px;
  }

  .nfchart-item--right {
    margin-left: -60px;
    margin-top: 60px;
  }

  .nfchart-rate {
    margin-top: 40px;
  }
}

.video-container {
  position: relative;

  display: block;
  margin: 0 auto;

  max-width: 1200px;
}

.video-wrapper {
  display: flex;
  justify-content: center;
}

.video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 3px solid #fff;
  border-radius: 10px;
}

@media (min-width: 691px) {
  .video-container-lg {
    max-width: 1920px;
  }
  .video-lg {
    display: flex;
  }
  .video-md,
  .video-sm {
    display: none;
  }
}

@media (max-width: 690px) {
  .video-container-sm {
    max-width: 690px;
  }
  .video-sm {
    display: block;
  }
  .video-lg,
  .video-md {
    display: none;
  }
}

.figcaption2 {
  display: none;
}

/* ===== Nome do jogador (herda a cor do tipo) ===== */
.nflfield-playerName {
  position: absolute;
  transform: translateY(-50%);
  padding: 0 0; /* sem background */
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: left 0.28s ease, top 0.32s ease, opacity 0.22s ease,
    font-size 0.12s ease;
  font-style: italic; /* estilo diferente do valor das jardas */
  font-weight: 600; /* um pouco mais leve que o valor */
  font-size: 14px; /* pode ajustar */
  background: transparent;
  margin-left: -10px;
}

/* Mantém a MESMA cor das jardas por tipo */
.nflfield-playerName.nflfield-record {
  color: var(--color-record);
}
.nflfield-playerName.nflfield-r2025 {
  color: var(--color-r2025);
}

/* Se quiser que os nomes “fracos” (que não estão no highlight) fiquem apagados, pode usar:
.nflfield-playerName { opacity: var(--inactiveOpacity); } 
…mas aqui deixamos 100% quando aparecer. */

@media (max-width: 690px) {
  .nflfield-playerName {
    transform: translateY(0); /* no mobile, alinhamos por 'top' puro */
    font-size: 13px; /* opcional: levemente menor */
    margin-left: -20px;
    margin-top: -10px;
  }
}