/* copa-do-mundo/public/assets/css/copa.css
   ------------------------------------------------------------
   CSS próprio da Copa, sem depender dos CSS do projeto principal.
   Tons laranja da marca (PDC) + azul/dourado Copa do Mundo.
   ------------------------------------------------------------ */

:root {
  /* PREMIUM: bg neutro quase-branco (era #fff8ec creme blog 2018) */
  --copa-bg: #fafaf7;
  --copa-surface: #ffffff;
  --copa-surface-2: #fafafa;
  --copa-border: #e6dfcf;
  --copa-border-soft: #ececec;  /* alt neutra pra blocos premium */
  --copa-text: #1a2238;
  --copa-muted: #5d6478;
  --copa-accent: #fb5904;       /* laranja marca (igual ao site normal) */
  --copa-navy: #14224c;         /* azul da logo "Prováveis da Copa" */
  --copa-green: #2a9d57;        /* verde Brasil */
  --copa-gold: #d9a441;         /* dourado da taça (legado) */
  --copa-success: #22c55e;
  --copa-danger: #ef4444;
  --copa-shadow: 0 4px 14px rgba(20, 34, 76, 0.08);

  /* ---------- PREMIUM TOKENS (escala dourada + easing + glow) ---------- */
  --copa-gold-50:  #fdf7e8;
  --copa-gold-100: #f7e9bf;
  --copa-gold-300: #e9c878;
  --copa-gold-500: #d9a441;     /* canonical, = --copa-gold */
  --copa-gold-700: #a87a25;
  --copa-gold-900: #5e4313;

  /* Tipografia — display serif só pra títulos editoriais (carregada por copa-layout.js) */
  --copa-font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --copa-font-body: 'Inter Tight', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Easing premium: spring (overshoot suave) e ease-out controlado */
  --copa-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --copa-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Glows pra hover (gold) e estados (navy) */
  --copa-glow-gold: 0 6px 18px rgba(217, 164, 65, 0.28);
  --copa-glow-gold-soft: 0 2px 8px rgba(217, 164, 65, 0.18);
  --copa-glow-navy: 0 10px 28px rgba(20, 34, 76, 0.16);

  /* Borda dourada inset reutilizável */
  --copa-inset-gold: inset 0 0 0 1px rgba(217, 164, 65, 0.22);
  --copa-inset-gold-strong: inset 0 0 0 1.5px rgba(217, 164, 65, 0.55);
}

* { box-sizing: border-box; }

html, body { background: var(--copa-bg); color: var(--copa-text); }

body {
  margin: 0;
  font-family: 'Inter Tight', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

.copa-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}

/* ======================================================================
   HEADER / LOGO
   ====================================================================== */
.copa-header {
  padding: 14px 12px 4px;
  text-align: center;
}
.copa-header__logo {
  display: inline-block;
  width: 100%;
  max-width: 1200px;            /* casa com a largura nativa do banner desktop */
  border-radius: 14px;
  box-shadow: var(--copa-shadow);
  overflow: hidden;
  line-height: 0;               /* remove gap embaixo da imagem */
}
.copa-header__logo picture,
.copa-header__logo img {
  display: block;
  width: 100%;
  height: auto;                 /* aspect-ratio vem dos width/height nativos */
}

/* ======================================================================
   NAVBAR — réplica 1:1 da .hero-buttons da home do site principal,
   adaptada pra Copa. Container cinza-claro em pílula, botões transparentes
   por padrão, gradiente laranja no ativo, botão "Brasileirão" verde (como o
   BIAScore roxo do site normal).
   ====================================================================== */
.copa-nav-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 12px;
}
.copa-nav {
  max-width: 940px;
  width: 100%;
  margin: 14px auto 18px;
  padding: 5px 6px;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;

  background: #f3f4f6;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

.copa-nav .btn-nav {
  all: unset;
  cursor: pointer;
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  flex: 1 1 0;
  padding: 8px 14px;
  border-radius: 999px;

  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;

  color: #4b5563;
  background: transparent;

  transition:
    color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}
.copa-nav .btn-nav i {
  font-size: 0.95rem;
  color: inherit;
  opacity: 0.8;
}
.copa-nav .btn-nav:hover {
  color: var(--copa-accent);
  background: rgba(251, 89, 4, 0.08);
}
.copa-nav .btn-nav.is-active,
.copa-nav .btn-nav[aria-current='page'] {
  color: #fff;
  background: linear-gradient(135deg, var(--copa-accent) 0%, #ff9740 100%);
  box-shadow: 0 3px 10px rgba(251, 89, 4, 0.3);
}
.copa-nav .btn-nav.is-active i,
.copa-nav .btn-nav[aria-current='page'] i { opacity: 1; }

/* Botão especial "Brasileirão" — mesma linguagem do BIAScore (degradê sempre aceso) */
.copa-nav .btn-nav.btn-brasileirao {
  color: #fff;
  background: linear-gradient(135deg, #22c55e, #15803d);
  box-shadow: 0 3px 10px rgba(21, 128, 61, 0.28);
}
.copa-nav .btn-nav.btn-brasileirao:hover {
  color: #fff;
  background: linear-gradient(135deg, #22c55e, #1f7d42);
  box-shadow: 0 5px 14px rgba(34, 197, 94, 0.38);
}
.copa-nav .btn-nav.btn-brasileirao i { opacity: 1; }

/* "NOVO" tag (idêntico ao .nav-novo do site principal) */
.copa-nav .nav-novo {
  position: absolute;
  top: -9px;
  right: -5px;
  font-style: normal;
  font-size: 8.5px;
  font-weight: 900;
  background: #facc15;
  color: #713f12;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.6;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(250, 204, 21, 0.6);
  pointer-events: none;
  z-index: 20;
}

/* Mobile: pílula mantém, só aperta o padding/tipografia */
@media (max-width: 720px) {
  .copa-nav {
    gap: 2px;
    padding: 4px 5px;
    border-radius: 999px;
  }
  .copa-nav .btn-nav {
    font-size: 0.78rem;
    padding: 7px 10px;
  }
  .copa-nav .btn-nav span { white-space: nowrap; }
  .copa-nav .btn-nav i { font-size: 0.88rem; }
}
@media (max-width: 420px) {
  .copa-nav .btn-nav { padding: 7px 8px; font-size: 0.72rem; }
}

/* ======================================================================
   NAVBAR DE ESCUDOS DE SELEÇÕES (2 x 24)
   ====================================================================== */
.copa-selecoes-nav {
  max-width: 1300px;
  margin: 10px auto 6px;
  padding: 10px 12px;
  background: var(--copa-surface);
  border: 1px solid var(--copa-border);
  border-radius: 14px;
  box-shadow: var(--copa-shadow);
}
.copa-selecoes-nav__grid {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 6px;
}
@media (max-width: 1100px) {
  .copa-selecoes-nav__grid {
    grid-template-columns: repeat(16, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .copa-selecoes-nav__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 4px;
  }
}
@media (max-width: 420px) {
  .copa-selecoes-nav__grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

.copa-selecao-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 4px;
  background: var(--copa-surface-2);
  border: 1px solid var(--copa-border);
  border-radius: 10px;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, filter 0.2s ease;
  position: relative;
}
.copa-selecao-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.copa-selecao-btn:hover {
  transform: translateY(-2px);
  border-color: var(--copa-accent);
  box-shadow: 0 4px 10px rgba(251, 89, 4, 0.18);
}

/* --- estado ELIMINADA --- */
.copa-selecao-btn.is-eliminada {
  cursor: not-allowed;
  background: repeating-linear-gradient(
    135deg,
    #f0e9dc,
    #f0e9dc 6px,
    #e6dfcf 6px,
    #e6dfcf 7px
  );
  border-color: #d6cdb8;
  pointer-events: none;
}
.copa-selecao-btn.is-eliminada img {
  filter: grayscale(1) opacity(0.45);
}
.copa-selecao-btn.is-eliminada::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background:
    linear-gradient(45deg, transparent 45%, rgba(239,68,68,0.75) 45%, rgba(239,68,68,0.75) 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, rgba(239,68,68,0.75) 45%, rgba(239,68,68,0.75) 55%, transparent 55%);
  opacity: 0.85;
  pointer-events: none;
}

/* ======================================================================
   HERO — mesmo tom do .mast-title do site principal (pequeno, centralizado)
   ====================================================================== */
.copa-hero {
  padding: 10px 16px 8px;
  text-align: center;
}
.copa-hero h1 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--copa-text);
  letter-spacing: 0.1px;
}
.copa-hero p {
  margin: 0 auto;
  max-width: 640px;
  color: var(--copa-muted);
  font-size: 0.82rem;
  line-height: 1.45;
  opacity: 0.85;
}
.copa-hero__badges {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 8px 0;
}
.copa-hero__badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  background: #fff;
  color: var(--copa-text);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(15,23,42,0.04);
}
.copa-hero__badge i { color: var(--copa-accent); font-size: 0.9rem; }
.copa-hero__badge.copa-hero__badge--ok i { color: var(--copa-success); }
.copa-hero__badge.copa-hero__badge--gold {
  background: #fff7e0;
  border-color: rgba(217,164,65,0.45);
  color: #8a6a21;
}
.copa-hero__badge.copa-hero__badge--gold i { color: var(--copa-gold); }

/* grade "cards" (versão grande, abaixo do hero, clicável) */
.copa-selecoes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  padding: 12px 0 8px;
}
.copa-selecao-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px;
  background: var(--copa-surface);
  border: 1px solid var(--copa-border);
  border-radius: 12px;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease, filter 0.2s ease;
}
.copa-selecao-card:hover {
  transform: translateY(-2px);
  border-color: var(--copa-accent);
}
.copa-selecao-card img {
  width: 48px; height: 48px; object-fit: contain;
}
.copa-selecao-card__name {
  font-size: 0.78rem;
  color: var(--copa-muted);
  text-align: center;
  line-height: 1.15;
  min-height: 2.2em;
}
.copa-selecao-card.is-eliminada {
  pointer-events: none;
  background: #f3ede0;
  border-color: #d6cdb8;
}
.copa-selecao-card.is-eliminada img { filter: grayscale(1) opacity(0.4); }
.copa-selecao-card.is-eliminada .copa-selecao-card__name { opacity: 0.6; }
.copa-selecao-card__eliminada-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(239,68,68,0.15);
  color: #b42424;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 2px;
}

/* ======================================================================
   PARTIDAS (cards de jogos)
   ====================================================================== */
.copa-partidas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 8px 0 24px;
}
@media (min-width: 760px) {
  .copa-partidas { grid-template-columns: 1fr 1fr; }
}
.copa-partida {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--copa-surface);
  border: 1px solid var(--copa-border);
  border-radius: 12px;
  box-shadow: var(--copa-shadow);
}
.copa-partida__side {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.copa-partida__side--away { justify-content: flex-end; }
.copa-partida__side img { width: 36px; height: 36px; object-fit: contain; }
.copa-partida__nome {
  font-size: 0.92rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Por padrão (desktop) mostra o nome completo, esconde a abreviação */
.copa-partida__nome .full { display: inline; }
.copa-partida__nome .abrev { display: none; }
/* Mobile: inverte — só abreviação 3 letras (BRA, MEX, COR) pra caber */
@media (max-width: 560px) {
  .copa-partida__nome .full { display: none; }
  .copa-partida__nome .abrev { display: inline; font-weight: 700; letter-spacing: 0.5px; }
}
.copa-partida__meta {
  text-align: center;
  font-size: 0.78rem;
  color: var(--copa-muted);
  min-width: 82px;
}
.copa-partida__meta strong {
  display: block; color: var(--copa-text); font-size: 0.92rem;
}
.copa-partida__local {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--copa-muted);
  font-size: 0.72rem;
  margin-top: 4px;
  border-top: 1px dashed var(--copa-border);
  padding-top: 6px;
}

/* ======================================================================
   Empty / skeleton / footer
   ====================================================================== */
.copa-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--copa-muted);
  border: 1px dashed var(--copa-border);
  border-radius: 12px;
  background: #fffaef;
}
.copa-skel {
  background: linear-gradient(90deg, #f0e9dc, #e6dfcf, #f0e9dc);
  background-size: 200% 100%;
  animation: copa-skel 1.2s ease-in-out infinite;
  border-radius: 10px;
}
@keyframes copa-skel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.copa-footer {
  padding: 18px 16px 26px;
  text-align: center;
  color: var(--copa-muted);
  font-size: 0.82rem;
  border-top: 1px solid var(--copa-border);
  margin-top: 16px;
}
.copa-footer a { color: var(--copa-accent); font-weight: 600; }

/* ============================================================================
   GRUPOS — cards na home /copa e blocos de partidas em /copa/partidas
   ============================================================================ */
.copa-grupos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin: 18px 0;
  padding: 0 12px;
}
.copa-grupo-card {
  background: #fff;
  border: 1px solid var(--copa-border);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: var(--copa-shadow);
}
.copa-grupo__head {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--copa-border);
}
.copa-grupo__letra {
  font-weight: 800;
  font-size: 1rem;
  color: var(--copa-navy);
}
.copa-grupo__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.copa-grupo__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--copa-text);
  font-size: 0.88rem;
  transition: background 0.12s ease;
}
.copa-grupo__row:hover {
  background: rgba(251, 89, 4, 0.06);
  color: var(--copa-accent);
}
.copa-grupo__row img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.copa-grupo__row .nm { line-height: 1.1; }

/* ============================================================================
   TOGGLE DE VISUALIZAÇÃO em /copa/partidas
   ============================================================================ */
.copa-partidas-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: #f3f4f6;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  margin: 0 auto 14px;
}
.copa-partidas-toggle button {
  all: unset;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #4b5563;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.copa-partidas-toggle button:hover { color: var(--copa-accent); }
.copa-partidas-toggle button.is-active {
  background: linear-gradient(135deg, var(--copa-accent) 0%, #ff9740 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(251, 89, 4, 0.25);
}
.copa-partidas-toggle-wrap {
  display: flex;
  justify-content: center;
  margin: 0 12px 4px;
}

/* ============================================================================
   BLOCO DE GRUPO em /copa/partidas (modo "Por grupo")
   ============================================================================ */
.copa-grupo-bloco {
  margin: 16px 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--copa-border);
  border-radius: 14px;
  box-shadow: var(--copa-shadow);
}
.copa-grupo-bloco__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--copa-border);
  padding-bottom: 8px;
  flex-wrap: wrap;
}
.copa-grupo-bloco__head h2 { margin: 0; font-size: 1rem; }
.copa-grupo-bloco__chip {
  display: inline-block;
  padding: 3px 10px;
  background: linear-gradient(135deg, var(--copa-navy) 0%, #2a3f7a 100%);
  color: #fff;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.copa-grupo-bloco__sub {
  font-size: 0.72rem;
  color: var(--copa-muted);
  text-align: right;
  line-height: 1.2;
}
.copa-grupo-bloco__partidas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Chip sutil sobre cada partida — centralizado no topo, sem brigar com escudos.
   O padding-top do card reserva o espaço pra o chip caber acima do conteúdo. */
.copa-partida {
  position: relative;
  padding-top: 24px;            /* espaço pro chip */
}
.copa-partida__grupo {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--copa-muted);
  background: rgba(20, 34, 76, 0.06);
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Dentro do bloco "Por grupo" o chip individual fica REDUNDANTE
   (já tem o header "Grupo X" do bloco). Esconde nesse contexto. */
.copa-grupo-bloco .copa-partida { padding-top: 12px; }
.copa-grupo-bloco .copa-partida__grupo { display: none; }

/* ============================================================================
   PLACAR + STATUS (ao vivo / encerrado) — dentro do .copa-partida
   ============================================================================ */
.copa-partida__placar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 90px;
}
.copa-partida__placar strong {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--copa-text);
  font-variant-numeric: tabular-nums;
}
.copa-partida__placar .dash {
  font-size: 1.1rem;
  color: var(--copa-muted);
  margin: 0 6px;
}
.copa-partida__placar--live strong { color: var(--copa-accent); }

/* O score é horizontal (mandante × visitante) */
.copa-partida__placar {
  flex-direction: row;
  align-items: baseline;
  position: relative;
  padding-bottom: 18px;   /* espaço pro chip embaixo */
}

/* Chips de status */
.copa-partida__chip {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.copa-partida__chip--live {
  background: #dc2626;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35);
}
.copa-partida__chip--live .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff;
  animation: copaLivePulse 1.2s ease-in-out infinite;
}
@keyframes copaLivePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.7); }
}
.copa-partida__chip--fim {
  background: #475569;
  color: #fff;
}

/* ============================================================================
   HERO DESC — bloco expansível com texto SEO (<details>)
   ============================================================================ */
.copa-hero__desc {
  background: var(--copa-surface);
  border: 1px solid var(--copa-border);
  border-radius: 12px;
  margin: 12px 16px 0;
  overflow: hidden;
  font-size: 0.92rem;
  line-height: 1.45;
}
.copa-hero__desc > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--copa-navy);
  user-select: none;
  position: relative;
  padding-right: 36px;
}
.copa-hero__desc > summary::-webkit-details-marker { display: none; }
.copa-hero__desc > summary::after {
  content: '▾';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
  color: var(--copa-muted);
  font-size: 0.9rem;
}
.copa-hero__desc[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
.copa-hero__desc > summary i { color: var(--copa-accent); }
.copa-hero__desc > summary:hover { background: rgba(251, 89, 4, 0.04); }
.copa-hero__desc p {
  margin: 0;
  padding: 4px 14px 12px;
  color: var(--copa-text);
}
.copa-hero__desc p + p { padding-top: 0; padding-bottom: 14px; }
.copa-hero__desc p strong { color: var(--copa-navy); font-weight: 700; }

/* ============================================================================
   NOTÍCIAS — feed estilo OneFootball + página de leitura estilo GE
   ============================================================================ */
.noticias-feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  padding: 0 12px;
}
@media (max-width: 720px) {
  .noticias-feed { grid-template-columns: 1fr; gap: 14px; padding: 0 12px; }
}

.noticia-card {
  display: flex;
  flex-direction: column;
  background: var(--copa-surface);
  border: 1px solid var(--copa-border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: var(--copa-text);
  box-shadow: var(--copa-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.noticia-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(20, 34, 76, 0.12);
}

/* Destaque (primeira notícia ocupa 2 colunas no desktop) */
@media (min-width: 720px) {
  .noticia-card.is-destaque {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .noticia-card.is-destaque .noticia-card__img {
    flex: 1 1 55%;
    aspect-ratio: 16/9;
    min-height: 280px;
  }
  .noticia-card.is-destaque .noticia-card__body {
    flex: 1 1 45%;
    padding: 22px 24px;
  }
  .noticia-card.is-destaque .noticia-card__titulo { font-size: 1.6rem; }
}

.noticia-card__img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1e293b, #0b1a3a);
  overflow: hidden;
}
.noticia-card__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.noticia-card:hover .noticia-card__img img { transform: scale(1.03); }
.noticia-card__sem-capa {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.4); font-size: 2.5rem;
}

.noticia-card__body {
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.noticia-card__tags {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.noticia-card__tag {
  display: inline-block;
  padding: 2px 8px;
  background: transparent;
  color: var(--copa-accent);
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1.4;
}
.noticia-card__titulo {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--copa-navy);
}
.noticia-card__resumo {
  margin: 0;
  font-size: 0.88rem;
  color: var(--copa-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.noticia-card__meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 0.76rem;
  color: var(--copa-muted);
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--copa-border);
}
.noticia-card__meta span { display: inline-flex; align-items: center; gap: 4px; }

/* ============================================================================
   PÁGINA DE LEITURA — /copa/noticia/<slug>
   ============================================================================ */
.noticia-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}
.noticia-page__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.noticia-page__head h1 {
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--copa-navy);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.noticia-page__resumo {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--copa-muted);
  margin: 0 0 18px;
  font-weight: 500;
}
.noticia-page__meta {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 0; margin-bottom: 18px;
  border-top: 1px solid var(--copa-border);
  border-bottom: 1px solid var(--copa-border);
}
.noticia-page__autor { display: flex; align-items: center; gap: 10px; }
.noticia-page__autor > i { font-size: 1.8rem; color: var(--copa-muted); }
.noticia-page__autor > div { display: flex; flex-direction: column; line-height: 1.2; }
.noticia-page__autor strong { font-size: 0.92rem; color: var(--copa-text); }
.noticia-page__autor span { font-size: 0.76rem; color: var(--copa-muted); }
.noticia-page__autor-nome {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .12s, border-color .12s;
}
.noticia-page__autor-nome:hover { color: var(--copa-accent); border-bottom-color: var(--copa-accent); }
.noticia-page__autor-link {
  display: inline-flex; width: 44px; height: 44px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0; text-decoration: none;
  border: 2px solid var(--copa-border);
  transition: border-color .12s, transform .12s;
}
.noticia-page__autor-link:hover { border-color: var(--copa-accent); transform: scale(1.05); }
.noticia-page__autor-link img { width: 100%; height: 100%; object-fit: cover; display: block; }
.noticia-page__autor-link .iniciais {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--copa-accent), #d04400);
  color: #fff; font-weight: 800; font-size: 1rem;
}
.noticia-page__meta-tempo {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--copa-muted); font-size: 0.76rem;
  margin-left: 8px;
}
.noticia-page__meta-tempo::before { content: "·"; margin-right: 4px; opacity: .6; }

.noticia-page__share { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: filter .12s, transform .12s, background .12s, border-color .12s;
}
.share-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.share-btn i { font-size: 1rem; }

/* WhatsApp — preenchimento verde (mais forte, é o que mais converte no Brasil) */
.share-btn.share-wa {
  background: #25d366;
  color: #fff;
  border-color: #25d366;
}
.share-btn.share-wa:hover { background: #1ebe5a; }

/* X / Twitter — preenchimento preto */
.share-btn.share-tw {
  background: #000;
  color: #fff;
  border-color: #000;
}
.share-btn.share-tw:hover { background: #1f1f1f; }

/* Copiar — ghost (outline cinza, menos visual) */
.share-btn.share-copy {
  background: transparent;
  color: var(--copa-text);
  border-color: var(--copa-border);
}
.share-btn.share-copy:hover { background: rgba(0,0,0,0.04); border-color: var(--copa-muted); }
.share-btn.share-copy.is-done { background: #16a34a; color: #fff; border-color: #16a34a; }

/* Em telas pequenas, esconde o label e mantém só o ícone pra economizar espaço */
@media (max-width: 520px) {
  .share-btn span { display: none; }
  .share-btn { padding: 9px 12px; }
  .share-btn i { font-size: 1.05rem; }
}

.noticia-page__capa {
  margin: 0 0 18px;
}
.noticia-page__capa img {
  width: 100%; height: auto;
  border-radius: 14px;
  display: block;
  box-shadow: 0 8px 28px rgba(0,0,0,.15);
}
/* Crédito da capa (estilo GE/Lance): itálico cinza pequeno, alinhado à direita */
.noticia-page__credito {
  font-size: 0.78rem;
  color: var(--copa-muted);
  font-style: italic;
  text-align: right;
  margin-top: 8px;
  padding-right: 4px;
  line-height: 1.3;
}

.noticia-page__corpo {
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--copa-text);
}
.noticia-page__corpo p { margin: 0 0 1em; }
.noticia-page__corpo h2 { font-size: 1.5rem; margin: 1.4em 0 .5em; color: var(--copa-navy); font-weight: 700; }
.noticia-page__corpo h3 { font-size: 1.2rem; margin: 1.2em 0 .4em; color: var(--copa-navy); font-weight: 700; }
.noticia-page__corpo img {
  max-width: 100%; height: auto;
  border-radius: 10px;
  margin: 18px 0;
  display: block;
}
.noticia-page__corpo blockquote {
  border-left: 4px solid var(--copa-accent);
  padding: 4px 16px;
  margin: 18px 0;
  color: var(--copa-muted);
  font-style: italic;
  background: rgba(251,89,4,.04);
  border-radius: 0 8px 8px 0;
}
.noticia-page__corpo a { color: var(--copa-accent); text-decoration: underline; text-underline-offset: 2px; }
.noticia-page__corpo ul, .noticia-page__corpo ol { padding-left: 1.4em; margin: 0 0 1em; }
.noticia-page__corpo li { margin-bottom: 0.3em; }
.noticia-page__corpo iframe { max-width: 100%; border: 0; border-radius: 10px; aspect-ratio: 16/9; margin: 12px 0; }

.noticia-page__rodape {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--copa-border);
  text-align: center;
}
.noticia-page__voltar {
  color: var(--copa-accent);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.noticia-page__voltar:hover { text-decoration: underline; }

/* ============================================================================
   FEED DE NOTÍCIAS — cabeçalho com peso + hero gigante (1 notícia) + chips
   ============================================================================ */
.feed-hdr {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  padding: 24px 12px 12px;
  max-width: 1200px; margin: 0 auto;
}
.feed-hdr h1 {
  margin: 0;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--copa-navy);
  letter-spacing: -0.02em;
}
.feed-hdr h1 span {
  color: var(--copa-accent);
  display: block;
  font-weight: 800;
}
.feed-hdr__sub {
  color: var(--copa-muted);
  font-size: 0.95rem;
  max-width: 380px;
  line-height: 1.4;
  margin: 0;
}
/* Mobile: header mais compacto, subtítulo encolhido pra não roubar protagonismo do hero */
@media (max-width: 640px) {
  .feed-hdr { padding: 16px 12px 8px; gap: 6px; }
  .feed-hdr h1 { font-size: 1.5rem; line-height: 1.1; }
  .feed-hdr__sub { font-size: 0.82rem; line-height: 1.35; max-width: 100%; }
}

/* Chips de filtro */
.feed-chips {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 4px 12px 16px;
  max-width: 1200px; margin: 0 auto;
}
.feed-chip {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--copa-surface);
  border: 1px solid var(--copa-border);
  color: var(--copa-text);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.feed-chip:hover { border-color: var(--copa-accent); color: var(--copa-accent); }
.feed-chip.is-active {
  background: var(--copa-accent);
  color: #fff;
  border-color: var(--copa-accent);
}

/* Hero gigante — destaque editorial (sempre o primeiro item) */
.noticia-hero {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #1e293b, #0b1a3a);
  margin-bottom: 24px;
  box-shadow: 0 12px 32px rgba(20, 34, 76, 0.18);
  transition: transform .15s ease;
}
.noticia-hero:hover { transform: translateY(-2px); }
.noticia-hero > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.noticia-hero:hover > img { transform: scale(1.03); }
.noticia-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.85) 100%);
}
.noticia-hero__body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 32px;
  z-index: 1;
}
.noticia-hero__tags {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px;
}
.noticia-hero__tag {
  background: var(--copa-accent);
  color: #fff;
  border: 0;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.noticia-hero__titulo {
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
  max-width: 800px;
}
.noticia-hero__resumo {
  margin: 0;
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.1rem);
  line-height: 1.4;
  max-width: 720px;
  opacity: .94;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.noticia-hero__meta {
  margin-top: 12px;
  font-size: 0.78rem;
  opacity: .88;
  display: flex; gap: 14px; flex-wrap: wrap;
}
.noticia-hero__meta span { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 640px) {
  /* Aspect 16/10 funciona melhor que 4/5 — menos vertical, mostra mais conteúdo
     da foto sem cortar rostos. Gradiente mais forte garante leitura do texto.
     SEM margin: o alinhamento horizontal com o resto da página deve vir do
     .copa-container (que já tem padding). Margin extra aqui causa desalinho. */
  .noticia-hero {
    aspect-ratio: 16 / 11;
    border-radius: 12px;
    margin: 0 0 18px;
  }
  .noticia-hero__overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.92) 100%);
  }
  .noticia-hero__body { padding: 14px 16px 18px; }
  /* Manchete 15% menor: 1.15rem → 0.98rem */
  .noticia-hero__titulo { font-size: 0.98rem; line-height: 1.2; }
  .noticia-hero__resumo { display: none; } /* redundante com o card */
  .noticia-hero__meta { display: none; }   /* autor + tempo: redundante e polui */
  .noticia-hero__tags { margin-bottom: 5px; gap: 4px; }
  /* Chips menores: 0.62rem → 0.55rem + padding apertado */
  .noticia-hero__tag {
    font-size: 0.55rem;
    padding: 2px 6px;
    letter-spacing: 0.3px;
  }
}

/* Esconde a navbar de escudos em páginas onde ela não agrega informação:
   - /copa/partidas: os escudos já aparecem em cada card de jogo
   - /copa/noticias e /copa/noticia: páginas editoriais, não navegação por seleção */
body[data-copa-page="partidas"] .copa-selecoes-nav,
body[data-copa-page="noticias"] .copa-selecoes-nav,
body[data-copa-page="noticia"] .copa-selecoes-nav {
  display: none;
}

/* ============================================================================
   FOOTER v2 — 3 colunas (marca + Copa + PDC) com tipografia editorial sóbria.
   Fundo escuro pra contrastar com o creme do site e dar "fechamento" visual.
   ============================================================================ */
.copa-footer-v2 {
  margin-top: 56px;
  background: #0b1a3a; /* navy do site, como cabeçalho dark */
  color: rgba(255, 255, 255, 0.78);
  padding: 40px 20px 24px;
  font-size: 0.88rem;
  line-height: 1.5;
}
.copa-footer-v2__wrap {
  max-width: 1100px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 36px;
}
.copa-footer-v2__brand p {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.86rem;
  line-height: 1.55;
  max-width: 320px;
}
.copa-footer-v2__logo {
  display: inline-flex; align-items: center; gap: 10px;
  color: #fff; text-decoration: none; font-weight: 700;
}
.copa-footer-v2__logo .mark {
  background: var(--copa-gold);
  color: #111;
  border-radius: 6px;
  padding: 3px 9px;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
}
.copa-footer-v2__logo .name { font-size: 1.02rem; }

.copa-footer-v2__col {
  display: flex; flex-direction: column; gap: 8px;
}
.copa-footer-v2__col h3 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--copa-gold);
  margin: 0 0 6px;
}
.copa-footer-v2__col a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color .12s;
}
.copa-footer-v2__col a:hover { color: var(--copa-accent); }

.copa-footer-v2__bottom {
  max-width: 1100px; margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; flex-wrap: wrap;
}
.copa-footer-v2__bottom small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.75rem;
}
.copa-footer-v2__aviso {
  max-width: 540px;
  text-align: right;
  line-height: 1.45;
}

/* Mobile */
@media (max-width: 720px) {
  .copa-footer-v2 { padding: 32px 18px 22px; margin-top: 40px; }
  .copa-footer-v2__wrap { grid-template-columns: 1fr; gap: 28px; }
  .copa-footer-v2__brand p { max-width: 100%; }
  .copa-footer-v2__bottom { flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; }
  .copa-footer-v2__aviso { text-align: left; max-width: 100%; }
}

/* ============================================================================
   FOOTER MINIMALISTA — DEPRECATED (mantido por compat se ainda houver cache)
   ============================================================================ */
.copa-footer-simple {
  border-top: 1px solid var(--copa-border);
  background: #fff;
  text-align: center;
  padding: 24px 16px 32px;
  margin-top: 40px;
}
.copa-footer-simple__wrap {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.copa-footer-simple__copy {
  margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 0.86rem; color: var(--copa-text);
}
.copa-footer-simple__links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.copa-footer-simple__link {
  color: var(--copa-text); text-decoration: underline;
  text-underline-offset: 0.2em; font-weight: 500;
}
.copa-footer-simple__link:hover { color: var(--copa-accent); }
.copa-footer-simple__sep { color: var(--copa-muted); }
.copa-footer-simple__copyright { color: var(--copa-muted); font-size: 0.82rem; margin-top: 2px; }
.copa-footer-simple__aviso {
  display: block; max-width: 520px;
  font-size: 0.72rem; color: var(--copa-muted);
  line-height: 1.45;
}
@media (max-width: 640px) {
  .copa-footer-simple { padding: 16px 16px max(20px, env(safe-area-inset-bottom)); }
  .copa-footer-simple__sep { display: none; } /* vira lista vertical no mobile */
  .copa-footer-simple__links { gap: 14px; }
  .copa-footer-simple__aviso { max-width: 320px; font-size: 0.7rem; }
}

/* Footer expandido — DEPRECATED, mantido por compat com cache antigo */
.copa-footer-rich {
  margin-top: 40px;
  background: linear-gradient(180deg, #f6f6f0 0%, #ebebde 100%);
  border-top: 1px solid var(--copa-border);
  padding: 32px 16px 24px;
}
.copa-footer-rich__wrap {
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px 32px;
  align-items: start;
}
@media (max-width: 720px) {
  .copa-footer-rich__wrap { grid-template-columns: 1fr; }
}
.copa-footer-rich__breadcrumb {
  font-size: 0.82rem; color: var(--copa-muted);
  margin-bottom: 14px;
}
.copa-footer-rich__breadcrumb a { color: var(--copa-muted); text-decoration: none; }
.copa-footer-rich__breadcrumb a:hover { color: var(--copa-accent); text-decoration: underline; }
.copa-footer-rich__sep { margin: 0 6px; opacity: .5; }
.copa-footer-rich__brand strong { color: var(--copa-navy); font-size: 1rem; }
.copa-footer-rich__brand p { margin: 4px 0 0; color: var(--copa-muted); font-size: 0.84rem; max-width: 480px; }
.copa-footer-rich__links {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.copa-footer-rich__links a {
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--copa-border);
  color: var(--copa-text);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.copa-footer-rich__links a:hover { border-color: var(--copa-accent); color: var(--copa-accent); }
.copa-footer-rich__copyright {
  grid-column: 1 / -1;
  border-top: 1px solid var(--copa-border);
  padding-top: 14px;
  margin-top: 6px;
  font-size: 0.76rem;
  color: var(--copa-muted);
  text-align: center;
}

/* ============================================================================
   PREMIUM v1 — refinos pós-análise (textura, dourado, glow, microinterações)
   ADITIVO: nada aqui sobrescreve estrutura, só amplia visual. Pra reverter
   o tema premium em bloco, basta apagar este bloco inteiro do arquivo.
   ============================================================================ */

/* --- Body: textura noise SVG sutil (~4%) sobre o fundo --- */
body {
  background-color: var(--copa-bg);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.10  0 0 0 0 0.18  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  background-attachment: fixed;
}
@media (max-width: 720px) {
  /* fixed background gasta GPU em mobile; vira scroll */
  body { background-attachment: scroll; }
}

/* --- Tipografia editorial: serif display nos títulos principais ---
   Fraunces injetada por copa-layout.js; fallback Playfair Display / Georgia
   se a Google Fonts falhar (display:swap evita FOIT). */
.noticia-hero__titulo,
.feed-hdr h1,
.feed-hdr h1 span,
.noticia-page__head h1,
.copa-grupo-bloco__head h2 {
  font-family: var(--copa-font-display);
  font-weight: 800;
  letter-spacing: -0.015em;
  font-feature-settings: "ss01", "liga";
}

/* --- Cards: borda dourada inset + sombra premium --- */
.copa-partida,
.copa-grupo-card,
.copa-grupo-bloco,
.noticia-card {
  box-shadow:
    var(--copa-inset-gold),
    0 4px 14px rgba(20, 34, 76, 0.08);
}

/* --- Hover dos cards: lift + glow dourado + sombra navy ---
   Sobrescreve só o :hover, não a sombra base. Mantém o existing
   transition por compat, mas amplifica com spring no transform. */
.copa-partida,
.copa-grupo-card,
.noticia-card {
  transition:
    transform .28s var(--copa-spring),
    box-shadow .25s var(--copa-ease-out),
    border-color .2s var(--copa-ease-out),
    opacity .55s var(--copa-ease-out);
}
.copa-partida:hover,
.copa-grupo-card:hover,
.noticia-card:hover {
  transform: translateY(-4px);
  border-color: var(--copa-gold-300);
  box-shadow:
    var(--copa-inset-gold-strong),
    0 12px 28px rgba(20, 34, 76, 0.14),
    var(--copa-glow-gold);
}

/* --- Tilt 3D suave só em ponteiro fino (desktop com mouse) --- */
.copa-partidas, .copa-grupo-bloco__partidas { perspective: 1200px; }
@media (hover: hover) and (pointer: fine) {
  .copa-partida:hover {
    transform: translateY(-4px) rotateX(2deg) rotateY(-1deg);
  }
}

/* --- Seleções vivas: borda dourada permanente discreta --- */
.copa-selecao-btn:not(.is-eliminada),
.copa-selecao-card:not(.is-eliminada) {
  box-shadow: var(--copa-inset-gold), 0 1px 2px rgba(20, 34, 76, 0.04);
  transition:
    transform .22s var(--copa-spring),
    box-shadow .22s var(--copa-ease-out),
    border-color .2s var(--copa-ease-out);
}
.copa-selecao-btn:not(.is-eliminada):hover,
.copa-selecao-card:not(.is-eliminada):hover {
  border-color: var(--copa-gold-500);
  box-shadow: var(--copa-inset-gold-strong), var(--copa-glow-gold);
  transform: translateY(-3px);
}

/* --- Navbar de escudos: glass morphism + borda gold --- */
.copa-selecoes-nav {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-color: rgba(217, 164, 65, 0.20);
  box-shadow:
    var(--copa-inset-gold),
    0 8px 24px rgba(20, 34, 76, 0.08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* fallback: branco sólido (visual original) */
  .copa-selecoes-nav { background: var(--copa-surface); }
}

/* --- Card "destaque do dia": shimmer dourado a cada ~8s --- */
.noticia-card.is-destaque {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.noticia-card.is-destaque::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(217, 164, 65, 0.18) 45%,
    rgba(247, 233, 191, 0.34) 50%,
    rgba(217, 164, 65, 0.18) 55%,
    transparent 70%
  );
  transform: translateX(-120%);
  animation: copaShimmer 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}
@keyframes copaShimmer {
  0%, 80%, 100% { transform: translateX(-120%); }
  90%          { transform: translateX(120%); }
}

/* --- Card "ao vivo": ring conic-gradient animado em volta ---
   Usa :has() (Chrome 105+, Safari 15.4+, Firefox 121+). Em browsers
   antigos, simplesmente não aparece — fallback gracioso. */
.copa-partida:has(.copa-partida__chip--live) {
  position: relative;
  z-index: 0;
}
.copa-partida:has(.copa-partida__chip--live)::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  padding: 2px;
  background: conic-gradient(
    from 0deg,
    var(--copa-accent),
    var(--copa-gold-500),
    var(--copa-accent),
    #ff7a3a,
    var(--copa-accent)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: copaRingSpin 4.5s linear infinite;
  z-index: -1;
  pointer-events: none;
}
@keyframes copaRingSpin {
  to { transform: rotate(360deg); }
}

/* --- Stagger fade-in: opt-in via body.copa-anim-armed (setado pelo JS) ---
   Sem JS / com reduced-motion, cards aparecem normais. */
body.copa-anim-armed .copa-partida,
body.copa-anim-armed .copa-grupo-card,
body.copa-anim-armed .noticia-card {
  opacity: 0;
  transform: translateY(14px);
  transition-delay: calc(var(--copa-anim-delay, 0) * 40ms);
}
body.copa-anim-armed .copa-partida.is-in-view,
body.copa-anim-armed .copa-grupo-card.is-in-view,
body.copa-anim-armed .noticia-card.is-in-view {
  opacity: 1;
  transform: translateY(0);
}
/* Hover venceu o estado in-view (precedência: mais classes que .is-in-view) */
body.copa-anim-armed .copa-partida.is-in-view:hover,
body.copa-anim-armed .copa-grupo-card.is-in-view:hover,
body.copa-anim-armed .noticia-card.is-in-view:hover {
  transform: translateY(-4px);
}
@media (hover: hover) and (pointer: fine) {
  body.copa-anim-armed .copa-partida.is-in-view:hover {
    transform: translateY(-4px) rotateX(2deg) rotateY(-1deg);
  }
}

/* --- Reduced motion: corta animações decorativas --- */
@media (prefers-reduced-motion: reduce) {
  .copa-partida:has(.copa-partida__chip--live)::before { animation: none; }
  .noticia-card.is-destaque::after { animation: none; }
  body.copa-anim-armed .copa-partida,
  body.copa-anim-armed .copa-grupo-card,
  body.copa-anim-armed .noticia-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================================
   PREMIUM v1.1 — patch de VISIBILIDADE (pós-screenshot da home)
   Mudanças que aparecem SEM hover, em qualquer rota /copa.
   ============================================================================ */

/* --- Serif display nos H1/H2 que faltei na v1 (home / grupos / "Grupo X") --- */
.copa-hero h1,
.copa-grupo__letra,
[aria-label*="Grupos"] > h2,
[aria-label*="Grupo "] > h2 {
  font-family: var(--copa-font-display);
  font-weight: 800;
  letter-spacing: -0.015em;
  font-feature-settings: "ss01", "liga";
}

/* --- Hero "Escalações Prováveis" ganha peso editorial + underline dourado --- */
.copa-hero h1 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);
  margin: 10px 0 14px;
  position: relative;
  display: inline-block;
  padding: 0 6px 12px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.copa-hero h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--copa-gold-500) 30%,
    var(--copa-gold-300) 70%,
    transparent
  );
  border-radius: 2px;
}
.copa-hero h1 > span#copa-rodada-label {
  color: var(--copa-accent);
  font-style: italic;
  font-weight: 700;
}

/* --- Body com gradient radial sutil pra dar "matéria-prima" ao glass morphism
   e ao gold inset. Sem isso, branco-sobre-branco vira invisível. --- */
body {
  background-image:
    radial-gradient(ellipse 900px 420px at 10% -5%, rgba(217, 164, 65, 0.08), transparent 65%),
    radial-gradient(ellipse 700px 500px at 95% 8%, rgba(20, 34, 76, 0.05), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.10  0 0 0 0 0.18  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* --- Gold inset MAIS VISÍVEL no estado de repouso (não só no hover) --- */
.copa-grupo-card,
.copa-partida,
.copa-grupo-bloco,
.noticia-card {
  box-shadow:
    inset 0 0 0 1px rgba(217, 164, 65, 0.42),
    0 1px 0 rgba(217, 164, 65, 0.20),
    0 6px 16px rgba(20, 34, 76, 0.09);
}

/* --- Accent dourado vertical à esquerda dos grupo cards (peso editorial) --- */
.copa-grupo-card {
  position: relative;
  overflow: hidden;
  padding-left: 16px; /* espaço pra acento */
}
.copa-grupo-card::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--copa-gold-300), var(--copa-gold-700));
  opacity: 0.85;
}
.copa-grupo__letra {
  color: var(--copa-navy);
  font-size: 1.08rem;
}
.copa-grupo__head {
  border-bottom-color: rgba(217, 164, 65, 0.30);
  padding-bottom: 8px;
  margin-bottom: 10px;
}

/* --- "Grupos" h2 com inline-style: força a Fraunces (sem !important
   porque o inline só seta font-size/margin/color, não font-family) --- */
[aria-label*="Grupos"] > h2 {
  font-size: 1.2rem !important;
  margin: 22px 12px 10px !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
[aria-label*="Grupos"] > h2 i {
  color: var(--copa-gold-500);
}

/* --- Escudos navbar: gold tint pra glass virar visível + borda dourada nítida --- */
.copa-selecoes-nav {
  background:
    radial-gradient(ellipse at top left, rgba(217, 164, 65, 0.14), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(20, 34, 76, 0.06), transparent 60%),
    rgba(255, 255, 255, 0.78);
  border-color: rgba(217, 164, 65, 0.32);
  box-shadow:
    inset 0 0 0 1px rgba(217, 164, 65, 0.20),
    0 10px 28px rgba(20, 34, 76, 0.10);
}

/* --- Cobertura summary (chevron + ícone) levemente dourado pra coerência --- */
.copa-hero__desc {
  border-color: rgba(217, 164, 65, 0.28);
  box-shadow: inset 0 0 0 1px rgba(217, 164, 65, 0.18);
}
.copa-hero__desc > summary {
  color: var(--copa-navy);
}
.copa-hero__desc > summary i.bi-info-circle {
  color: var(--copa-gold-500);
}

/* --- "Brasileirão" no navbar mantém o verde (não tocar) — só forço espaço
   pra Fraunces não desalinhar o pill --- */
.copa-nav .btn-nav { font-family: var(--copa-font-body); }

/* ============================================================================
   CAMPINHOS DA COPA — port do render-jogos do Brasileirão pra contexto Copa
   ----------------------------------------------------------------------------
   - .copa-jogos    : grade de jogos da rodada (1 col mobile / 2 col desktop)
   - .copa-jogo     : card de UM jogo (header com placar + dois lineups)
   - .copa-lineup-card : um time (campinho + cabeçalho mini)
   - .copa-pitch    : o campo (background = /copa/assets/img/campo-copa.svg)
   - .copa-player   : figura do jogador, posicionada via left/top em %
   ============================================================================ */

.copa-jogos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 14px 12px 28px;
}
@media (min-width: 980px) {
  .copa-jogos { grid-template-columns: 1fr 1fr; gap: 18px; margin: 18px 16px 32px; }
}

.copa-jogo {
  background: var(--copa-surface);
  border: 1px solid var(--copa-border);
  border-radius: 16px;
  padding: 14px 12px 18px;
  box-shadow:
    inset 0 0 0 1.5px rgba(217, 164, 65, 0.32),
    0 8px 22px rgba(20, 34, 76, 0.10);
  position: relative;
  overflow: hidden;
}

/* Cabeçalho do jogo: time A — placar/X — time B, com data/local abaixo */
.copa-jogo__hdr {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 0 4px 12px;
  border-bottom: 1px dashed rgba(217, 164, 65, 0.28);
  margin-bottom: 12px;
}
.copa-jogo__time {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.copa-jogo__time--visit { justify-content: flex-end; }
.copa-jogo__time img { width: 32px; height: 32px; object-fit: contain; flex: none; }
.copa-jogo__nome {
  font-family: var(--copa-font-display);
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--copa-navy);
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.copa-jogo__x {
  font-weight: 800;
  color: var(--copa-muted);
  font-size: 0.92rem;
  padding: 0 4px;
}
.copa-jogo__meta {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.72rem;
  color: var(--copa-muted);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(20, 34, 76, 0.08);
}
.copa-jogo__meta strong {
  color: var(--copa-text);
  font-weight: 700;
}

/* Dois lineups lado a lado (sempre 2 colunas, mesmo no mobile) */
.copa-jogo__lineups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (min-width: 640px) {
  .copa-jogo__lineups { gap: 12px; }
}

.copa-lineup-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.copa-lineup-card__hdr {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.74rem;
  color: var(--copa-muted);
  padding: 0 2px;
  line-height: 1.2;
}
.copa-lineup-card__hdr img { width: 18px; height: 18px; object-fit: contain; flex: none; }
.copa-lineup-card__hdr .nm {
  font-weight: 700;
  color: var(--copa-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.copa-lineup-card__hdr .form {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--copa-gold-700);
  background: var(--copa-gold-50);
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.68rem;
  letter-spacing: 0.4px;
}

/* O CAMPO em si: aspect-ratio 631/892, background SVG da Copa, players absolutos */
.copa-pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 631 / 892;
  background: #143620 url('/copa/assets/img/campo-copa.svg?v=2') center / cover no-repeat;
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 0 0 1px rgba(217, 164, 65, 0.30),
    inset 0 -22px 40px rgba(0, 0, 0, 0.18);
}

/* Cada jogador: figura posicionada por left/top em % (transladada pro centro) */
.copa-player {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 28%;
  max-width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin: 0;
  z-index: 1;
}
.copa-player img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.25);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  display: block;
}
.copa-player figcaption {
  font-size: clamp(0.50rem, 1.6vw, 0.66rem);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 4px rgba(0, 0, 0, 0.65);
  text-align: center;
  line-height: 1.05;
  max-width: 110%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1px 3px;
}

/* Estados de jogador (dúvida, lesionado, suspenso, nulo) */
.copa-player.is-duvida img { border-color: #facc15; box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.4); }
.copa-player.is-lesionado img { border-color: #ef4444; filter: grayscale(0.4); }
.copa-player.is-suspenso img { border-color: #ef4444; filter: grayscale(0.6); }
.copa-player.is-nulo img { opacity: 0.5; filter: grayscale(1); }

/* Coach (técnico) — chip discreto no canto inferior esquerdo */
.copa-player.is-coach {
  width: 18%;
  max-width: 36px;
}
.copa-player.is-coach img {
  border-color: var(--copa-gold-500);
  box-shadow: 0 0 0 1.5px rgba(217, 164, 65, 0.4);
}

/* Fallback: lineup ainda não definida → escudo grande + texto */
.copa-pitch--empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.copa-pitch__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 10px;
}
.copa-pitch__empty img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  opacity: 0.85;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
.copa-pitch__empty span {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.74rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  max-width: 110px;
  line-height: 1.25;
}

/* Skeleton durante o load — 11 pílulas escuras nas posições padrão 4-3-3 */
.copa-pitch--skel .copa-player-sk {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 22%;
  max-width: 42px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  animation: copaPlayerSk 1.4s ease-in-out infinite;
}
@keyframes copaPlayerSk {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.88; }
}

/* Hover do card inteiro: leve lift dourado consistente com v1 */
.copa-jogo {
  transition:
    transform .25s var(--copa-spring),
    box-shadow .25s var(--copa-ease-out);
}
.copa-jogo:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 1.5px rgba(217, 164, 65, 0.55),
    0 14px 30px rgba(20, 34, 76, 0.14),
    var(--copa-glow-gold-soft);
}

/* Stagger inicial — pega o opt-in via body.copa-anim-armed já existente */
body.copa-anim-armed .copa-jogo {
  opacity: 0;
  transform: translateY(14px);
  transition-delay: calc(var(--copa-anim-delay, 0) * 50ms);
}
body.copa-anim-armed .copa-jogo.is-in-view {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  body.copa-anim-armed .copa-jogo { opacity: 1; transform: none; transition: none; }
  .copa-pitch--skel .copa-player-sk { animation: none; }
}

/* Heading da section "Jogos da Rodada" (acima dos campinhos) */
.copa-jogos-hdr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 12px 4px;
}
.copa-jogos-hdr h2 {
  margin: 0;
  font-family: var(--copa-font-display);
  font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.45rem);
  font-weight: 800;
  color: var(--copa-navy);
  letter-spacing: -0.015em;
  display: inline-flex; align-items: center; gap: 8px;
}
.copa-jogos-hdr h2 i { color: var(--copa-gold-500); font-size: 0.95em; }
.copa-jogos-hdr .copa-jogos-hdr__chip {
  background: var(--copa-gold-50);
  color: var(--copa-gold-700);
  border: 1px solid rgba(217, 164, 65, 0.35);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   CAMPINHOS v1.2 — corrige layout: 1 partida por linha sempre,
   2 campinhos lado a lado só >=768px (igual Brasileirão styles.v1.css).
   ============================================================================ */

/* Lista de jogos: sempre 1 coluna, centralizada com max-width pra não
   esticar demais em telas largas (mantém o tamanho do campinho razoável) */
.copa-jogos {
  grid-template-columns: 1fr;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 980px) {
  /* Sobrescreve o rule @media anterior que punha 2 colunas */
  .copa-jogos {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    gap: 18px;
  }
}

/* Dentro do jogo, os 2 lineup-cards: empilham no mobile, lado a lado >=768px */
.copa-jogo__lineups {
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px) {
  .copa-jogo__lineups {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}

/* Ajuste fino do header do jogo: nomes podem quebrar agora que o card é mais
   largo em desktop — garante alinhamento limpo */
.copa-jogo__hdr {
  padding: 0 8px 12px;
}
.copa-jogo__nome {
  font-size: 1.02rem;
}
@media (min-width: 768px) {
  .copa-jogo__nome { font-size: 1.1rem; }
}

/* ============================================================================
   CAMPINHOS v1.3 — aumenta max-width pra alinhar com .copa-container (1100px)
   ============================================================================ */
.copa-jogos {
  max-width: 1100px;
}
@media (min-width: 980px) {
  .copa-jogos { max-width: 1100px; gap: 22px; }
}
/* Players ficam maiores agora que o campinho é maior */
.copa-player { max-width: 78px; }
.copa-player.is-coach { max-width: 50px; }
.copa-player figcaption {
  font-size: clamp(0.55rem, 1vw, 0.78rem);
}

/* ============================================================================
   CAMPINHOS v1.4 — alinha navbar de escudos com a largura do header (1200px),
   elimina desalinhamento horizontal.
   ============================================================================ */
.copa-selecoes-nav {
  max-width: 1200px;
}
@media (max-width: 1100px) {
  .copa-selecoes-nav { max-width: calc(100% - 24px); }
}

/* ============================================================================
   CAMPINHOS v1.5 — chip "atualizado há N" no lineup-card header
   Substitui o chip de formação. Visual discreto: cinza neutro, ícone clock
   em dourado sutil, tooltip com timestamp completo (title="Escalação atualizada em...").
   ============================================================================ */
.copa-lineup-card__hdr .upd {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(20, 34, 76, 0.04);
  color: var(--copa-muted);
  border: 1px solid rgba(20, 34, 76, 0.08);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: help; /* indica que tem tooltip */
  transition: background .15s var(--copa-ease-out), color .15s var(--copa-ease-out);
}
.copa-lineup-card__hdr .upd i.bi-clock {
  font-size: 0.78em;
  color: var(--copa-gold-700);
  opacity: 0.9;
}
.copa-lineup-card__hdr .upd:hover {
  background: rgba(217, 164, 65, 0.10);
  color: var(--copa-text);
  border-color: rgba(217, 164, 65, 0.30);
}

/* ============================================================================
   CAMPINHOS v1.6 — linha "ou Nome" para jogadores em dúvida (.copa-player__alt)
   ============================================================================ */
.copa-player__alt {
  font-size: clamp(0.46rem, 0.85vw, 0.6rem);
  font-style: italic;
  font-weight: 600;
  color: #facc15;             /* amarelo do estado dúvida */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 4px rgba(0, 0, 0, 0.65);
  text-align: center;
  line-height: 1.05;
  margin-top: 1px;
  max-width: 110%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 3px;
}
/* "ou" em letras menores pra dar hierarquia ao nome do candidato */
.copa-player__alt::first-letter {
  font-style: normal;
  opacity: 0.75;
}

/* Técnico com escudo: imagem precisa de menos peso visual que jogador,
   mantém o aspecto circular mas com contraste mais suave */
.copa-player.is-coach img {
  background: rgba(255, 255, 255, 0.92);
  padding: 4px;
  object-fit: contain;        /* escudo nunca corta */
}

/* ============================================================================
   CAMPINHOS v1.7 — alt-cap no padrão Brasileirão: pílula branca compacta
   com texto escuro, sombra discreta. Aparece abaixo do nome principal pra
   indicar o jogador alternativo na dúvida.
   ============================================================================ */
.copa-player__alt {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  background: #ffffff;
  color: #111;
  font-size: clamp(0.46rem, 0.85vw, 0.6rem);
  font-weight: 600;
  font-style: normal;
  line-height: 1.15;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(2, 6, 23, 0.22);
  text-shadow: none;             /* limpa o text-shadow herdado do figcaption padrão */
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130%;
}

/* ============================================================================
   CAMPINHOS v1.8 — polish dos estados (provável verde, dúvida texto pequeno
   sem chip, técnico maior e visível)
   ----------------------------------------------------------------------------
   Sobrescreve regras anteriores de .copa-player__alt e .copa-player.is-coach.
   ============================================================================ */

/* --- ANEL VERDE: jogador com sit="provavel" (default, sem classe modifier)
   ganha borda verde + halo discreto. Cores semânticas:
     provável  → verde
     dúvida    → amarelo (já existia)
     lesionado → vermelho
     suspenso  → vermelho-escuro com grayscale
     nulo      → cinza fantasma
   --- */
.copa-player img {
  border: 2px solid rgba(34, 197, 94, 0.92);              /* verde provável */
  box-shadow:
    0 0 0 2px rgba(34, 197, 94, 0.22),                    /* halo verde sutil */
    0 2px 5px rgba(0, 0, 0, 0.40);
}
.copa-player.is-duvida img {
  border-color: #facc15;
  box-shadow:
    0 0 0 2px rgba(250, 204, 21, 0.34),
    0 2px 5px rgba(0, 0, 0, 0.40);
}
.copa-player.is-lesionado img {
  border-color: #ef4444;
  box-shadow:
    0 0 0 2px rgba(239, 68, 68, 0.32),
    0 2px 5px rgba(0, 0, 0, 0.40);
  filter: grayscale(0.35);
}
.copa-player.is-suspenso img {
  border-color: #ef4444;
  box-shadow:
    0 0 0 2px rgba(239, 68, 68, 0.32),
    0 2px 5px rgba(0, 0, 0, 0.40);
  filter: grayscale(0.55);
}
.copa-player.is-nulo img {
  border-color: rgba(255, 255, 255, 0.5);
  filter: grayscale(1);
  opacity: 0.5;
}

/* --- ALT-CAP refinado: sem chip de fundo, texto pequeno (~60% do nome principal),
   amarelo (mesmo tom da borda de dúvida), itálico, com sombra forte pra
   contraste no gramado. Aparece colado embaixo do nome principal. --- */
.copa-player__alt {
  display: block;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #facc15;
  font-size: clamp(0.36rem, 0.95vw, 0.46rem);     /* ~60% do figcaption (≈0.55-0.66rem) */
  font-weight: 600;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.6);
  max-width: 115%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0;
}

/* --- TÉCNICO: escudo da seleção com nome abaixo. Maior que antes pra leitura,
   mas ainda menor que jogador. Posicionado no canto inferior esquerdo. --- */
.copa-player.is-coach {
  width: 22%;
  max-width: 50px;
}
.copa-player.is-coach img {
  border: 2px solid var(--copa-gold-500);
  background: rgba(255, 255, 255, 0.95);
  padding: 3px;
  object-fit: contain;                              /* escudos não cortam */
  box-shadow:
    0 0 0 1.5px rgba(217, 164, 65, 0.40),
    0 2px 5px rgba(0, 0, 0, 0.40);
}
.copa-player.is-coach figcaption {
  font-size: clamp(0.5rem, 1.4vw, 0.62rem);
  font-weight: 700;
  margin-top: 2px;
}

/* ============================================================================
   CAMPINHOS v1.9 — refinos do polish (alt-cap cinza, coach verde, layout próximo)
   ============================================================================ */

/* Alt-cap: muda de amarelo pra branco-cinza (75%). Ainda em itálico, ainda
   pequeno, ainda com sombra. Indica "está em dúvida" pelo PESO visual (menor,
   mais apagado), não pela cor — que conflitava com a borda amarela do principal. */
.copa-player__alt {
  color: rgba(255, 255, 255, 0.75);
  font-style: italic;
}

/* Técnico: borda SEMPRE verde (provável, não há "técnico em dúvida"). Escudo
   colado no nome (gap mínimo) pra parecer um bloco único, não dois elementos
   distantes. Padding interno menor pra ganhar área visível do escudo. */
.copa-player.is-coach img {
  border: 2px solid rgba(34, 197, 94, 0.92);              /* verde provável */
  background: rgba(255, 255, 255, 0.96);
  padding: 2px;
  object-fit: contain;
  box-shadow:
    0 0 0 2px rgba(34, 197, 94, 0.22),
    0 2px 5px rgba(0, 0, 0, 0.40);
}
.copa-player.is-coach {
  /* Reduz o gap interno do flex (era 1px herdado de .copa-player) pra colar
     escudo e nome sem espaço sobrando */
  gap: 0;
}
.copa-player.is-coach figcaption {
  margin-top: 1px;                                         /* praticamente colado */
  font-size: clamp(0.5rem, 1.4vw, 0.62rem);
  font-weight: 700;
  line-height: 1.0;
}

/* ============================================================================
   CAMPINHOS v2.0 — alt-cap branco puro + coach com âncora na base
   ----------------------------------------------------------------------------
   Alt-cap: cor branca pura (sem rgba alpha que criava blur com text-shadow),
   fonte ainda menor (~50% do nome principal).
   Coach: troca top:96% + translate por bottom:6px + sem translate, garantindo
   ordem visual img→figcaption (sem inversão).
   ============================================================================ */

.copa-player__alt {
  color: #ffffff;
  font-size: clamp(0.32rem, 0.78vw, 0.42rem);
  font-weight: 500;
  opacity: 0.78;
  letter-spacing: 0.1px;
}

/* Coach: âncora na base esquerda do campo, sem transform. Ordem visual
   garantida: <img> renderiza em cima, <figcaption> embaixo. */
.copa-player.is-coach {
  position: absolute;
  left: 6px;
  bottom: 8px;
  top: auto;                   /* anula top:96% que estava no inline antes */
  transform: none;             /* anula translate(-50%, -50%) — não queremos centralizar */
  width: 18%;
  max-width: 48px;
  display: flex;
  flex-direction: column;      /* img em cima, figcaption embaixo */
  align-items: center;
  gap: 0;
}
.copa-player.is-coach img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 2px solid rgba(34, 197, 94, 0.92);
  background: rgba(255, 255, 255, 0.96);
  padding: 2px;
  object-fit: contain;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(34, 197, 94, 0.22),
    0 2px 5px rgba(0, 0, 0, 0.40);
  display: block;
}
.copa-player.is-coach figcaption {
  margin-top: 2px;
  font-size: clamp(0.5rem, 1.3vw, 0.6rem);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 4px rgba(0, 0, 0, 0.65);
  text-align: center;
  line-height: 1.0;
  white-space: nowrap;
  max-width: 130%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================================
   CAMPINHOS v2.1 — força a posição do coach contra caches velhos
   ----------------------------------------------------------------------------
   Usa !important + inset shorthand pra garantir que NENHUMA regra anterior
   (incluindo de cache do browser) consiga manter o coach com top:96% +
   transform: translate(-50%, -50%) que estava causando inversão visual.
   ============================================================================ */

.copa-player.is-coach {
  position: absolute !important;
  inset: auto auto 8px 6px !important;       /* top:auto right:auto bottom:8px left:6px */
  transform: none !important;
  width: 17% !important;
  max-width: 44px !important;
  display: flex !important;
  flex-direction: column !important;          /* img em cima, figcaption embaixo */
  align-items: center !important;
  gap: 1px !important;
  z-index: 3;                                  /* acima dos jogadores na proximidade */
}
.copa-player.is-coach > img {
  order: 0 !important;                         /* força ordem na pintura */
}
.copa-player.is-coach > figcaption {
  order: 1 !important;
  margin-top: 2px;
}

/* ============================================================================
   CAMPINHOS v2.2 — COACH simplificado: block layout com largura/altura fixas
   ----------------------------------------------------------------------------
   Abandona flex + aspect-ratio (que estava causando posicionamento estranho)
   por block normal: img acima por width/height explícito, figcaption embaixo
   no flow natural. !important em tudo pra vencer qualquer regra anterior.
   ============================================================================ */
.copa-player.is-coach {
  position: absolute !important;
  bottom: 6px !important;
  left: 6px !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;

  width: 56px !important;
  height: auto !important;
  max-width: 56px !important;

  display: block !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 3;
}
.copa-player.is-coach > img {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 auto !important;

  border: 2px solid rgba(34, 197, 94, 0.92) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  padding: 2px !important;
  object-fit: contain !important;
  border-radius: 50% !important;
  box-shadow:
    0 0 0 2px rgba(34, 197, 94, 0.22),
    0 2px 5px rgba(0, 0, 0, 0.40) !important;
  aspect-ratio: auto !important;             /* anula aspect-ratio:1/1 dos jogadores */
}
.copa-player.is-coach > figcaption {
  display: block !important;
  margin: 2px 0 0 !important;
  padding: 0 2px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 4px rgba(0, 0, 0, 0.65) !important;
  line-height: 1.0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* ============================================================================
   COACH v3 — classe ISOLADA (.copa-coach) sem herança do .copa-player.
   ----------------------------------------------------------------------------
   As 20 regras de .copa-player.is-coach que se acumularam ao longo dos patches
   ficam órfãs (ninguém usa mais essa classe). Aqui o coach é um <figure>
   simples, position:absolute, ancorado em bottom:6px left:6px do .copa-pitch.
   Sem flex, sem aspect-ratio, sem transform — só block layout direto.
   ============================================================================ */
.copa-coach {
  position: absolute;
  bottom: 6px;
  left: 6px;
  width: 56px;
  margin: 0;
  padding: 0;
  text-align: center;
  z-index: 3;
}
.copa-coach img {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(34, 197, 94, 0.92);  /* verde provável */
  background: rgba(255, 255, 255, 0.96);
  padding: 2px;
  object-fit: contain;
  box-shadow:
    0 0 0 2px rgba(34, 197, 94, 0.22),
    0 2px 5px rgba(0, 0, 0, 0.40);
}
.copa-coach figcaption {
  display: block;
  margin: 3px 0 0;
  padding: 0 2px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 4px rgba(0, 0, 0, 0.65);
  line-height: 1.0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ============================================================================
   COACH v3.1 — ajustes finos: subir do chão, mover pra direita, abrir o nome
   ----------------------------------------------------------------------------
   Sobrescreve apenas as 3 propriedades pedidas em .copa-coach. O resto da
   regra original (display, text-align, margin, etc) permanece.
   ============================================================================ */
.copa-coach {
  bottom: 18px;          /* era 6px — sobe 12px do chão */
  left: 14px;            /* era 6px — vai 8px pra direita */
  width: 80px;           /* era 56px — ganha espaço pra nome inteiro do técnico */
}
.copa-coach figcaption {
  max-width: 100%;       /* deixa o nome usar a largura toda do figure */
}

/* ============================================================================
   v3.2 — alt-cap totalmente itálico, anchor invisível, back-to-top elegante
   ============================================================================ */

/* Fix: a regra antiga ::first-letter forçava font-style:normal (era pro "ou"
   prefix removido na v1.7). Agora o nome inteiro fica em itálico — primeira
   letra inclusa. */
.copa-player__alt::first-letter {
  font-style: italic;
  opacity: 1;
}

/* Anchor invisível dentro do .copa-jogo. Não ocupa espaço, serve só de alvo
   pra scrollIntoView quando o usuário clica num escudo da navbar. O offset
   negativo no scroll-margin-top compensa o header sticky da página, evitando
   que o card seja coberto. */
.copa-team-anchor {
  display: block;
  position: relative;
  top: -80px;
  visibility: hidden;
  height: 0;
  pointer-events: none;
}
/* Highlight temporário quando o card é "alvo" do scroll — dura ~1.6s */
.copa-jogo.is-target {
  animation: copaTargetPulse 1.6s var(--copa-ease-out) 1;
}
@keyframes copaTargetPulse {
  0%   { box-shadow: var(--copa-inset-gold), 0 8px 22px rgba(20, 34, 76, 0.10), 0 0 0 0 rgba(217, 164, 65, 0.55); }
  40%  { box-shadow: var(--copa-inset-gold-strong), 0 14px 30px rgba(20, 34, 76, 0.14), 0 0 0 8px rgba(217, 164, 65, 0.20); }
  100% { box-shadow: var(--copa-inset-gold), 0 8px 22px rgba(20, 34, 76, 0.10), 0 0 0 0 rgba(217, 164, 65, 0); }
}

/* Botão flutuante "voltar ao topo": discreto, dourado, hover lift. Aparece só
   quando o usuário rolou > 400px (controlado pelo JS via .is-visible). */
.copa-back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(217, 164, 65, 0.55);
  background: rgba(20, 34, 76, 0.85);
  color: var(--copa-gold-300);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .25s var(--copa-ease-out), transform .25s var(--copa-spring), box-shadow .2s var(--copa-ease-out), background .2s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(20, 34, 76, 0.28), inset 0 0 0 1px rgba(217, 164, 65, 0.10);
}
.copa-back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.copa-back-to-top:hover {
  background: rgba(20, 34, 76, 0.95);
  color: var(--copa-gold-100);
  box-shadow: 0 6px 18px rgba(20, 34, 76, 0.38), 0 0 0 3px rgba(217, 164, 65, 0.18);
  transform: translateY(-2px);
}
.copa-back-to-top:active {
  transform: translateY(0) scale(0.96);
}
.copa-back-to-top i { font-size: 1.1rem; line-height: 1; }
@media (max-width: 720px) {
  .copa-back-to-top { right: 14px; bottom: 14px; width: 40px; height: 40px; }
}
/* Cursor pointer pros escudos da navbar (indica que é interativo) */
.copa-selecao-btn { cursor: pointer; }

/* ============================================================================
   COPA-JOGO-TOP — botão "Voltar ao topo" inline no fim de cada card de jogo.
   Discreto, alinhado à direita, dourado sutil. Substitui o back-to-top fixed
   que estava brigando com algum elemento invisível no canto da tela.
   ============================================================================ */
.copa-jogo-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 -2px auto;       /* margem auto à esquerda → empurra pra direita */
  padding: 5px 12px;
  background: transparent;
  border: 1px solid rgba(217, 164, 65, 0.40);
  border-radius: 999px;
  color: var(--copa-gold-700);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  float: right;                   /* posiciona à direita dentro do .copa-jogo */
  clear: both;
  transition:
    background .18s var(--copa-ease-out),
    color .18s var(--copa-ease-out),
    border-color .18s var(--copa-ease-out),
    transform .15s var(--copa-spring);
}
.copa-jogo-top i {
  font-size: 0.78rem;
}
.copa-jogo-top:hover {
  background: var(--copa-gold-50);
  color: var(--copa-gold-900);
  border-color: var(--copa-gold-500);
  transform: translateY(-1px);
}
.copa-jogo-top:active {
  transform: translateY(0) scale(0.97);
}
/* Garante quebra após o botão pra próximo card vir abaixo */
.copa-jogo::after {
  content: "";
  display: block;
  clear: both;
}

/* ============================================================================
   COPA-JOGO-TOP v2 — versão MAIS DISCRETA (override). Padding menor, fonte
   menor, borda super sutil, cor cinza-dourado quase invisível em repouso.
   Só "ativa" no hover. Anti-poluição visual no fim de cada card.
   ============================================================================ */
.copa-jogo-top {
  padding: 3px 9px;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1px;
  color: rgba(217, 164, 65, 0.65);
  border-color: rgba(217, 164, 65, 0.18);
  opacity: 0.7;
  margin-top: 10px;
}
.copa-jogo-top i {
  font-size: 0.7rem;
  opacity: 0.85;
}
.copa-jogo-top:hover {
  opacity: 1;
  background: transparent;
  color: var(--copa-gold-700);
  border-color: rgba(217, 164, 65, 0.40);
}

/* ============================================================================
   Pgina da selecao: oculta a bolinha de status do Cartola nos cards de
   reservas. Status vem da API do Cartola e nao agrega valor aqui — os
   "provaveis" sao mostrados separadamente na pagina /copa principal.
   ============================================================================ */
body[data-copa-page="selecoes"] .copa-elenco__card .st-dot { display: none !important; }


/* --- FALLBACK ESCUDO (jogador sem foto_url, ex: seleções com mercado Cartola
   ainda não publicado, tipo RD Congo). Usa o escudo da seleção como chip,
   com object-fit contain pra não cortar a bandeira e fundo translúcido pra
   diferenciar visualmente do chip de foto-de-jogador. Mantém o anel verde
   semântico (provável) por herança. --- */
.copa-player.is-fallback-escudo img {
  object-fit: contain;
  background: rgba(11, 26, 58, 0.42);
  padding: 4px;
  /* Borda mais discreta — escudo já é bem identificável */
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 0 0 2px rgba(34, 197, 94, 0.22),
    0 2px 5px rgba(0, 0, 0, 0.40);
}
/* Mantém cores semânticas mesmo com fallback */
.copa-player.is-fallback-escudo.is-duvida img {
  border-color: #facc15;
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.30), 0 2px 5px rgba(0,0,0,.4);
}
.copa-player.is-fallback-escudo.is-lesionado img,
.copa-player.is-fallback-escudo.is-suspenso img {
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.28), 0 2px 5px rgba(0,0,0,.4);
}


/* ============================================================================
   COBERTURA — card de descrição/SEO do hero (premium22)
   Substitui o estilo "parede de texto" por hierarquia visual: lead, bullets
   com ícones, chips de países, footer com data/local.
   ============================================================================ */
.copa-hero__desc {
  background:
    linear-gradient(180deg, rgba(255,250,239,0.55) 0%, rgba(255,255,255,0.95) 60%),
    var(--copa-surface);
  border: 1px solid rgba(217, 164, 65, 0.32);
  border-radius: 14px;
  margin: 14px 16px 0;
  overflow: hidden;
  font-size: 0.92rem;
  line-height: 1.5;
  box-shadow:
    inset 0 0 0 1px rgba(217, 164, 65, 0.18),
    0 2px 10px rgba(20, 34, 76, 0.04);
  transition: box-shadow .2s ease;
}
.copa-hero__desc[open] {
  box-shadow:
    inset 0 0 0 1px rgba(217, 164, 65, 0.28),
    0 6px 18px rgba(20, 34, 76, 0.07);
}
.copa-hero__desc > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 44px 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--copa-navy);
  user-select: none;
  position: relative;
  transition: background .15s ease;
}
.copa-hero__desc > summary::-webkit-details-marker { display: none; }
.copa-hero__desc > summary::after {
  content: '\203A';                    /* › */
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transition: transform .25s var(--copa-ease, cubic-bezier(0.4, 0, 0.2, 1));
  color: var(--copa-gold-500);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}
.copa-hero__desc[open] > summary::after {
  transform: translateY(-50%) rotate(-90deg);
}
.copa-hero__desc > summary i.bi-info-circle {
  color: var(--copa-gold-500);
  font-size: 1.05rem;
}
.copa-hero__desc > summary:hover {
  background: linear-gradient(90deg, rgba(217,164,65,0.10) 0%, rgba(217,164,65,0.02) 100%);
}

/* Body do card --- separador suave entre summary e conteúdo */
.copa-hero__desc-body {
  padding: 4px 16px 16px;
  border-top: 1px dashed rgba(217, 164, 65, 0.30);
  margin-top: -2px;
}

/* Lead paragraph — destaque inicial */
.copa-hero__desc-lead {
  margin: 14px 0 14px;
  font-size: 0.96rem;
  color: var(--copa-text);
  line-height: 1.55;
}
.copa-hero__desc-lead strong {
  color: var(--copa-navy);
  font-weight: 700;
}

/* Bullets com ícones — substituem o paragrafão denso */
.copa-hero__desc-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 720px) {
  .copa-hero__desc-bullets { grid-template-columns: 1fr 1fr; gap: 8px 22px; }
}
.copa-hero__desc-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.88rem;
  color: var(--copa-text);
  line-height: 1.4;
}
.copa-hero__desc-bullets li i {
  color: var(--copa-gold-500);
  font-size: 0.95rem;
  flex: none;
  margin-top: 2px;
  width: 18px;
  text-align: center;
}
.copa-hero__desc-bullets li strong {
  color: var(--copa-navy);
  font-weight: 700;
}

/* Subtítulo "Cobertura especial" */
.copa-hero__desc-subtitle {
  margin: 4px 0 9px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--copa-muted);
  display: flex;
  align-items: center;
  gap: 10px;
}
.copa-hero__desc-subtitle::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(217,164,65,0.32), transparent);
}

/* Chips de países — pill cards limpos */
.copa-hero__desc-chips {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.copa-hero__desc-chips li {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--copa-navy);
  background: rgba(217, 164, 65, 0.10);
  border: 1px solid rgba(217, 164, 65, 0.28);
  border-radius: 999px;
  line-height: 1.3;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}
.copa-hero__desc-chips li:hover {
  background: rgba(217, 164, 65, 0.18);
  transform: translateY(-1px);
}
.copa-hero__desc-chips li.copa-hero__desc-chips-more {
  background: transparent;
  border-style: dashed;
  color: var(--copa-muted);
  font-weight: 500;
}

/* Footer com data + local */
.copa-hero__desc-footer {
  margin: 14px 0 0;
  padding: 10px 14px;
  background: rgba(11, 26, 58, 0.04);
  border-left: 3px solid var(--copa-gold-500);
  border-radius: 0 8px 8px 0;
  font-size: 0.82rem;
  color: var(--copa-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.copa-hero__desc-footer i {
  color: var(--copa-gold-500);
  font-size: 0.95rem;
}
.copa-hero__desc-footer strong {
  color: var(--copa-navy);
  font-weight: 700;
}

/* Mobile: ajusta padding pra ganhar leitura */
@media (max-width: 480px) {
  .copa-hero__desc { margin: 12px 10px 0; }
  .copa-hero__desc-body { padding: 4px 12px 14px; }
  .copa-hero__desc-lead { font-size: 0.92rem; }
  .copa-hero__desc-chips li { font-size: 0.74rem; padding: 3px 9px; }
}


/* --- Overrides de especificidade: as regras antigas .copa-hero__desc p
   (0,1,1) ganhavam das classes .copa-hero__desc-lead etc. (0,1,0). Usamos
   o seletor combinado pra subir a especificidade pra (0,2,0). --- */
.copa-hero__desc .copa-hero__desc-lead {
  padding: 0;
  margin: 14px 0 14px;
}
.copa-hero__desc .copa-hero__desc-subtitle {
  padding: 0;
  margin: 4px 0 9px;
}
.copa-hero__desc .copa-hero__desc-footer {
  padding: 10px 14px;
  margin: 14px 0 0;
}


/* ============================================================================
   COBERTURA v2 — versão editorial limpa (premium23)
   Substitui os bullets/chips/subtitle anteriores. Hierarquia mais calma:
   lead -> stat row visual -> países inline -> footer com data/local.
   ============================================================================ */

/* Esconde explicitamente os elementos antigos caso fiquem no DOM em cache */
.copa-hero__desc-bullets,
.copa-hero__desc-subtitle,
.copa-hero__desc-chips,
.copa-hero__desc-footer { display: none !important; }

/* --- Lead (mais respirado) --- */
.copa-hero__desc .copa-hero__desc-lead {
  padding: 0;
  margin: 16px 0 18px;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--copa-text);
  text-align: left;
  max-width: 60ch;
}
.copa-hero__desc .copa-hero__desc-lead strong {
  color: var(--copa-navy);
  font-weight: 700;
}

/* --- Stat row (focal point visual) --- */
.copa-hero__desc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0 0 20px;
  padding: 14px 0;
  border-top: 1px solid rgba(217, 164, 65, 0.22);
  border-bottom: 1px solid rgba(217, 164, 65, 0.22);
}
.copa-hero__desc-stats > div {
  text-align: center;
  position: relative;
}
.copa-hero__desc-stats > div + div::before {
  content: '';
  position: absolute;
  left: 0; top: 22%; bottom: 22%;
  width: 1px;
  background: rgba(217, 164, 65, 0.20);
}
.copa-hero__desc-stats dt {
  font-family: var(--copa-font-display);
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--copa-navy);
  line-height: 1;
  letter-spacing: -0.02em;
}
.copa-hero__desc-stats dd {
  margin: 4px 0 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--copa-muted);
  font-weight: 600;
}

/* --- Países inline (sem chips ruidosos) --- */
.copa-hero__desc .copa-hero__desc-paises {
  padding: 0;
  margin: 0 0 16px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--copa-text);
}
.copa-hero__desc-paises .lbl {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--copa-gold-700);
  margin-right: 6px;
}

/* --- Footer (linha discreta com data/local) --- */
.copa-hero__desc .copa-hero__desc-foot {
  padding: 10px 0 0;
  margin: 0;
  border-top: 1px dashed rgba(217, 164, 65, 0.30);
  font-size: 0.84rem;
  color: var(--copa-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.copa-hero__desc-foot i {
  color: var(--copa-gold-500);
  font-size: 0.95rem;
}
.copa-hero__desc-foot strong {
  color: var(--copa-navy);
  font-weight: 700;
}

/* Mobile: stats menores, padding ajustado */
@media (max-width: 480px) {
  .copa-hero__desc-stats { padding: 12px 0; }
  .copa-hero__desc-stats dt { font-size: 1.5rem; }
  .copa-hero__desc-stats dd { font-size: 0.66rem; }
  .copa-hero__desc .copa-hero__desc-lead { font-size: 0.92rem; }
  .copa-hero__desc .copa-hero__desc-paises { font-size: 0.83rem; }
}


/* --- Cobertura v2.1: alinhamento centralizado consistente
   (lead estava à esquerda enquanto paises/footer herdavam center do .copa-hero) --- */
.copa-hero__desc .copa-hero__desc-lead {
  text-align: center;
  margin: 16px auto 18px;  /* auto pra max-width:60ch centralizar */
}
.copa-hero__desc .copa-hero__desc-paises {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto 16px;
}
.copa-hero__desc .copa-hero__desc-foot {
  justify-content: center;       /* flex container — centraliza ícone+texto */
  text-align: center;
}


/* --- /copa/partidas: cards clicáveis (premium25)
   article.copa-partida wrapeado em <a class="copa-partida-link"> →
   remove sublinhado/cor de link e adiciona hover discreto pra
   indicar clickability. --- */
.copa-partida-link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 14px;
}
.copa-partida-link:hover .copa-partida,
.copa-partida-link:focus-visible .copa-partida {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1.5px rgba(217, 164, 65, 0.45),
    0 12px 28px rgba(20, 34, 76, 0.14);
  border-color: rgba(217, 164, 65, 0.55);
}
.copa-partida-link:focus-visible {
  outline: 2px solid var(--copa-gold-500);
  outline-offset: 3px;
}
/* Transição suave no hover */
.copa-partida {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}


/* --- Cobertura v2.2: card vira "fine print" (premium26)
   Anteriormente era card prominent com borda/sombra/gradient.
   Como só existe por SEO, agora vira link discreto centralizado.
   Conteúdo expansível mantém o mesmo padding/typografia. --- */
.copa-hero__desc,
.copa-hero__desc[open] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 6px auto 0 !important;
  max-width: 720px;
  border-radius: 0 !important;
}
.copa-hero__desc > summary {
  padding: 4px 22px 4px 8px !important;
  font-size: 0.74rem !important;
  font-weight: 500 !important;
  color: var(--copa-muted) !important;
  background: transparent !important;
  border-radius: 6px;
  width: max-content;
  margin: 0 auto;
  display: flex !important;
  gap: 6px;
  opacity: 0.75;
  transition: opacity .15s ease, color .15s ease;
}
.copa-hero__desc > summary:hover {
  background: transparent !important;
  opacity: 1;
  color: var(--copa-gold-700) !important;
}
.copa-hero__desc > summary::after {
  right: 4px !important;
  font-size: 0.85rem !important;
  color: inherit !important;
  opacity: 0.6;
}
.copa-hero__desc > summary i.bi-info-circle {
  color: inherit !important;
  opacity: 0.6;
  font-size: 0.85rem !important;
}

/* Quando ABERTO, body ganha um card sutil pra dar contexto (já que summary não tem mais) */
.copa-hero__desc[open] .copa-hero__desc-body {
  background: rgba(255, 250, 239, 0.50);
  border: 1px solid rgba(217, 164, 65, 0.22);
  border-radius: 12px;
  padding: 14px 18px 16px !important;
  margin-top: 4px;
  border-top: 1px solid rgba(217, 164, 65, 0.22) !important;
}


/* ============================================================================
   NAVBAR PREMIUM v2 (premium27)
   Substitui o visual "pílula cinza com gradient laranja" por algo que
   herda o vocabulário dos cards do design system (surface bg, inset gold,
   tipografia editorial), mantendo a identidade orange-do-PDC pro active
   mas refinada — gradient mais suave, inner highlight, shadow gold tinted.
   ============================================================================ */

/* Container — mesmo "card" dos demais elementos premium */
.copa-nav {
  max-width: 720px;            /* mais enxuto que 940, dá foco */
  margin: 16px auto 22px;
  padding: 6px;
  background:
    linear-gradient(180deg, rgba(255,250,239,0.92) 0%, rgba(255,255,255,0.95) 100%);
  border: 1px solid rgba(217, 164, 65, 0.32);
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px rgba(217, 164, 65, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 4px 14px rgba(20, 34, 76, 0.06);
  backdrop-filter: saturate(1.1) blur(4px);
  -webkit-backdrop-filter: saturate(1.1) blur(4px);
}

/* Itens inativos — navy muted, letter-spacing premium */
.copa-nav .btn-nav {
  padding: 9px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: rgba(20, 34, 76, 0.62);
  border-radius: 999px;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease;
}
.copa-nav .btn-nav i {
  font-size: 0.92rem;
  opacity: 0.7;
}

/* Hover: gold tint cohesive com o resto */
.copa-nav .btn-nav:hover {
  color: var(--copa-navy);
  background: rgba(217, 164, 65, 0.10);
  transform: translateY(-1px);
}
.copa-nav .btn-nav:hover i { opacity: 1; }

/* ATIVO — mantém orange (identidade PDC) mas refinado:
   gradient mais suave, top highlight inner pra 3D, shadow accent gold-orange */
.copa-nav .btn-nav.is-active,
.copa-nav .btn-nav[aria-current='page'] {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.20), transparent 35%),
    linear-gradient(135deg, var(--copa-accent) 0%, #ff8a3d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 4px 14px rgba(251, 89, 4, 0.30),
    0 0 0 1px rgba(251, 89, 4, 0.40);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}
.copa-nav .btn-nav.is-active:hover,
.copa-nav .btn-nav[aria-current='page']:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 35%),
    linear-gradient(135deg, var(--copa-accent) 0%, #ff9550 100%);
  transform: translateY(-1px);
}
.copa-nav .btn-nav.is-active i,
.copa-nav .btn-nav[aria-current='page'] i { opacity: 1; }

/* Brasileirão — verde refinado, mesmo tratamento de inset highlight */
.copa-nav .btn-nav.btn-brasileirao {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 35%),
    linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 4px 14px rgba(21, 128, 61, 0.26),
    0 0 0 1px rgba(21, 128, 61, 0.40);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}
.copa-nav .btn-nav.btn-brasileirao:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 35%),
    linear-gradient(135deg, #16a34a 0%, #1aa452 100%);
  transform: translateY(-1px);
}

/* Mobile */
@media (max-width: 720px) {
  .copa-nav {
    max-width: 100%;
    padding: 5px;
    margin: 12px auto 16px;
  }
  .copa-nav .btn-nav {
    padding: 8px 12px;
    font-size: 0.78rem;
    letter-spacing: 0;
  }
}
@media (max-width: 420px) {
  .copa-nav .btn-nav { padding: 8px 10px; font-size: 0.72rem; gap: 4px; }
  .copa-nav .btn-nav i { font-size: 0.85rem; }
}


/* ============================================================================
   PROMO PLANO DE SÓCIOS @cartodados (premium28)
   Card de afiliado injetado a cada 2 partidas. Visual alinhado aos cards
   .copa-jogo / .copa-partida — mesma surface, borda gold, shadow soft.
   CTA forte (bg accent) mas sem ser apelativo (sem cores berrantes, sem
   "ÚLTIMA CHANCE", sem badges piscando).
   ============================================================================ */
.copa-promo-socios {
  display: block;
  margin: 4px 12px 0;
  padding: 16px 18px 18px;
  background:
    linear-gradient(180deg, rgba(255,250,239,0.72) 0%, var(--copa-surface) 100%);
  border: 1px solid rgba(217, 164, 65, 0.35);
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 1px rgba(217, 164, 65, 0.20),
    0 6px 18px rgba(20, 34, 76, 0.08);
  color: var(--copa-text);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.copa-promo-socios::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--copa-gold-300), var(--copa-gold-700));
  opacity: 0.85;
}
.copa-promo-socios:hover,
.copa-promo-socios:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(217, 164, 65, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(217, 164, 65, 0.30),
    0 12px 28px rgba(20, 34, 76, 0.12);
}

/* Label do topo: PLANO DE SÓCIOS · @cartodados */
.copa-promo-socios__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--copa-gold-700);
  margin-bottom: 12px;
}
.copa-promo-socios__label i {
  font-size: 0.9rem;
  opacity: 0.85;
}

/* Main row: texto à esquerda, CTA à direita (desktop). Empilha no mobile. */
.copa-promo-socios__main {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px 24px;
  align-items: center;
}
@media (max-width: 640px) {
  .copa-promo-socios__main {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.copa-promo-socios__texto {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.copa-promo-socios__titulo {
  font-family: var(--copa-font-display, var(--copa-font-body));
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.35rem);
  font-weight: 700;
  color: var(--copa-navy);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.copa-promo-socios__sub {
  font-size: 0.86rem;
  color: var(--copa-muted);
  line-height: 1.5;
  max-width: 60ch;
}

/* CTA — forte mas elegante: gradient navy-accent suave, peso confiante */
.copa-promo-socios__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.20), transparent 35%),
    linear-gradient(135deg, var(--copa-accent) 0%, #ff8a3d 100%);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 4px 12px rgba(251, 89, 4, 0.28);
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
.copa-promo-socios__cta i {
  font-size: 1rem;
  transition: transform .2s ease;
}
.copa-promo-socios:hover .copa-promo-socios__cta {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 6px 16px rgba(251, 89, 4, 0.36);
}
.copa-promo-socios:hover .copa-promo-socios__cta i {
  transform: translateX(3px);
}

@media (max-width: 480px) {
  .copa-promo-socios { margin: 4px 10px 0; padding: 14px 16px 16px; }
  .copa-promo-socios__titulo { font-size: 1rem; }
  .copa-promo-socios__sub { font-size: 0.82rem; }
  .copa-promo-socios__cta { padding: 10px 16px; font-size: 0.88rem; width: 100%; justify-content: center; }
}


/* --- Card promo sócios COMPACTO (premium29) — sobrepõe v.28
   User pediu menor altura, sem perder presença. --- */
.copa-promo-socios {
  padding: 12px 16px 14px !important;
  margin: 2px 12px 0 !important;
  border-radius: 14px !important;
}
.copa-promo-socios::before {
  top: 10px !important;
  bottom: 10px !important;
}
.copa-promo-socios__label {
  font-size: 0.64rem !important;
  margin-bottom: 8px !important;
  letter-spacing: 0.9px !important;
}
.copa-promo-socios__label i { font-size: 0.82rem !important; }
.copa-promo-socios__main {
  gap: 10px 18px !important;
  align-items: center !important;
}
.copa-promo-socios__texto { gap: 3px !important; }
.copa-promo-socios__titulo {
  font-size: clamp(0.98rem, 0.9rem + 0.35vw, 1.12rem) !important;
  line-height: 1.2 !important;
}
.copa-promo-socios__sub {
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
  max-width: 56ch !important;
}
.copa-promo-socios__cta {
  padding: 8px 16px !important;
  font-size: 0.84rem !important;
}
.copa-promo-socios__cta i { font-size: 0.9rem !important; }
@media (max-width: 480px) {
  .copa-promo-socios { padding: 10px 14px 12px !important; margin: 2px 10px 0 !important; }
  .copa-promo-socios__titulo { font-size: 0.94rem !important; }
  .copa-promo-socios__sub { font-size: 0.76rem !important; }
}


/* --- Promo sub: text-wrap pretty pra evitar última linha com órfão ---
   "direto do @cartodados" não deve ficar sozinho numa linha. --- */
.copa-promo-socios__sub {
  text-wrap: pretty;
  text-wrap-style: pretty;
}


/* --- Promo Sócios v3 (premium31) — design de conversão
   CTA mais dominante, primeira pessoa, trust signal, anti-órfão real --- */

/* Subtitle: balance distribui melhor as linhas (mais agressivo que pretty) */
.copa-promo-socios__sub {
  text-wrap: balance !important;
  text-wrap-style: balance !important;
  max-width: 48ch !important;
}

/* Wrap do CTA com micro-texto de trust abaixo */
.copa-promo-socios__cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

/* CTA dominante — maior, mais "tátil" */
.copa-promo-socios__cta {
  padding: 11px 22px !important;
  font-size: 0.94rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), transparent 35%),
    linear-gradient(135deg, var(--copa-accent) 0%, #ff7a26 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 6px 16px rgba(251, 89, 4, 0.36),
    0 0 0 1px rgba(251, 89, 4, 0.50) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
  transform: translateZ(0);
  animation: copaSociosCtaPulse 2.6s ease-in-out infinite;
}
.copa-promo-socios__cta i {
  font-size: 1.02rem !important;
}

/* Pulse SUBTIL — não pisca, só respira; pausa no hover */
@keyframes copaSociosCtaPulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 -1px 0 rgba(0, 0, 0, 0.12),
      0 6px 16px rgba(251, 89, 4, 0.36),
      0 0 0 1px rgba(251, 89, 4, 0.50);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.40),
      inset 0 -1px 0 rgba(0, 0, 0, 0.12),
      0 8px 22px rgba(251, 89, 4, 0.50),
      0 0 0 1px rgba(251, 89, 4, 0.55),
      0 0 0 6px rgba(251, 89, 4, 0.08);
  }
}
.copa-promo-socios:hover .copa-promo-socios__cta {
  animation: none;
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .copa-promo-socios__cta { animation: none; }
}

/* Trust signal "Acesso imediato" — micro-texto abaixo do CTA */
.copa-promo-socios__cta-sub {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--copa-gold-700);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0.85;
}
.copa-promo-socios__cta-sub i {
  font-size: 0.78rem;
  color: var(--copa-accent);
}

/* Titulo mais forte */
.copa-promo-socios__titulo {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.22rem) !important;
  font-weight: 800 !important;
  text-wrap: balance;
}

@media (max-width: 640px) {
  .copa-promo-socios__cta-wrap {
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    align-items: center;
  }
  .copa-promo-socios__cta { width: auto !important; }
  .copa-promo-socios__cta-sub { white-space: nowrap; }
}


/* ============================================================================
   PROMO SÓCIOS — MOBILE-OPTIMIZED v4 (premium32)
   Bug crítico: "Acesso imediato" estava clipping na borda direita do CTA
   horizontal. Solução: NO mobile (≤640px), o CTA wrap vira vertical-stacked
   com CTA full-width + trust signal abaixo. Padding reduzido pra dar respiro.
   ============================================================================ */

/* Sobrescreve a regra @media (max-width:640px) anterior que punha tudo em row */
@media (max-width: 640px) {
  .copa-promo-socios {
    padding: 14px 14px 16px !important;
    margin: 4px 10px 0 !important;
  }
  .copa-promo-socios__label {
    font-size: 0.62rem !important;
    margin-bottom: 10px !important;
    letter-spacing: 0.7px !important;
  }
  .copa-promo-socios__main {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .copa-promo-socios__texto { gap: 4px !important; }
  .copa-promo-socios__titulo {
    font-size: 1.08rem !important;
    line-height: 1.22 !important;
    text-wrap: balance;
  }
  .copa-promo-socios__sub {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    max-width: none !important;
    text-wrap: balance;
  }
  /* CTA wrap: stack vertical, NÃO row — pra trust ficar abaixo do botão */
  .copa-promo-socios__cta-wrap {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-top: 4px;
  }
  /* CTA full-width, touch-friendly (≥44px altura) */
  .copa-promo-socios__cta {
    width: 100% !important;
    justify-content: center !important;
    padding: 13px 18px !important;
    font-size: 0.96rem !important;
    border-radius: 12px !important;
    min-height: 46px;
  }
  .copa-promo-socios__cta i { font-size: 1.05rem !important; }
  /* Trust signal centralizado abaixo */
  .copa-promo-socios__cta-sub {
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 0.66rem !important;
    white-space: normal !important;
  }
}

/* Mobile small (≤380px iPhone SE etc) */
@media (max-width: 380px) {
  .copa-promo-socios { padding: 12px 12px 14px !important; margin: 4px 8px 0 !important; }
  .copa-promo-socios__titulo { font-size: 1rem !important; }
  .copa-promo-socios__sub { font-size: 0.78rem !important; }
  .copa-promo-socios__cta { padding: 12px 14px !important; font-size: 0.92rem !important; }
}


/* ============================================================================
   MOBILE: chips de jogador e técnico (premium33)
   No mobile os chips estavam ocupando 70px+ em telas de 380px → cabia só ~5
   jogadores por linha em vez de 11. Reduz pra escala apropriada de smartphone.
   ============================================================================ */
@media (max-width: 640px) {
  .copa-player {
    max-width: 44px !important;
    width: 22% !important;
  }
  .copa-player img {
    border-width: 1.25px;
  }
  .copa-player figcaption {
    font-size: clamp(0.46rem, 1.8vw, 0.58rem) !important;
  }
  .copa-player__alt {
    font-size: 0.48rem !important;
  }
  /* Coach (técnico) — também menor */
  .copa-coach {
    width: 60px !important;
    bottom: 12px !important;
    left: 8px !important;
  }
  .copa-coach img {
    width: 32px !important;
    height: 32px !important;
    border-width: 1.5px;
    padding: 1.5px !important;
  }
  .copa-coach figcaption {
    font-size: 8.5px !important;
  }
}

/* Mobile small (≤380px iPhone SE etc) — ainda mais compacto */
@media (max-width: 380px) {
  .copa-player { max-width: 38px !important; width: 20% !important; }
  .copa-player figcaption { font-size: 0.48rem !important; }
  .copa-coach { width: 52px !important; }
  .copa-coach img { width: 28px !important; height: 28px !important; }
  .copa-coach figcaption { font-size: 8px !important; }
}


/* --- MOBILE chips +15% (premium34) ---
   User pediu mais 15% nos tamanhos. Override aplicado em cima do premium33. --- */
@media (max-width: 640px) {
  .copa-player {
    max-width: 51px !important;   /* 44 +15% */
    width: 25% !important;        /* 22 +15% */
  }
  .copa-player figcaption {
    font-size: clamp(0.52rem, 2.1vw, 0.66rem) !important;
  }
  .copa-coach {
    width: 69px !important;       /* 60 +15% */
  }
  .copa-coach img {
    width: 37px !important;       /* 32 +15% */
    height: 37px !important;
  }
  .copa-coach figcaption {
    font-size: 10px !important;   /* 8.5 +15% */
  }
}
@media (max-width: 380px) {
  .copa-player {
    max-width: 44px !important;   /* 38 +15% */
    width: 23% !important;        /* 20 +15% */
  }
  .copa-player figcaption { font-size: 0.55rem !important; }
  .copa-coach { width: 60px !important; }   /* 52 +15% */
  .copa-coach img { width: 32px !important; height: 32px !important; }   /* 28 +15% */
  .copa-coach figcaption { font-size: 9px !important; }
}


/* ============================================================================
   PÁGINA /copa/selecao/<slug> — bloco SEO long-tail (premium35)
   Título visível + details recolhível com elenco/grupo/próximo jogo.
   Visual MUITO discreto pra não competir com os campinhos. Mas o conteúdo
   é todo indexável pelo Google (SSR pelo render-selecao.js).
   ============================================================================ */
.copa-selecao-seo {
  max-width: 720px;
  margin: 4px auto 18px;
  padding: 0 16px;
  text-align: center;
}
.copa-selecao-seo__titulo {
  font-family: var(--copa-font-display, var(--copa-font-body));
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.4rem);
  font-weight: 700;
  color: var(--copa-navy);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  line-height: 1.25;
  text-wrap: balance;
}
.copa-selecao-seo__details {
  margin: 0 auto;
  font-size: 0.82rem;
  text-align: left;
}
.copa-selecao-seo__details > summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--copa-gold-700);
  padding: 4px 12px;
  border-radius: 999px;
  margin: 0 auto;
  opacity: 0.85;
  transition: opacity .15s, background .15s;
}
.copa-selecao-seo__details > summary::-webkit-details-marker { display: none; }
.copa-selecao-seo__details > summary::after {
  content: ' \203A';            /* › */
  font-size: 1.1em;
  display: inline-block;
  transform: rotate(90deg);
  transition: transform .2s var(--copa-ease, cubic-bezier(0.4, 0, 0.2, 1));
  margin-left: 4px;
}
.copa-selecao-seo__details[open] > summary::after {
  transform: rotate(-90deg);
}
.copa-selecao-seo__details > summary:hover {
  background: rgba(217, 164, 65, 0.12);
  opacity: 1;
}
.copa-selecao-seo__body {
  margin-top: 14px;
  padding: 14px 18px;
  background: rgba(255, 250, 239, 0.55);
  border: 1px solid rgba(217, 164, 65, 0.22);
  border-radius: 12px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--copa-text);
}
.copa-selecao-seo__body p { margin: 0 0 10px; }
.copa-selecao-seo__body p:last-child { margin-bottom: 0; }
.copa-selecao-seo__body strong { color: var(--copa-navy); font-weight: 700; }
.copa-selecao-seo__body h3 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--copa-gold-700);
  margin: 14px 0 8px;
}
.copa-selecao-seo__elenco {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: grid;
  gap: 5px;
}
.copa-selecao-seo__elenco li {
  font-size: 0.82rem;
  line-height: 1.5;
}
.copa-selecao-seo__elenco li strong {
  display: inline-block;
  min-width: 110px;
  color: var(--copa-gold-700);
}
.copa-selecao-seo__rodape {
  font-size: 0.78rem;
  color: var(--copa-muted);
  border-top: 1px dashed rgba(217, 164, 65, 0.30);
  padding-top: 10px;
  margin-top: 12px !important;
}
.copa-selecao-seo__rodape a {
  color: var(--copa-gold-700);
  text-decoration: underline dotted;
}

@media (max-width: 480px) {
  .copa-selecao-seo { margin: 4px auto 14px; padding: 0 12px; }
  .copa-selecao-seo__body { padding: 12px 14px; font-size: 0.82rem; }
  .copa-selecao-seo__elenco li strong { min-width: 90px; font-size: 0.76rem; }
}


/* ============================================================================
   BOTÃO "Ver elenco" — abaixo do campinho de cada seleção na /copa (premium38)
   Visual: pílula dourada centralizada, discreta mas convidativa.
   Hover: seta animada + bg gold mais forte.
   ============================================================================ */
.copa-lineup-card__ver-elenco {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: max-content;
  margin: 10px auto 4px;
  padding: 7px 16px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--copa-gold-700);
  background: rgba(217, 164, 65, 0.10);
  border: 1px solid rgba(217, 164, 65, 0.32);
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
  white-space: nowrap;
}
.copa-lineup-card__ver-elenco i {
  font-size: 0.85rem;
  transition: transform .2s var(--copa-ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.copa-lineup-card__ver-elenco:hover,
.copa-lineup-card__ver-elenco:focus-visible {
  background: rgba(217, 164, 65, 0.22);
  border-color: rgba(217, 164, 65, 0.55);
  color: var(--copa-navy);
  transform: translateY(-1px);
}
.copa-lineup-card__ver-elenco:hover i,
.copa-lineup-card__ver-elenco:focus-visible i {
  transform: translateX(3px);
}
.copa-lineup-card__ver-elenco:focus-visible {
  outline: 2px solid var(--copa-gold-500);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .copa-lineup-card__ver-elenco {
    padding: 6px 14px;
    font-size: 0.74rem;
    margin: 8px auto 2px;
  }
}