/* ============================================================
   Pecbol 2026 — single-atletas.css
   Perfil individual — copiado fielmente de atleta-perfil-vitor-godoy.html
   ============================================================ */

/* ========== HERO ========== */
.athlete-hero {
	max-width: var(--container-max); margin: 0 auto;
	padding: 0 40px 40px; /* top 0 = foto ancora pelo topo do hero */
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto; /* esquerda flexível · foto define a coluna */
	gap: 16px;
	align-items: start; /* ambas as colunas ancoram no topo */
	position: relative;
}
.hero-info {
	min-height: 0;
	align-self: stretch; /* estica até a altura da foto mesmo com align-items:start no pai */
	display: flex; flex-direction: column;
	justify-content: flex-start;
	gap: 32px;
}
/* Empurra a ficha+campinho pra base da coluna, alinhando com o pé da foto. */
.hero-info > .hero-bottom { margin-top: auto; }

.athlete-tags {
	display: flex; gap: 8px; margin-top: 24px; margin-bottom: 28px; flex-wrap: wrap;
}
.tag {
	padding: 6px 14px; font-size: 11px; font-weight: 700;
	letter-spacing: 0.15em; text-transform: uppercase;
	border-radius: 999px;
}
.tag-selection { background: var(--red); color: #fff; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; flex-wrap: nowrap; }
/* badge da foto: alinha bandeira + texto */
.selecao-badge { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; flex-wrap: nowrap; width: auto; }
/* Seleção brasileira — verde canarinho com letra amarela + pulsante discreto */
.tag-selection.is-brasil {
	background: #009739;
	color: #FFDF00;
}
.selecao-badge.is-brasil {
	background: #009739 !important;
	color: #FFDF00;
	animation: selecao-pulse 2.8s ease-in-out infinite;
}
@keyframes selecao-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(0, 151, 57, 0.50); }
	50%      { box-shadow: 0 0 0 8px rgba(0, 151, 57, 0); }
}
/* Copa do Mundo — badge dourado com brilho pulsante */
.tag-selection.is-copa {
	background: linear-gradient(135deg, #b8870c 0%, #e8c040 50%, #b8870c 100%);
	background-size: 200% 200%;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.40);
	animation: copa-shine 3s ease-in-out infinite;
}
.selecao-badge.is-copa {
	background: linear-gradient(135deg, #b8870c 0%, #e8c040 50%, #b8870c 100%) !important;
	background-size: 200% 200%;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.40);
	animation: copa-shine 3s ease-in-out infinite, selecao-pulse-copa 2.8s ease-in-out infinite;
}
@keyframes copa-shine {
	0%, 100% { background-position: 0% 50%; }
	50%       { background-position: 100% 50%; }
}
@keyframes selecao-pulse-copa {
	0%, 100% { box-shadow: 0 0 0 0 rgba(200, 160, 30, 0.60); }
	50%      { box-shadow: 0 0 0 8px rgba(200, 160, 30, 0); }
}
.tag-base { background: var(--brand); color: #fff; }
.tag-club {
	background: rgba(245, 242, 236, 0.50);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	color: var(--ink);
	border: 1px solid rgba(200, 195, 185, 0.30);
	display: inline-flex; align-items: center; gap: 8px;
}
.tag-flag { width: 18px; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); display: block; flex-shrink: 0; }

.athlete-position {
	font-family: 'Archivo', sans-serif;
	font-weight: 900; font-size: 16px;
	letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--brand);
	margin-bottom: 20px;
}
.athlete-name {
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: clamp(53px, 7.92vw, 115px);
	line-height: 0.88;
	letter-spacing: -0.03em;
	text-wrap: balance;
}
.athlete-name.is-medium {
	font-size: clamp(45px, 6.85vw, 99px);
}
.athlete-name.is-long {
	font-size: clamp(38px, 5.62vw, 82px);
	letter-spacing: -0.02em;
	line-height: 0.92;
}
.athlete-name .fn { display: inline; font-style: normal; color: var(--ink-soft); font-weight: 500; }
.athlete-name .ln { display: inline; font-weight: 700; }
.athlete-name .fn + .ln::before { content: ' '; }

/* Nome civil completo abaixo do apelido */
.athlete-fullname {
	font-family: 'Fraunces', serif;
	font-size: 22px;
	font-weight: 300;
	font-style: italic;
	color: var(--ink-soft);
	margin-top: 2px;
	letter-spacing: 0.01em;
}

/* Texto de parceria de agenciamento */
.athlete-parceria {
	font-size: 13px;
	color: var(--ink-soft);
	margin-top: 4px;
}
.athlete-parceria strong {
	font-weight: 600;
	color: var(--ink);
}

.athlete-tagline {
	font-family: 'Fraunces', serif;
	font-style: italic;
	font-size: 22px;
	color: var(--ink-soft);
	line-height: 1.4;
	max-width: 420px;
	margin-top: 32px;
	padding-left: 20px;
	border-left: 2px solid var(--brand);
}

/* Athlete image / gradient com numero da camisa gigante */
.athlete-image {
	position: relative;
	/* Preenche a largura da coluna (foto maior) mantendo proporção retrato 4:5
	   — mesma do editor de enquadramento. max-height evita estourar a viewport. */
	/* Altura limitada DIRETO pela viewport (nunca estoura), largura segue 4:5.
	   210 ≈ nav + breadcrumb + margens; cap 880 pra telas muito altas. */
	height: min(calc(100vh - 210px), 880px);
	aspect-ratio: 4 / 5;
	width: auto;
	justify-self: end;
	align-self: start;
	background: transparent;
	overflow: hidden;
	border-radius: 14px;
	z-index: 0 !important;
}
/* Logado no WP: a barra de admin (32px) reduz a área útil → foto um pouco menor. */
body.admin-bar .athlete-image { height: min(calc(100vh - 242px), 880px); }
@media screen and (max-width: 782px) {
	body.admin-bar .athlete-image { height: min(calc(100vh - 256px), 880px); }
}
/* cover num quadro 4:5: a foto enquadrada (4:5) preenche sem distorcer; âncora
   no topo garante que o rosto nunca seja cortado em fotos fora do padrão. */
/* Só a foto principal (filho direto) — não as imgs dos badges (bandeira da seleção). */
.athlete-image > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* Badges (UE + seleção) movidos para dentro de .info-jersey — acima do número */
/* As regras abaixo foram substituídas por .info-jersey-badges (ver adiante). */

/* Silhueta gigante do número de camisa removida — agora exibimos o número
   explicitamente em .info-jersey (canto inferior direito da info-bar). */
.athlete-image[data-jersey]::before { content: none; }
.athlete-image::after { content: none; }
/* Badges (UE + seleção) acima do número de camisa */
.info-jersey-badges {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}
/* Override do position:absolute do main.css quando badge está na info-bar */
.info-jersey-badges .flag-ue,
.info-jersey-badges .selecao-badge {
	position: relative;
	top: auto; left: auto; right: auto; bottom: auto;
}
.info-jersey-badges .flag-ue {
	width: 70px;
	height: 50px;
	border-radius: 4px;
	border: 2px solid #d4a843;
	transition: none;
	background-image: url('../img/eu_flag.svg');
	background-size: cover;
	background-position: center;
	background-color: #003399;
}
.info-jersey-badges .selecao-badge {
	padding: 5px 12px;
	font-size: 11px;
	letter-spacing: 0.12em;
	font-weight: 800;
	box-shadow: 0 3px 12px rgba(0,151,57,0.4);
}
.info-jersey-badges .selecao-badge .tag-flag {
	width: 16px; height: auto; flex: 0 0 auto;
}
/* ==========================================================
   FICHA TÉCNICA — painel completo no espaço vazio do hero
   (substitui o quick-bar antigo: agrupa todos os registros do atleta)
   ========================================================== */
/* Base do hero: ficha + card do campo, lado a lado e com a MESMA altura. */
.hero-bottom {
	display: flex;
	align-items: stretch;
	gap: 16px;
}
.hero-ficha {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 24px 28px;
	/* Fumê: vidro fosco escuro translúcido — deixa o vídeo/fundo vazar por trás */
	background: rgba(10, 14, 18, 0.55);
	-webkit-backdrop-filter: blur(16px) saturate(125%);
	backdrop-filter: blur(16px) saturate(125%);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #fff;
	border-radius: 14px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
}
/* Card do mini-campo — fora da caixa da ficha, mesma altura, entre ela e a foto */
.pitch-card {
	flex: 0 0 330px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px 16px;
	background: rgba(10, 14, 18, 0.55);
	-webkit-backdrop-filter: blur(16px) saturate(125%);
	backdrop-filter: blur(16px) saturate(125%);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
}
.hero-ficha::before {
	content: '';
	position: absolute; inset: 0;
	background: radial-gradient(ellipse at 95% 5%, rgba(0, 146, 188, 0.20) 0%, transparent 55%);
	pointer-events: none;
}
.hero-ficha-head {
	position: relative;
	display: flex; align-items: baseline; gap: 18px;
	margin-bottom: 22px;
}
.hero-ficha-eyebrow {
	font-family: 'Fraunces', serif;
	font-style: italic;
	font-weight: 500;
	font-size: 25px;
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--brand-light);
	flex-shrink: 0;
}
.hero-ficha-head::after {
	content: '';
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.12);
}
.hero-ficha-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px 28px;
	margin: 0;
}
.hero-ficha-cell {
	display: flex; flex-direction: column; gap: 6px;
	padding-bottom: 16px;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
	min-width: 0;
}
.hero-ficha-cell:nth-last-child(-n+3) { /* última linha sem traço */
	border-bottom: none;
	padding-bottom: 0;
}
.hero-ficha-cell dt {
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	font-weight: 600;
}
.hero-ficha-cell dd {
	margin: 0;
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 21px;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hero-ficha-cell dd span {
	font-size: 12px;
	font-weight: 600;
	color: var(--brand-light);
	letter-spacing: 0.03em;
	margin-left: 4px;
}

/* ===== MINI-CAMPO TÁTICO (posição) ===== */
.pitch {
	position: relative;
	width: 100%;
	margin-top: -20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.pitch-eyebrow {
	font-size: 13px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	font-weight: 600;
}
/* ângulo de inclinação compartilhado (campo deita, marcadores ficam em pé) */
.pitch { --tilt: 50deg; }
/* Palco com perspectiva — o gramado se inclina pra dentro dele */
.pitch-stage {
	width: 100%;
	perspective: 380px;
	perspective-origin: 50% 28%;
	padding-top: 4px;
}
/* Plano 3D do campo deitado (preserve-3d → marcadores ficam realmente em pé) */
.pitch-field {
	position: relative;
	width: 100%;
	top: -20px;
	aspect-ratio: 1.41 / 1;
	transform: rotateX(var(--tilt));
	transform-style: preserve-3d;
	transform-origin: 50% 50%;
	filter: drop-shadow(0 24px 22px rgba(0, 0, 0, 0.55));
}
/* Camada da grama (imagem deitada + linhas já vêm nela). Recortada e deitada no plano. */
.pitch-grass {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 6px;
	background-color: #2f8f43;
	background-image: url('../img/campinho-h.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.25);
}
/* Degradê de profundidade — escurece o fundo (longe) reforçando a perspectiva */
.pitch-grass::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0) 55%);
	pointer-events: none;
}
/* A imagem já traz as linhas brancas — escondemos o SVG. */
.pitch-lines { display: none; }

/* ===== SETAS — direção natural de jogo, deitadas no gramado ===== */
.pitch-arrows {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	pointer-events: none;
	overflow: visible;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
.pitch-arrow {
	fill: #ffffff;
	stroke: #04222b;
	stroke-width: 1.4;
	stroke-linejoin: round;
}
.pitch-arrow.is-primary {
	fill: var(--brand-light);
	stroke: #04222b;
	stroke-width: 1.6;
}

/* ===== MAPA DE CALOR — manchas "pintadas" no gramado ===== */
.pitch-heat {
	position: absolute;
	width: 32%;
	aspect-ratio: 1;
	z-index: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle,
		rgba(255, 40, 25, 0.85) 0%,
		rgba(255, 110, 0, 0.65) 26%,
		rgba(255, 205, 40, 0.45) 50%,
		rgba(255, 235, 90, 0.18) 72%,
		rgba(255, 235, 90, 0) 100%);
	filter: blur(5px);
	mix-blend-mode: screen;
	pointer-events: none;
}
.pitch-heat.is-primary {
	width: 42%;
	background: radial-gradient(circle,
		rgba(255, 25, 15, 0.92) 0%,
		rgba(255, 90, 0, 0.72) 24%,
		rgba(255, 195, 30, 0.48) 48%,
		rgba(255, 235, 90, 0.20) 70%,
		rgba(255, 235, 90, 0) 100%);
}

/* ===== JOGADOR — bonequinho em pé na posição principal ===== */
.pitch-player {
	position: absolute;
	width: 34%;
	max-width: 56px;
	transform: translate(-50%, -88%) rotateX(calc(var(--tilt) * -1));
	transform-origin: bottom center;
	z-index: 5;
	pointer-events: none;
}
.pitch-player svg {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.45));
}

/* ===== Marcadores das posições secundárias (ficam em pé) ===== */
.pitch-pin {
	position: absolute;
	transform: translate(-50%, -50%) rotateX(calc(var(--tilt) * -1));
	transform-origin: center;
	z-index: 4;
}
.pitch-pin-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--brand-light);
	color: #04222b;
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: 11px;
	letter-spacing: 0.02em;
	line-height: 1;
	border: 2px solid #fff;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45);
	white-space: nowrap;
}
.pitch-pin.is-primary .pitch-pin-dot {
	background: var(--brand);
	color: #fff;
	min-width: 30px;
	height: 30px;
	font-size: 12px;
}
.pitch-pin.is-primary::before {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 30px; height: 30px;
	border-radius: 999px;
	background: var(--brand-light);
	transform: translate(-50%, -50%);
	animation: pitch-pulse 2.6s ease-in-out infinite;
	z-index: -1;
}
@keyframes pitch-pulse {
	0%, 100% { opacity: 0.5;  transform: translate(-50%, -50%) scale(1); }
	50%      { opacity: 0.10; transform: translate(-50%, -50%) scale(2.2); }
}
.pitch-caption {
	font-family: 'Archivo', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	line-height: 1.35;
}

/* ==========================================================
   IMAGE INFO BAR — barra de notificação no rodapé da foto
   (esfumaciado dos 30% inferiores até o topo)
   ========================================================== */
.image-info-bar {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 36%;
	z-index: 2;
	display: flex;
	align-items: stretch;
	pointer-events: none;
}
/* Camada 1: gradiente suave — mesma curva do .card-img::after dos athlete-cards
   (sem preto sólido pesado, deixa parte da foto vazar pra ficar coerente com o resto) */
.image-info-bar::before {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.95) 0%,
		rgba(0, 0, 0, 0.78) 22%,
		rgba(0, 0, 0, 0.55) 50%,
		rgba(0, 0, 0, 0.28) 72%,
		rgba(0, 0, 0, 0.10) 88%,
		rgba(0, 0, 0, 0) 100%
	);
	pointer-events: none;
}
/* Camadas de blur (::after) e poeira (.info-bar-dust) removidas —
   estavam criando uma faixa esbranquiçada na transição. Agora só o gradiente puro,
   igual ao .card-img::after dos athlete-cards. */
.info-bar-dust { display: none; }
.info-bar-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 56px; /* gap grande → linha "Seleção" sobe pra zona do fade (~70-80% da barra) */
	width: 100%;
	padding: 22px 22px 22px;
	color: #fff;
	pointer-events: auto;
}
.info-row {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}
.info-row-team { /* primeira linha: vínculo (clube/seleção) */ }
.info-row-meta { gap: 56px; } /* segunda linha: país + status — mais espaçados */
.info-cell {
	display: flex; flex-direction: column; gap: 2px;
	min-width: 0;
}
.info-cell .lbl {
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--brand-light);
	font-weight: 700;
	line-height: 1;
}
.info-cell strong {
	font-family: 'Fraunces', serif;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.15;
	color: #fff;
	white-space: nowrap;
}
/* Linha do vínculo principal (Seleção/Clube) — texto maior pra hierarquia */
.info-row-team .info-cell strong { font-size: 26px; }
.info-row-team .info-cell .lbl { font-size: 12px; letter-spacing: 0.24em; }
.info-cell-club {
	flex-direction: row;
	align-items: center;
	gap: 12px;
}
.info-cell-club .info-text {
	display: flex; flex-direction: column; gap: 2px;
	min-width: 0;
}
/* Bandeira do país do clube — substitui o quadrado de texto .info-icon */
.info-flag {
	width: 52px; height: auto;
	border-radius: 6px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.45);
	flex-shrink: 0;
	display: block;
	align-self: center;
}
.info-icon {
	width: 50px; height: 50px;
	background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
	border-radius: 10px;
	display: inline-flex;
	align-items: center; justify-content: center;
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: 14px;
	letter-spacing: 0.04em;
	color: #fff;
	box-shadow: 0 6px 18px rgba(0, 146, 188, 0.5);
	flex-shrink: 0;
}
/* Número da camisa — bloco grande no canto inferior direito */
.info-jersey {
	position: absolute;
	right: 56px;
	bottom: 24px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	line-height: 1;
	color: #fff;
	z-index: 2;
	pointer-events: none;
}
.info-jersey .lbl {
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--brand-light);
	font-weight: 700;
}
.info-jersey .num {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: 142px;
	line-height: 0.82;
	letter-spacing: -0.06em;
	color: #fff;
	text-shadow: 0 6px 28px rgba(0, 0, 0, 0.55);
}

.info-cell-status strong {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.info-cell-status strong::before {
	content: '';
	display: inline-block;
	width: 8px; height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
.info-cell-status.is-on strong::before {
	background: #4ade80;
	box-shadow: 0 0 10px rgba(74, 222, 128, 0.65);
	animation: pulse-on 2.4s ease-in-out infinite;
}
.info-cell-status.is-off strong::before {
	background: rgba(255, 255, 255, 0.35);
}
@keyframes pulse-on {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.6; transform: scale(0.85); }
}

/* ========== QUICK INFO BAR (preto, 6 cells) ========== */
.quick-bar {
	background: var(--ink);
	color: var(--bg);
	padding: 0;
}
.quick-bar-inner {
	max-width: var(--container-max); margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1px;
	background: rgba(255,255,255,0.1);
}
.quick-info {
	background: var(--ink);
	padding: 28px 24px;
	transition: background 0.3s;
}
.quick-info:hover { background: var(--brand-navy); }
.quick-info .lbl {
	font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--brand-light); margin-bottom: 8px; font-weight: 600;
}
.quick-info .val {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: 28px;
	letter-spacing: -0.02em;
	color: #fff;
}
.quick-info .val .sub { font-size: 14px; color: var(--brand-glow); font-weight: 500; }

/* ========== SECTIONS GERAIS DO PERFIL ========== */
.section {
	max-width: var(--container-max); margin: 0 auto;
	padding: 100px 40px;
}
.section .section-title { margin-bottom: 48px; font-size: clamp(36px, 5vw, 64px); }

/* ========== BIO ========== */
.bio-grid {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 60px;
	align-items: start;
}
/* Quando não há pullquote, bio-text ocupa as duas colunas */
.bio-grid:not(:has(.bio-pullquote)) .bio-text { grid-column: 1 / -1; }
.bio-text {
	font-family: 'Fraunces', serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.70;
	color: var(--ink-soft);
}
.bio-text p { margin-bottom: 16px; }

/* Pull quote — coluna direita */
.bio-pullquote {
	position: sticky;
	top: 100px;
	padding: 32px 28px;
	border-left: 3px solid var(--brand);
	background: var(--paper);
}
.bio-pullquote blockquote {
	font-family: 'Fraunces', serif;
	font-size: 21px;
	font-style: italic;
	font-weight: 500;
	line-height: 1.45;
	color: var(--ink);
	margin: 0 0 20px;
	quotes: '\201C' '\201D';
}
.bio-pullquote blockquote::before {
	content: open-quote;
	font-size: 64px;
	line-height: 0;
	vertical-align: -0.4em;
	color: var(--brand);
	font-style: normal;
	margin-right: 4px;
	display: block;
	margin-bottom: 12px;
}
.bio-pullquote cite {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ink-mute);
}
.bio-pullquote cite::before { content: '— '; }
.bio-text > p:first-of-type::first-letter,
.bio-text .drop {
	font-size: 72px; float: left; line-height: 0.85;
	font-weight: 600; color: var(--brand);
	margin-right: 12px; margin-top: 6px;
}
.bio-sidebar {
	background: var(--paper);
	border: 1px solid var(--line);
	padding: 32px;
	height: fit-content;
}
.bio-sidebar h4 {
	font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--ink-mute); font-weight: 600;
	margin-bottom: 20px;
	padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.bio-item {
	display: flex; justify-content: space-between;
	padding: 14px 0;
	border-bottom: 1px dashed var(--line);
	font-size: 14px;
	gap: 16px;
}
.bio-item:last-child { border-bottom: none; }
.bio-item .k { color: var(--ink-mute); font-weight: 500; display: inline-flex; align-items: center; gap: 9px; }
.bio-item-ico { width: 17px; height: 17px; color: var(--brand); flex-shrink: 0; }
.bio-item .v { color: var(--ink); font-weight: 600; display: flex; justify-content: flex-end; align-items: center; }
.attr-stars { display: inline-flex; gap: 3px; }
.attr-star { color: #ddd6c6; line-height: 0; }       /* estrela vazia */
.attr-star.is-on { color: #c9a24b; }                  /* estrela preenchida (dourado) */
.attr-star svg { width: 15px; height: 15px; display: block; }

/* ========== BIO + NOTÍCIAS (50/50) ========== */
.bio-news-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: start;
}
.bio-news-col { min-width: 0; }
.bio-news-col--bio:only-child { grid-column: 1 / -1; }
.bio-news-col--bio .section-title { margin-bottom: 28px; }

.bio-news-heading {
	font-family: 'Fraunces', serif;
	font-size: clamp(20px, 2.2vw, 28px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin-bottom: 20px;
}
.bio-news-heading em { font-style: italic; color: var(--brand); }

.bio-news-2x2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.bio-news-card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: var(--paper);
	border: 1px solid var(--line);
	overflow: hidden;
	transition: all 0.3s;
}
.bio-news-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -6px rgba(0,62,80,0.15);
	border-color: var(--brand);
}
.bio-news-img {
	aspect-ratio: 16/9;
	background: linear-gradient(135deg, var(--brand), var(--brand-deep));
	position: relative;
	overflow: hidden;
}
.bio-news-card[data-bg="2"] .bio-news-img { background: linear-gradient(135deg, var(--brand-deep), var(--brand-navy)); }
.bio-news-card[data-bg="3"] .bio-news-img { background: linear-gradient(135deg, var(--brand-navy), #04222b); }
.bio-news-card[data-bg="4"] .bio-news-img { background: linear-gradient(135deg, var(--red), #8B2914); }
.bio-news-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bio-news-date {
	position: absolute; top: 8px; left: 8px;
	background: #fff;
	padding: 3px 7px;
	font-size: 10px; font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--brand-deep);
}
.bio-news-body { padding: 10px 12px 14px; }
.bio-news-body .cat {
	font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
	color: var(--brand); font-weight: 700;
	margin-bottom: 5px;
}
.bio-news-body h4 {
	font-family: 'Fraunces', serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (max-width: 860px) {
	.bio-news-grid { grid-template-columns: 1fr; gap: 40px; }
	.bio-news-col--bio:only-child { grid-column: auto; }
}
@media (max-width: 480px) {
	.bio-news-2x2 { grid-template-columns: 1fr; }
}

/* ========== BIO — texto + atributos técnicos (sidebar) ========== */
.bio-layout { display: grid; grid-template-columns: 1fr; gap: 40px; }
.bio-layout.has-attrs {
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 60px;
	align-items: start;
}
/* Sem atributos, limita a largura da linha pra leitura confortável. */
.bio-layout:not(.has-attrs) .bio-text { max-width: 68ch; }
@media (max-width: 860px) {
	.bio-layout.has-attrs { grid-template-columns: 1fr; gap: 40px; }
}

/* Sem BIO: a régua de atributos ocupa a largura toda, distribuída em 2 colunas
   (vira um "stat sheet" em vez de uma sidebar estreita esticada e vazia). */
.bio-layout.attrs-only { grid-template-columns: 1fr; }
.bio-layout.attrs-only .bio-items {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 56px;
}
@media (max-width: 720px) {
	.bio-layout.attrs-only .bio-items { grid-template-columns: 1fr; }
}

/* ========== NOTÍCIAS — faixa horizontal (4 cards) ========== */
.news-band-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.news-band-more { display: flex; justify-content: flex-end; margin-top: 28px; }

/* ========== OUTROS ATLETAS DA MESMA POSIÇÃO ========== */
.related-athletes-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 14px;
}
/* mostra só 6 (1 linha); o shuffle no front escolhe quais 6 aparecem */
.related-athletes-grid > .related-athlete:nth-child(n+7) { display: none; }
.related-athlete {
	display: block; text-decoration: none; color: inherit;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.related-athlete:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -16px rgba(0,62,80,.25);
	border-color: var(--brand);
}
.related-athlete-img {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	/* Fundo atrás da foto transparente — estádio + tom da marca (var centralizada). */
	background-color: var(--brand-deep);
	background-image: var(--athlete-photo-bg);
	background-size: cover;
	background-position: center;
}
.related-athlete-img img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	transition: transform .45s ease;
}
.related-athlete:hover .related-athlete-img img { transform: scale(1.05); }
.related-athlete-info { padding: 11px 12px 13px; }
.related-athlete-pos {
	font-family: 'Archivo', sans-serif;
	font-size: 9px; font-weight: 900;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--brand);
	margin-bottom: 5px;
}
.related-athlete-name {
	font-family: 'Fraunces', serif;
	font-size: 15px; font-weight: 500; line-height: 1.15;
	margin: 0 0 7px;
}
.related-athlete-club {
	display: flex; align-items: center; gap: 6px;
	font-size: 11px; color: var(--ink-mute);
	min-height: 16px;
}
.related-athlete-flag { width: 16px; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); flex-shrink: 0; }
@media (max-width: 1100px) { .related-athletes-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px)  { .related-athletes-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px)  { .related-athletes-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 860px) {
	.news-band-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.news-band-grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   TIMELINE — rail horizontal com linha fina gradiente
   Linha de 1.5px que muda de cor sutilmente a cada marco
   da carreira (paleta Pecbol: navy → deep → brand → light → glow).
   Anos grandes alternam acima/abaixo da linha; cards minimalistas.
   ========================================================== */
.timeline-section {
	background: var(--bg-alt);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

/* ===== TRAJETÓRIA SIMPLES (1 a 3 marcos) — sem linha do tempo nem animação ===== */
.timeline-simple {
	margin-top: 40px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
}
.timeline-simple[data-count="1"] { max-width: 460px; }
.traj-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 26px 28px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.traj-card.is-current {
	border-color: var(--brand);
	box-shadow: 0 12px 34px rgba(0, 146, 188, 0.16);
}
.traj-year {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: 30px;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--brand);
	margin-bottom: 12px;
}
.traj-content h4 {
	font-family: 'Fraunces', serif;
	font-weight: 600;
	font-size: 22px;
	line-height: 1.15;
	margin: 0 0 4px;
}
.traj-content .club {
	font-size: 14px;
	color: var(--ink-soft);
	font-weight: 600;
	margin-bottom: 8px;
}
.traj-content .timeline-meta {
	display: flex; flex-wrap: wrap; gap: 6px;
	font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--ink-mute); font-weight: 600;
	margin-bottom: 10px;
}
.traj-content p {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink-soft);
}

/* Escudo do clube na trajetória (vale p/ os dois layouts: trilho e simples) */
.tl-crest-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin: 0 0 12px;
}
.tl-crest {
	width: 48px;
	height: 48px;
	object-fit: contain;
	display: block;
	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.14));
}
/* Quando cai no fallback de bandeira (clube sem escudo), fica menor e arredondado */
.tl-crest.is-flag-fallback {
	width: 34px;
	height: auto;
	border-radius: 3px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
	filter: none;
}

/* Wrapper com scroll horizontal quando precisar */
.timeline-rail {
	margin-top: 56px;
	overflow-x: auto;
	/* hidden no eixo Y mata a barra vertical fantasma (quirk: overflow-x:auto força
	   o overflow-y:visible a virar auto). O min-height do trilho já comporta os cards. */
	overflow-y: hidden;
	padding: 0 8px;
	/* Esconde as barras de rolagem (azuis) — navegação lateral por trackpad/touch/scroll. */
	scrollbar-width: none;        /* Firefox */
	-ms-overflow-style: none;     /* IE/Edge */
	-webkit-overflow-scrolling: touch;
}
.timeline-rail::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Chrome/Safari */

.timeline.timeline--rail {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: stretch;
	position: relative;
	/* width: max-content garante que o OL tenha a largura total do conteúdo
	   (items overflow não colapsam o containing block do .timeline-track).
	   min-width: 100% garante mínimo do parent quando há poucos items. */
	width: max-content;
	min-width: 100%;
	min-height: 384px;
}

/* A linha — span entre o centro do primeiro e último nó.
   2.5px, gradiente Pecbol navy→deep, com fallback sólido brand-deep. */
.timeline-track {
	display: block;
	position: absolute;
	top: 50%;
	left: var(--rail-start, 0%);
	right: var(--rail-end, 0%);
	height: 2.5px;
	transform: translateY(-50%);
	background-color: var(--brand-deep);
	background-image: var(--rail-gradient);
	border-radius: 2px;
	z-index: 0;
	pointer-events: none;
}

/* Cada nó é uma coluna flex de largura igual.
   flex: 1 0 160px → cards mais juntos. Sem max-width pra manter colunas
   idênticas e dots alinhados aos stops do gradiente. */
.timeline-node {
	flex: 1 0 160px;
	min-width: 160px;
	position: relative;
	z-index: 1;
}

/* Dot — ring oco (centro creme, borda na cor do nó). Sem box-shadow halo
   gigante que estava comendo a linha entre os marcos. */
.timeline-dot {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--bg-alt);
	border: 2px solid var(--node-color, var(--brand-deep));
	box-sizing: border-box;
	transform: translate(-50%, -50%);
	z-index: 2;
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.25s ease;
}

/* Anel "ping" pra efeito blink — fica invisível por padrão, anima só quando
   o nó é revelado (regra abaixo no bloco .is-animatable). */
.timeline-dot::before,
.timeline-dot::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 2px solid var(--node-color, var(--brand-deep));
	transform: translate(-50%, -50%) scale(1);
	opacity: 0;
	pointer-events: none;
	box-sizing: border-box;
}

/* Stem — fininho, conecta dot ao card */
.timeline-stem {
	position: absolute;
	left: 50%;
	width: 1px;
	height: 28px;
	background: var(--node-color, var(--brand));
	opacity: 0.4;
	transform: translateX(-50%);
}
.timeline-node[data-side="top"] .timeline-stem    { bottom: calc(50% + 8px); }
.timeline-node[data-side="bottom"] .timeline-stem { top: calc(50% + 8px); }

/* Card — flutua acima ou abaixo do dot */
.timeline-card {
	position: absolute;
	left: 50%;
	width: calc(100% - 16px);
	max-width: 200px;
	transform: translateX(-50%);
	text-align: center;
}
.timeline-node[data-side="top"] .timeline-card    { bottom: calc(50% + 32px); }
.timeline-node[data-side="bottom"] .timeline-card { top: calc(50% + 32px); }

/* Tipografia — ANO é o destaque (Archivo 900 grande, sempre brand-deep
   pra não ficar claro), time vem embaixo como secundário. */
.timeline-year {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: clamp(32px, 3.6vw, 48px);
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: var(--brand-deep);
	margin-bottom: 6px;
}

/* Ano grande no lado OPOSTO ao card (escudo+clube de um lado, ano do outro). */
.timeline-node-year {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: clamp(32px, 3.6vw, 48px);
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: var(--brand-deep);
	z-index: 1;
	pointer-events: none;
}
.timeline-node[data-side="top"] .timeline-node-year    { top: calc(50% + 26px); }
.timeline-node[data-side="bottom"] .timeline-node-year { bottom: calc(50% + 26px); }
/* No trilho, o escudo fica centralizado acima do nome do clube. */
.timeline-card .tl-crest-wrap { justify-content: center; }

.timeline-content h4 {
	font-family: 'Fraunces', serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--ink);
	margin: 0 0 4px;
}

.timeline-content .club {
	font-family: 'Archivo', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin: 0 0 8px;
}

/* País + período (paridade de conteúdo com o site antigo) */
.timeline-meta {
	font-family: 'Archivo', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ink-mute);
	margin: 0 0 8px;
	display: flex;
	gap: 6px;
	justify-content: center;
	flex-wrap: wrap;
}
.timeline-meta .tl-pais {
	color: var(--brand);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.timeline-meta .tl-sep { opacity: 0.5; }
.timeline-meta .tl-periodo { color: var(--ink-mute); }

.timeline-content p {
	font-size: 12px;
	line-height: 1.5;
	color: var(--ink-soft);
	margin: 0;
	max-width: 200px;
	margin-left: auto;
	margin-right: auto;
}

/* Estado atual — dot maior + halo pulsante (só no current, não corta a linha
   nos demais nós). */
.timeline-node.is-current .timeline-dot {
	width: 16px;
	height: 16px;
	background: var(--node-color, var(--brand-deep));
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--node-color, var(--brand-deep)) 22%, transparent);
	animation: timeline-pulse 2.4s ease-in-out infinite;
}
@keyframes timeline-pulse {
	0%, 100% {
		box-shadow: 0 0 0 6px color-mix(in srgb, var(--node-color, var(--brand-deep)) 22%, transparent);
	}
	50% {
		box-shadow: 0 0 0 12px color-mix(in srgb, var(--node-color, var(--brand-deep)) 0%, transparent);
	}
}

/* Hover — destaque sutil */
.timeline-node:hover .timeline-dot {
	transform: translate(-50%, -50%) scale(1.4);
}
.timeline-node:hover .timeline-stem { opacity: 0.7; }

/* ---------- Reveal sequencial (driven by JS) ----------
   Cascata: linha desenha → dot blinka → ano aparece → clube embaixo aparece.
   JS controla o timing entre nós; CSS controla a cascata interna. */

/* Estado inicial — tudo escondido */
.timeline-rail.is-animatable .timeline-node-year,
.timeline-rail.is-animatable .tl-crest-wrap,
.timeline-rail.is-animatable .timeline-content {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.timeline-rail.is-animatable .timeline-stem {
	opacity: 0;
	transition: opacity 0.4s ease;
}
.timeline-rail.is-animatable .timeline-dot {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.4);
}

/* Linha desenha devagar conforme JS atualiza --reveal-end (0% → 100%) */
.timeline-rail.is-animatable .timeline-track {
	clip-path: inset(0 calc(100% - var(--reveal-end, 0%)) 0 0);
	transition: clip-path 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Quando o nó é revelado:
   t=0      dot pop-in + 2 anéis "ping" expandem pra fora (blink)
   t=0.25s  ano sobe e aparece
   t=0.45s  stem fade-in (conexão dot→card)
   t=0.65s  clube/conteúdo aparece embaixo do ano */
.timeline-rail.is-animatable .timeline-node.is-revealed .timeline-dot {
	animation: timeline-dot-blink 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.timeline-rail.is-animatable .timeline-node.is-revealed .timeline-dot::before {
	animation: timeline-dot-ping 1s cubic-bezier(0, 0, 0.2, 1) 0.1s forwards;
}
.timeline-rail.is-animatable .timeline-node.is-revealed .timeline-dot::after {
	animation: timeline-dot-ping 1s cubic-bezier(0, 0, 0.2, 1) 0.4s forwards;
}
.timeline-rail.is-animatable .timeline-node.is-revealed .timeline-node-year {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.25s;
}
.timeline-rail.is-animatable .timeline-node.is-revealed .tl-crest-wrap {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.5s;
}
.timeline-rail.is-animatable .timeline-node.is-revealed .timeline-stem {
	opacity: 0.4;
	transition-delay: 0.45s;
}
.timeline-rail.is-animatable .timeline-node.is-revealed .timeline-content {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.65s;
}

@keyframes timeline-dot-blink {
	0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
	40%  { opacity: 1; transform: translate(-50%, -50%) scale(1.7); }
	70%  {              transform: translate(-50%, -50%) scale(0.92); }
	100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Onda de choque: anel parte do tamanho do dot e expande 3.5x desbotando */
@keyframes timeline-dot-ping {
	0%   { opacity: 0.85; transform: translate(-50%, -50%) scale(0.9); }
	100% { opacity: 0;    transform: translate(-50%, -50%) scale(3.5); }
}

/* Reduced motion: revela tudo de uma vez sem animação */
@media (prefers-reduced-motion: reduce) {
	.timeline-rail.is-animatable .timeline-node-year,
	.timeline-rail.is-animatable .tl-crest-wrap,
	.timeline-rail.is-animatable .timeline-content,
	.timeline-rail.is-animatable .timeline-stem,
	.timeline-rail.is-animatable .timeline-dot {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
		transition: none;
	}
	.timeline-rail.is-animatable .timeline-node-year,
	.timeline-rail.is-animatable .timeline-content {
		transform: none;
	}
	.timeline-rail.is-animatable .timeline-stem { opacity: 0.4; transform: translateX(-50%); }
	.timeline-rail.is-animatable .timeline-track {
		clip-path: none;
		transition: none;
	}
}

/* ---------- Mobile: vira vertical (linha à esquerda) ---------- */
@media (max-width: 880px) {
	.timeline-rail {
		margin-top: 32px;
		overflow: visible;
		padding: 0;
	}

	.timeline.timeline--rail {
		display: block;
		min-height: 0;
		padding-left: 28px;
	}

	/* Linha vira vertical. O gradient inline (PHP) é "to right" — aqui
	   forçamos um vertical estático com a mesma paleta escura. */
	.timeline.timeline--rail::before {
		top: 0;
		bottom: 0;
		left: 6px;
		right: auto;
		width: 2px;
		height: auto;
		transform: none;
		background:
			linear-gradient(to bottom,
				var(--brand-navy) 0%,
				var(--brand-deep) 100%);
	}

	.timeline-node {
		flex: none;
		min-width: 0;
		max-width: 100%;
		display: block;
		padding: 18px 0 18px 24px;
		min-height: auto;
	}

	.timeline-dot {
		top: 32px;
		left: -22px;
		transform: translate(0, 0);
	}
	.timeline-node:hover .timeline-dot {
		transform: scale(1.4);
	}

	.timeline-stem {
		top: 32px !important;
		bottom: auto !important;
		left: -16px !important;
		width: 12px;
		height: 1px;
		transform: none;
	}

	.timeline-card {
		position: relative;
		top: auto !important;
		bottom: auto !important;
		left: auto;
		width: auto;
		max-width: 100%;
		transform: none;
		text-align: left;
	}

	.timeline-year { font-size: 30px; margin-bottom: 4px; }
	.timeline-content p { margin-left: 0; margin-right: 0; }
	.timeline-meta { justify-content: flex-start; }
}

/* ========== STATS ========== */
.stats-section {
	background: var(--brand-navy);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.stats-section::before {
	content: '';
	position: absolute; inset: 0;
	background-image:
		radial-gradient(circle at 15% 30%, rgba(0,146,188,0.2) 0%, transparent 50%),
		radial-gradient(circle at 85% 70%, rgba(0,146,188,0.1) 0%, transparent 50%);
}
.stats-inner { position: relative; z-index: 2; }
.stats-section .section-label { color: var(--brand-light); }
.stats-section .section-label::before { background: var(--brand-light); }
.stats-section .section-title { color: #fff; }
.stats-section .section-title em { color: var(--brand-light); }
.stats-section .section-title .season {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: 20px; font-style: normal;
	letter-spacing: 0.1em;
	color: var(--brand-light);
	display: block;
	margin-top: 12px;
}
.big-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-bottom: 60px;
}
.big-stat {
	padding: 32px 28px;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.1);
	position: relative;
	overflow: hidden;
}
.big-stat::after {
	content: '';
	position: absolute; bottom: 0; left: 0;
	height: 3px; background: var(--brand);
	width: var(--bar, 60%);
}
.big-stat .num {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: 88px;
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: #fff;
	margin-bottom: 14px;
}
.big-stat .num .unit {
	font-size: 32px; color: var(--brand-light); font-weight: 700;
}
.big-stat .lbl {
	font-size: 13px;
	font-weight: 500;
	opacity: 0.85;
	line-height: 1.4;
}
.big-stat .lbl strong { color: var(--brand-light); }

.secondary-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.1);
}
.sec-stat {
	padding: 20px 24px;
	background: var(--brand-navy);
	display: flex; flex-direction: column; gap: 6px;
}
.sec-stat .v {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: 28px;
	line-height: 1;
}
.sec-stat .k {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.7;
}

/* ========== ACHIEVEMENTS ========== */
.achievements-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.achievement {
	position: relative;
	border: 0;
	border-radius: 6px;
	padding: 30px 28px 26px;
	overflow: hidden;
	background-size: 220% 220%;
	background-position: 0% 50%;
	/* mesma varredura de brilho do badge da Copa do Mundo (lenta) */
	animation: copa-shine 9s ease-in-out infinite;
	box-shadow:
		0 12px 30px -14px rgba(0,0,0,.45),
		inset 0 1px 0 rgba(255,255,255,.55),
		inset 0 0 0 1px rgba(255,255,255,.22);
	transition: transform .3s ease, box-shadow .3s ease;
}
/* Campeão — ouro metálico */
.achievement.is-champion {
	background-image: linear-gradient(125deg, #9a7410 0%, #f4da86 26%, #c89a27 50%, #f7e19c 74%, #9a7410 100%);
	color: #4a3708;
	--ach-medal: #6f5108;
}
/* Vice — prata metálica */
.achievement.is-vice {
	background-image: linear-gradient(125deg, #828b93 0%, #eef2f4 26%, #aeb7bd 50%, #f3f6f7 74%, #828b93 100%);
	color: #2c353b;
	--ach-medal: #56616a;
}
/* glare diagonal varrendo o card (foil) */
.achievement::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 48%, transparent 58%);
	background-size: 250% 250%;
	animation: ach-glare 9s ease-in-out infinite;
	mix-blend-mode: screen;
	pointer-events: none;
}
@keyframes ach-glare {
	0%, 100% { background-position: 120% 0; }
	50%      { background-position: -20% 0; }
}
.achievement:hover {
	transform: translateY(-5px);
	box-shadow:
		0 28px 52px -18px rgba(0,0,0,.55),
		inset 0 1px 0 rgba(255,255,255,.65),
		inset 0 0 0 1px rgba(255,255,255,.30);
}

/* medalha/troféu no canto — gravado no metal */
.ach-medal {
	position: absolute; top: 22px; right: 22px; z-index: 2;
	width: 30px; height: 30px;
	color: var(--ach-medal);
	filter: drop-shadow(0 1px 0 rgba(255,255,255,.5));
	transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.ach-medal svg { width: 100%; height: 100%; display: block; }
.achievement:hover .ach-medal { transform: scale(1.14) rotate(-5deg); }

.achievement .year {
	position: relative; z-index: 2;
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: 42px;
	color: inherit;
	letter-spacing: -0.03em;
	line-height: 1;
	margin-bottom: 14px;
	text-shadow: 0 1px 0 rgba(255,255,255,.45), 0 -1px 1px rgba(0,0,0,.12); /* relevo gravado */
}
.achievement h4 {
	position: relative; z-index: 2;
	font-family: 'Fraunces', serif;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.25;
	margin: 0;
	padding-right: 34px;       /* espaço pro ícone */
	color: inherit;
	text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.achievement .desc {
	position: relative; z-index: 2;
	font-size: 13px;
	color: inherit;
	opacity: .8;
	line-height: 1.5;
	margin-top: 8px;
}
.achievement .badge {
	position: relative; z-index: 2;
	display: inline-block;
	margin-top: 16px;
	padding: 4px 10px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: rgba(0,0,0,.20);
	color: #fff;
	border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.achievement, .achievement::after { animation: none; }
}

/* ========== NEWS GRID (3 cols no perfil) ========== */
.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.news-card {
	background: var(--paper);
	border: 1px solid var(--line);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: all 0.3s;
	display: block;
}
.news-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px -10px rgba(0,62,80,0.15);
}
.news-img {
	aspect-ratio: 16/10;
	background: linear-gradient(135deg, var(--brand), var(--brand-deep));
	position: relative;
	overflow: hidden;
}
.news-card[data-bg="2"] .news-img { background: linear-gradient(135deg, var(--brand-deep), var(--brand-navy)); }
.news-card[data-bg="3"] .news-img { background: linear-gradient(135deg, var(--red), #8B2914); }
.news-img img { width: 100%; height: 100%; object-fit: cover; }
.news-img::before {
	content: '';
	position: absolute; inset: 0;
	background-image: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.2) 0%, transparent 60%);
	pointer-events: none;
}
.news-date-badge {
	position: absolute; top: 16px; left: 16px;
	background: #fff;
	padding: 6px 10px;
	font-size: 11px; font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--brand-deep);
}
.news-body { padding: 24px; }
.news-body .cat {
	font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
	color: var(--brand); font-weight: 700;
	margin-bottom: 10px;
}
.news-body h4 {
	font-family: 'Fraunces', serif;
	font-size: 20px; font-weight: 500;
	line-height: 1.25;
	margin-bottom: 12px;
}
.news-body p {
	font-size: 13px;
	color: var(--ink-soft);
}

/* ========== CONTACT CTA (preto, agente card) ========== */
.cta-contact {
	background: var(--ink);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.cta-contact::before {
	content: '';
	position: absolute; inset: 0;
	background-image:
		radial-gradient(circle at 20% 50%, rgba(0,146,188,0.3) 0%, transparent 50%);
}
.cta-contact .section {
	position: relative; z-index: 2;
	padding: 100px 40px;
}
.cta-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 60px;
	align-items: center;
}
.cta-contact h2 {
	font-family: 'Fraunces', serif;
	font-weight: 400;
	font-size: clamp(32px, 4vw, 54px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin-bottom: 20px;
}
.cta-contact h2 em { font-style: italic; color: var(--brand-light); }
.cta-contact p {
	color: rgba(255,255,255,0.7);
	max-width: 520px;
	font-size: 16px;
	margin-bottom: 32px;
}
.agent-card {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.15);
	padding: 32px;
	backdrop-filter: blur(8px);
}
.agent-row {
	display: flex; gap: 16px; align-items: center;
}
.agent-avatar {
	width: 64px; height: 64px; border-radius: 50%;
	background: #0A0A0A;                       /* círculo preto */
	border: 1px solid rgba(255,255,255,0.18);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}
.agent-avatar-logo {
	width: 82%; display: block;                /* logo Pecbol centralizado com respiro */
}
.agent-avatar-logo svg { width: 100%; height: auto; display: block; }
/* A palavra "Pecbol" são paths pretos (somem no círculo preto) → branco; o traço
   azul-marca permanece como está, pra dar o respingo de cor da marca. */
.agent-avatar-logo svg [fill="black"] { fill: #fff; }
.agent-info .nm {
	font-family: 'Fraunces', serif;
	font-size: 20px; font-weight: 500; line-height: 1.1;
}
.agent-info .rl {
	font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
	color: var(--brand-light);
	margin-top: 4px; font-weight: 600;
}
/* Selo de credenciamento — na direita da linha de cima (junto do nome). */
.agent-info { min-width: 0; }   /* deixa o texto encolher pro selo caber à direita */
.agent-seal-stamp {
	width: 60px; height: 60px; flex-shrink: 0;
	margin-left: auto;            /* empurra pro canto direito da row */
	color: var(--brand-light);
}
.agent-seal-stamp text {
	font-family: 'Archivo', sans-serif; font-weight: 800;
	fill: currentColor;
}
/* Rodapé do card: divisor + botão de contato (largura cheia, cantos retos). */
.agent-foot {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid rgba(255,255,255,0.15);
}
.agent-cta-btn {
	width: 100%;
	border-radius: 4px;          /* menos arredondado que a pílula padrão */
	justify-content: center; text-align: center;
}
/* E-mail/telefone (quando configurados) — sem divisor próprio; o rodapé acima já divide. */
.agent-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }

/* ========== NEXT/PREV ATHLETE ========== */
.athlete-nav {
	max-width: var(--container-max); margin: 0 auto;
	padding: 60px 40px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	border-top: 1px solid var(--line);
}
.nav-card {
	background: var(--paper);
	border: 1px solid var(--line);
	padding: 28px;
	text-decoration: none;
	color: inherit;
	display: flex; align-items: center; gap: 20px;
	transition: all 0.3s;
}
.nav-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -8px rgba(0,62,80,0.2);
	border-color: var(--brand);
}
.nav-card.prev { text-align: left; }
.nav-card.next { text-align: right; flex-direction: row-reverse; }
.nav-card-img {
	width: 80px; height: 100px;
	background: linear-gradient(135deg, var(--brand), var(--brand-deep));
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
	border-radius: 4px;
}
.nav-card.next .nav-card-img {
	background: linear-gradient(135deg, var(--brand-deep), var(--brand-navy));
}
/* Foto do atleta preenche o quadradinho */
.nav-card-img img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	z-index: 1;
}
/* Esfumadinho preto só na parte de baixo — sem número, sem texto */
.nav-card-img::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.65) 0%,
		rgba(0, 0, 0, 0.25) 45%,
		rgba(0, 0, 0, 0) 75%
	);
	z-index: 2;
	pointer-events: none;
}
.nav-card-info { flex: 1; }
.nav-card-label {
	font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--ink-mute); font-weight: 600;
	margin-bottom: 8px;
}
.nav-card h4 {
	font-family: 'Fraunces', serif;
	font-size: 22px; font-weight: 500;
	line-height: 1.1;
	margin-bottom: 4px;
}
.nav-card .pos {
	font-size: 12px; color: var(--brand);
	font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
	.athlete-hero { grid-template-columns: 1fr; gap: 32px; }
	.athlete-image { height: clamp(420px, 70vw, 560px); justify-self: center; }
	.bio-grid { grid-template-columns: 1fr; gap: 40px; }
	.big-stats { grid-template-columns: repeat(2, 1fr); }
	.secondary-stats { grid-template-columns: repeat(2, 1fr); }
	.achievements-grid { grid-template-columns: repeat(2, 1fr); }
	.news-grid { grid-template-columns: 1fr; }
	.cta-grid { grid-template-columns: 1fr; gap: 32px; }
	.hero-ficha-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.info-bar-inner { gap: 14px; padding: 14px 16px 16px; }
	.info-cell strong { font-size: 13px; }
	/* quick-bar: 6 colunas → 3 (2 linhas) */
	.quick-bar-inner { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
	.section, .athlete-hero, .athlete-nav { padding-left: 20px; padding-right: 20px; }
	.athlete-name { font-size: 104px; }
	.big-stats, .secondary-stats, .achievements-grid { grid-template-columns: 1fr; }
	.athlete-nav { grid-template-columns: 1fr; }
	.cta-contact .section { padding: 80px 20px; }
	.hero-bottom { flex-direction: column; gap: 12px; }
	.hero-ficha { padding: 18px 18px; }
	.pitch-card { flex-basis: auto; justify-content: center; padding: 16px; }
	.pitch { max-width: 220px; margin: 0 auto; }
	.pitch-caption { text-align: center; }
	.hero-ficha-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
	.hero-ficha-cell:nth-last-child(-n+3) { border-bottom: 1px dashed rgba(255,255,255,0.1); padding-bottom: 12px; }
	.hero-ficha-cell:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
	.hero-ficha-cell dd { font-size: 18px; }
	.image-info-bar { height: 38%; }
	.info-cell-club { padding-right: 0; border-right: none; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.14); flex-basis: 100%; }
	.info-jersey { right: 18px; }
	.info-jersey .num { font-size: 84px; }
	.info-jersey .lbl { font-size: 9px; letter-spacing: 0.18em; }
	/* quick-bar: 3 colunas → 2 (3 linhas) */
	.quick-bar-inner { grid-template-columns: repeat(2, 1fr); }
	.quick-info { padding: 20px 16px; }
	.quick-info .val { font-size: 22px; }
	/* big-stat: número menor para caber na tela */
	.big-stat .num { font-size: 60px; }
	.big-stat .num .unit { font-size: 22px; }
	.big-stat { padding: 24px 20px; }
	/* conquistas: font menor */
	.achievement .year { font-size: 36px; }
	.achievement h4 { font-size: 18px; }
	/* nav atleta: foto menor */
	.nav-card-img { width: 60px; height: 80px; }
	.nav-card h4 { font-size: 18px; }
	/* seção padding reduzido */
	.section { padding: 64px 20px; }
}

/* ==========================================================
   VÍDEO DE FUNDO DA PÁGINA (opcional, por atleta)
   Fixo atrás de tudo, com véu creme translúcido pra manter
   o tema claro legível. Seções de cor sólida (stats/cta/timeline)
   continuam cobrindo o vídeo — ele aparece nas faixas creme.
   ========================================================== */
/* Vídeo de fundo no TOPO (breadcrumb + hero) — full-bleed na largura da tela,
   atrás do conteúdo. Da ficha pra baixo a página segue 100% original/opaca. */
.athlete-top { position: relative; }
.atleta-bg-video {
	position: absolute;
	top: 0; bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}
/* Breadcrumb sobre o vídeo: fica transparente e acima dele */
.athlete-top.has-bg-video .breadcrumb-bar {
	position: relative;
	z-index: 1;
	background: transparent;
	border-color: transparent;
}
.atleta-bg-video__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.atleta-bg-video__veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(rgba(245, 242, 236, 0.60), rgba(245, 242, 236, 0.60)),
		radial-gradient(circle at 20% 30%, rgba(0, 146, 188, 0.06) 0%, transparent 50%),
		radial-gradient(circle at 80% 70%, rgba(0, 62, 80, 0.06) 0%, transparent 50%);
}
/* Conteúdo do hero acima do vídeo */
.athlete-hero > .hero-info { position: relative; z-index: 1; }
.athlete-hero > .athlete-image { position: relative; }

/* ==========================================================
   3 NÍVEIS DE TRANSPARÊNCIA — nav → breadcrumb → hero
   Nível 1 (mais sólido): nav
   Nível 2 (intermediário): breadcrumb band
   Nível 3 (mais transparente): hero body (veil já definido acima)
   ========================================================== */

/* Nível 1 — nav translúcida sobre o vídeo (sticky, permanece no flow) */
.page-atleta .site-nav,
.page-atleta nav.topnav {
	background: rgba(245, 242, 236, 0.50);
	border-bottom: 1px solid rgba(200, 195, 185, 0.20);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

/* O vídeo sobe ~90px para ficar atrás da nav também.
   athlete-top não tem overflow:hidden, então o vídeo pode extravasar para cima. */
.page-atleta .athlete-top.has-bg-video .atleta-bg-video {
	top: -90px;
	bottom: 0;
}
/* Quando o admin bar do WP está visível, sobe mais 32px */
.admin-bar.page-atleta .athlete-top.has-bg-video .atleta-bg-video {
	top: -122px;
}

/* Nível 2 — breadcrumb: fundo full-width via ::before (o div tem max-width) */
.page-atleta .athlete-top.has-bg-video .breadcrumb-bar {
	background: transparent;
	position: relative;
	z-index: 1;
}
.page-atleta .athlete-top.has-bg-video .breadcrumb-bar::before {
	content: '';
	position: absolute;
	top: 0; bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: rgba(245, 242, 236, 0.30);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(200, 195, 185, 0.15);
	z-index: -1;
	pointer-events: none;
}

/* ===== SEÇÃO MÍDIA — vídeo (~1/3) + galeria (~2/3), MESMA altura ===== */
.media-section { padding-top: 48px; }
.media-split {
	margin-top: 40px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 2.4fr; /* vídeo ~1/3 · galeria ~2/3 */
	gap: 40px;
	align-items: stretch;
}
.media-col { min-width: 0; display: flex; flex-direction: column; }
.media-col-title {
	font-family: 'Archivo', sans-serif;
	font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--ink-mute); font-weight: 700;
	margin: 0 0 16px;
}
/* Vídeo único preenche a largura da coluna; é ele que define a altura da fileira. */
.media-col--videos .videos-grid { display: block; }
/* Galeria estica e ocupa toda a altura restante (= altura do vídeo). */
.media-col--galeria .gallery-marquee {
	flex: 1 1 0;
	min-height: 0;
	margin-top: 0;
	position: relative; /* a faixa (track) fica absoluta dentro daqui */
}
.media-col .media-empty { margin-top: 0; flex: 1 1 auto; }
@media (max-width: 860px) {
	.media-split { grid-template-columns: 1fr; gap: 32px; }
	.media-col { display: block; }
	/* empilhado: galeria volta a ter altura própria */
	.media-col--galeria .gallery-marquee { position: static; }
	.media-col--galeria .gallery-track { position: static; height: auto; }
	.media-col--galeria .gallery-item { height: auto; width: clamp(220px, 70vw, 300px); }
	.media-col--galeria .gallery-item img { width: 100%; height: auto; }
}

/* ===== Estado vazio (vídeos/galeria sem conteúdo) ===== */
.media-empty {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
	padding: 56px 24px;
	border: 1px dashed var(--line);
	border-radius: 16px;
	background: rgba(0, 0, 0, 0.015);
	color: var(--ink-mute);
}
.media-empty svg {
	width: 40px; height: 40px;
	color: var(--brand);
	opacity: 0.7;
}
.media-empty p {
	margin: 0;
	font-family: 'Fraunces', serif;
	font-style: italic;
	font-size: 19px;
	color: var(--ink-soft);
}

/* ========== GALERIA DE FOTOS — slider infinito contínuo ========== */
.gallery-marquee {
	margin-top: 40px;
	overflow: hidden;
	/* fade nas bordas pra entrada/saída suave */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
	/* arrastável: mãozinha + deixa o navegador rolar a página na vertical no touch */
	cursor: grab;
	touch-action: pan-y;
}
.gallery-marquee.is-dragging { cursor: grabbing; }
/* imagens não devem ser "arrastadas" como recurso nativo durante o swipe */
.gallery-item img { -webkit-user-drag: none; user-select: none; }
.gallery-track {
	display: flex;
	width: max-content;
	gap: 16px;
	animation: gallery-scroll 80s linear infinite; /* devagarinho */
	will-change: transform;
	/* Preenche a altura da galeria (= vídeo) sem inflar a altura intrínseca. */
	position: absolute;
	top: 0; left: 0;
	height: 100%;
}
/* pausa ao passar o mouse */
.gallery-marquee:hover .gallery-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	.gallery-track { animation: none; flex-wrap: wrap; }
}
@keyframes gallery-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); } /* exatamente 1 sequência (são 2 cópias) */
}
.gallery-item {
	flex: 0 0 auto;
	height: 100%;          /* mesma altura do vídeo p/ todas as fotos */
	width: auto;           /* largura segue a proporção da imagem (vertical = estreita) */
	overflow: hidden;
	border-radius: 8px;
	background: var(--paper);
	border: 1px solid var(--line);
	cursor: zoom-in;
}
.gallery-item img {
	height: 100%; width: auto;   /* mantém a proporção real, sem cortar */
	display: block;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gallery-item:hover img { transform: scale(1.06); }

/* ========== VÍDEOS (embed YouTube/Vimeo) ========== */
.videos-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
}
.video-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	overflow: hidden;
	background: var(--ink);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}
.video-frame iframe {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	border: 0;
}
.video-item figcaption {
	margin-top: 12px;
	font-family: 'Fraunces', serif;
	font-size: 16px;
	color: var(--ink-soft);
}

/* ========== ATLETA TV — TV card na página + modal com remoto ========== */
.atleta-tv { width: 100%; }
.atleta-tv-stage { position: relative; }

/* Capa única na seção de mídia — abre o modal/carrossel ao clicar. */
.atleta-tv-cover {
	display: block; width: 100%;
	padding: 0; border: 0; background: none;
	cursor: zoom-in; text-align: left;
}

/* Só a TV ativa aparece; as demais ficam acessíveis pelo modal (slides) e dots. */
.atleta-tv-card:not(.is-active) { display: none; }

/* Selo "N vídeos" no canto da TV — sinaliza que há mais de um para navegar. */
.atleta-tv-count {
	position: absolute; top: 14px; right: 14px; z-index: 2;
	display: inline-flex; align-items: center; gap: 5px;
	padding: 4px 9px; border-radius: 999px;
	background: rgba(10,19,24,.78); backdrop-filter: blur(4px);
	font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #fff;
	pointer-events: none;
}
.atleta-tv-count::before {
	content: ''; width: 8px; height: 8px; border-radius: 2px;
	background: var(--brand-light, #4FB8D4);
	box-shadow: 0 0 0 3px rgba(79,184,212,.25);
}

/* Card TV — sizing concreto: 4:3 igualando as fotos */
.atleta-tv-card {
	display: block; width: 100%;
	padding: 0; border: 0; background: none;
	cursor: zoom-in; text-align: left;
}
.atleta-tv-screen {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	overflow: hidden;
	background: #111;
	box-shadow:
		0 0 0 6px #0a1318,
		0 0 0 8px rgba(255,255,255,.07),
		0 18px 50px rgba(0,0,0,.5),
		0 0 40px rgba(79,184,212,.15);
	transition: box-shadow .3s ease, transform .3s ease;
}
.atleta-tv-card:hover .atleta-tv-screen {
	transform: translateY(-3px);
	box-shadow:
		0 0 0 6px #0a1318,
		0 0 0 8px rgba(255,255,255,.1),
		0 24px 60px rgba(0,0,0,.6),
		0 0 60px rgba(79,184,212,.28);
}
.atleta-tv-thumb {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; border: 0;
}
/* play centralizado */
.atleta-tv-play {
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: 60px; height: 60px;
	border-radius: 50%;
	background: rgba(0,0,0,.52);
	backdrop-filter: blur(3px);
	transition: background .25s, transform .25s;
}
.atleta-tv-play::before {
	content: '';
	position: absolute; left: 56%; top: 50%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 10px 0 10px 16px;
	border-color: transparent transparent transparent #fff;
}
.atleta-tv-card:hover .atleta-tv-play {
	background: var(--brand);
	transform: translate(-50%, -50%) scale(1.12);
}
.atleta-tv-label {
	position: absolute; bottom: 0; left: 0; right: 0;
	padding: 24px 12px 10px;
	font-size: 12px; font-weight: 600; color: #fff;
	background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* dots (múltiplos vídeos) */
.atleta-tv-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.atleta-tv-dots .tv-dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: rgba(0,0,0,.2); cursor: pointer;
	transition: background .25s, transform .25s;
}
.atleta-tv-dots .tv-dot.is-active { background: var(--brand); transform: scale(1.4); }

/* ---- Modal TV: backdrop + scene (TV + remoto lado a lado) ---- */
.atleta-tv-modal[hidden] { display: none; }
.atleta-tv-modal {
	position: fixed; inset: 0; z-index: 9999;
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
	pointer-events: none; /* habilitado quando visível */
}
.atleta-tv-modal.is-open { pointer-events: auto; }

/* fundo escuro — aparece durante a animação */
.atv-modal-backdrop {
	position: absolute; inset: 0;
	background: rgba(0,0,0,.88);
	backdrop-filter: blur(5px);
	cursor: pointer;
	opacity: 0;
	transition: opacity .4s ease;
}
.atleta-tv-modal.is-open .atv-modal-backdrop { opacity: 1; }

/* scene: caixa com as mesmas dimensões da TV — remoto fica absoluto dentro dela */
.atv-modal-scene {
	position: relative;
	z-index: 1;
	width: min(880px, 86vw);
	aspect-ratio: 16 / 9;
	overflow: visible;
}

/* A TV expande do tamanho do card até o centro — animação FLIP via CSS vars */
.atv-modal-tv {
	position: absolute;
	inset: 0;
	transform-origin: center center;
	/* começa no tamanho/posição do card */
	transform: translate(var(--atv-dx, 0px), var(--atv-dy, 0px)) scale(var(--atv-s, 0.2));
	opacity: 0;
	/* transição suave ao remover as vars */
	transition: transform .5s cubic-bezier(.22,.68,0,1.2), opacity .3s ease;
	will-change: transform, opacity;
}
.atleta-tv-modal.is-open .atv-modal-tv {
	transform: translate(0, 0) scale(1);
	opacity: 1;
}
/* moldura TV no modal */
.atv-modal-tv::before {
	content: '';
	position: absolute; inset: -7px;
	border-radius: 14px;
	background: #0a1318;
	box-shadow:
		0 0 0 2px rgba(255,255,255,.07),
		0 32px 80px rgba(0,0,0,.7),
		0 0 80px rgba(79,184,212,.2);
	z-index: -1;
}
.atv-modal-embed,
.atv-modal-embed iframe {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	border: 0; border-radius: 10px;
}
/* Troca de canal (prev/next no remoto): fade rápido, sem fechar a TV — efeito "slide". */
.atv-modal-embed { transition: opacity .18s ease; }
.atv-modal-embed.is-switching { opacity: 0; }

/* Vídeos vizinhos espiando dos lados da TV (anterior à esquerda, próximo à direita).
   A .atv-modal-scene tem a largura da TV e overflow visível, então os peeks ficam
   colados nas bordas externas, tucados atrás da TV. Só aparecem com a TV no centro. */
.atv-peek {
	position: absolute; top: 50%; z-index: -1;
	width: 34%; aspect-ratio: 16 / 9;
	padding: 0; border: 0; background: none; cursor: pointer;
	transform: translateY(-50%) scale(.82);
	opacity: 0; pointer-events: none;
	transition: opacity .45s ease .2s, transform .3s ease;
}
.atv-peek--prev { right: calc(100% - 46px); }
.atv-peek--next { left:  calc(100% - 46px); }
.atleta-tv-modal.is-arrived .atv-peek { opacity: .5; pointer-events: auto; }
.atleta-tv-modal.is-arrived .atv-peek:hover { opacity: .85; transform: translateY(-50%) scale(.86); }
.atv-peek-screen {
	position: relative; display: block; width: 100%; height: 100%;
	border-radius: 8px; overflow: hidden; background: #0a1318;
	box-shadow: 0 14px 34px rgba(0,0,0,.5);
}
.atv-peek-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Em telas estreitas não cabe peek dos lados — esconde. */
@media (max-width: 680px) { .atv-peek { display: none; } }

/* ==========================================================
   MODAL TV — carrossel estilo home (TV central + vizinhos
   deslizando dos lados, máscara nas bordas, loop infinito)
   ========================================================== */
.atv-tv-carousel {
	--atv-tv-w: clamp(260px, 46vw, 680px);
	position: relative; z-index: 1;
	width: 100%; max-width: 1280px;
	padding: 0 24px;
	display: flex; flex-direction: column;
	opacity: 0; transform: scale(.985);
	transition: opacity .4s ease, transform .4s ease;
}
.atleta-tv-modal.is-open .atv-tv-carousel { opacity: 1; transform: none; }

.atv-tv-viewport {
	position: relative; overflow: hidden;
	padding: 36px 0 14px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.atv-tv-track {
	display: flex; align-items: center;
	gap: clamp(16px, 2.4vw, 40px);
	transition: transform .6s cubic-bezier(.5, 0, .2, 1);
	will-change: transform;
}
.atv-tv-card {
	flex: 0 0 var(--atv-tv-w); width: var(--atv-tv-w);
	margin: 0; padding: 0; border: 0; background: none;
	cursor: pointer; text-align: left;
	transform: scale(.8); transform-origin: center;
	opacity: .4; filter: saturate(.65);
	transition: transform .6s cubic-bezier(.5, 0, .2, 1), opacity .5s ease, filter .5s ease;
}
.atv-tv-card.is-near { opacity: .65; }
.atv-tv-card.is-active { transform: scale(1); opacity: 1; filter: none; cursor: default; }
.atv-tv-screen {
	position: relative; display: block; aspect-ratio: 16 / 9;
	border-radius: 10px; overflow: hidden; background: #000;
	box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.atv-tv-card.is-active .atv-tv-screen {
	box-shadow: 0 0 0 6px #0a1318, 0 0 0 8px rgba(255,255,255,.08), 0 24px 70px rgba(0,0,0,.6), 0 0 60px rgba(79,184,212,.25);
}
/* escurecimento no canto superior direito (atrás do logo + AO VIVO), igual à home */
.atv-tv-card.is-active .atv-tv-screen::before {
	content: '';
	position: absolute; top: 0; right: 0;
	width: 74%; height: 72%;
	z-index: 1; pointer-events: none;
	opacity: 0; transition: opacity .6s ease;
	background: radial-gradient(80% 84% at 100% 0%, rgba(0,0,0,.8), rgba(0,0,0,.42) 38%, transparent 72%);
}
.atleta-tv-modal.atv-playing .atv-tv-card.is-active .atv-tv-screen::before { opacity: 1; }
.atv-tv-screen img, .atv-tv-screen iframe {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover;
}
.atv-tv-play {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 54px; height: 54px; border-radius: 50%;
	background: rgba(0,0,0,.5); backdrop-filter: blur(3px);
	transition: background .25s, transform .25s, opacity .25s;
}
.atv-tv-play::before {
	content: ''; position: absolute; left: 56%; top: 50%; transform: translate(-50%, -50%);
	border-style: solid; border-width: 9px 0 9px 14px;
	border-color: transparent transparent transparent #fff;
}
.atv-tv-card.is-active .atv-tv-play { opacity: 0; pointer-events: none; }
.atv-tv-card:not(.is-active):hover .atv-tv-play { background: var(--brand); transform: translate(-50%, -50%) scale(1.12); }
.atv-tv-title {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 24px 12px 10px; font-size: 12px; font-weight: 600; color: #fff;
	background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* remoto: overlay irmão sobre a TV central (fora do viewport clipado) */
.atv-stage-overlay {
	position: absolute; top: 36px; left: 50%;
	width: var(--atv-tv-w); height: calc(var(--atv-tv-w) * 9 / 16);
	transform: translateX(-50%);
	pointer-events: none; z-index: 3;
	opacity: 0; transition: opacity .4s ease .25s;
}
.atleta-tv-modal.is-open .atv-stage-overlay { opacity: 1; }
.atv-stage-overlay .atleta-tv-remote {
	position: absolute; right: 8%; bottom: -34%;
	pointer-events: auto;
}

/* timer (canto inferior esquerdo na TV ativa, como na home) */
.atv-tv-dur {
	position: absolute; z-index: 2;
	right: 10px; bottom: 10px;
	display: none;
	padding: 3px 7px; border-radius: 4px;
	font-size: 12px; font-weight: 600; color: #fff;
	background: rgba(0,0,0,.7);
	font-variant-numeric: tabular-nums;
}
.atv-tv-dur:empty { display: none !important; }
.atv-tv-card.is-active .atv-tv-dur { display: block; right: auto; left: 12px; }

/* bug da emissora: logo Pecbol + AO VIVO no canto superior direito (igual à home) */
.atv-tv-bug {
	position: absolute; top: 14px; right: 16px; z-index: 7;
	display: flex; flex-direction: column; align-items: center; gap: 5px;
	pointer-events: none;
	opacity: 0; transform: translateY(-6px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}
.atleta-tv-modal.atv-playing .atv-tv-bug { opacity: 1; transform: translateY(0); }
.atv-tv-logo { width: clamp(50px, 8vw, 84px); filter: drop-shadow(0 2px 5px rgba(0,0,0,.6)); }
.atv-tv-logo img { display: block; width: 100%; height: auto; filter: brightness(0) invert(1); opacity: .92; }
.atv-tv-live {
	display: flex; align-items: center; gap: 5px;
	font-size: 8px; font-weight: 700; letter-spacing: .1em; color: #fff;
	padding: 2px 7px; border-radius: 20px;
	background: rgba(199,62,29,.92);
	filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.atv-tv-live span { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: atv-live-pulse 1.4s ease-in-out infinite; }
@keyframes atv-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* controles abaixo: ‹ · bolinhas · › (setas e dots no estilo da home) */
.atv-tv-controls {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	width: 100%; max-width: var(--atv-tv-w);
	margin: 16px auto 0;
	opacity: 0; transition: opacity .4s ease .25s;
}
.atleta-tv-modal.is-open .atv-tv-controls { opacity: 1; }
.atv-tv-controls .atleta-tv-dots { flex: 1 1 auto; margin-top: 0; }
.atv-tv-controls .tv-dot { background: rgba(255,255,255,.25); }
.atv-tv-controls .tv-dot.is-active { background: var(--brand-light); }
.atv-tv-nav {
	flex: 0 0 auto; padding: 2px 12px;
	border: 0; background: none;
	color: rgba(255,255,255,.5); font-size: 34px; line-height: 1; cursor: pointer;
	transition: color .2s ease, transform .2s ease;
}
.atv-tv-nav:hover { color: #fff; transform: scale(1.18); }
.atv-tv-nav:active { transform: scale(.96); }

/* fechar */
.atv-tv-close {
	position: absolute; top: -2px; right: 16px; z-index: 4;
	width: 42px; height: 42px; border: 0; background: none;
	color: rgba(255,255,255,.72); font-size: 30px; line-height: 1; cursor: pointer;
	transition: color .2s, transform .2s;
}
.atv-tv-close:hover { color: #fff; transform: scale(1.1); }

@media (max-width: 680px) {
	.atv-tv-carousel { --atv-tv-w: 84vw; }
}
/* Remoto no modal — posição idêntica à da home (absoluto, canto inferior direito da TV) */
.atv-modal-remote {
	position: absolute;
	right: 7%;
	bottom: -33%;
	opacity: 0;
	transition: opacity .4s .45s ease;
	pointer-events: none;
}
.atleta-tv-modal.is-arrived .atv-modal-remote {
	opacity: 1;
	pointer-events: auto;
}
/* Remoto: estilos idênticos ao da home */
.atleta-tv-remote {
	width: clamp(58px, 7vw, 88px);
	padding: 13px 0 15px;
	border-radius: 20px;
	background: linear-gradient(158deg, #383d45 0%, #1a1d22 55%, #0b0d10 100%);
	box-shadow: 0 34px 46px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.15), inset 0 -3px 9px rgba(0,0,0,.55);
	transform-origin: bottom center;
	transform: perspective(820px) rotateX(34deg) rotateZ(-17deg);
	display: flex; flex-direction: column; align-items: center; gap: 11px;
	cursor: default;
}
.atleta-tv-remote .tv-remote-power {
	width: 13px; height: 13px; border-radius: 50%;
	border: 0; padding: 0; /* reset <button> */
	background: radial-gradient(circle at 40% 35%, #ff6a5e, #c4261a);
	box-shadow: 0 0 7px rgba(255,59,48,.65), inset 0 -1px 2px rgba(0,0,0,.5);
	cursor: pointer;
	transition: box-shadow .2s ease, transform .15s ease;
}
.atleta-tv-remote .tv-remote-power:hover {
	box-shadow: 0 0 14px rgba(255,59,48,.9), inset 0 -1px 2px rgba(0,0,0,.5);
	transform: scale(1.2);
}
.atleta-tv-remote .tv-remote-numbers {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px 7px; width: 66%;
}
.atleta-tv-remote .tv-remote-numbers span {
	display: flex; align-items: center; justify-content: center;
	height: 13px; border-radius: 4px; font-size: 8px; font-weight: 700;
	color: rgba(255,255,255,.4);
	background: linear-gradient(160deg, #2c3037, #181b1f);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.4);
}
.atleta-tv-remote .tv-remote-controls {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; width: 64%;
}
.atleta-tv-remote .tv-remote-btn {
	display: flex; align-items: center; justify-content: center;
	height: 22px; border-radius: 7px;
	color: rgba(255,255,255,.82); font-size: 16px; line-height: 1;
	cursor: pointer;
	background: linear-gradient(160deg, #3c424b, #20242a);
	box-shadow: 0 1px 0 rgba(255,255,255,.12), 0 2px 3px rgba(0,0,0,.5);
	transition: transform .12s, color .12s, background .12s, box-shadow .12s;
	user-select: none;
}
.atleta-tv-remote .tv-remote-btn:hover { color: #fff; }
.atleta-tv-remote .tv-remote-btn--source:hover { color: #1ab7ea; } /* azul Vimeo */
.atleta-tv-remote .tv-remote-btn.is-pressed {
	background: var(--brand); color: #fff;
	animation: atv-press .48s ease;
}
@keyframes atv-press {
	0%   { transform: scale(1); }
	30%  { transform: scale(.78) translateY(1px); box-shadow: 0 0 18px 3px var(--brand-light); }
	60%  { transform: scale(1.06); }
	100% { transform: scale(1); }
}
.atleta-tv-remote .tv-remote-btn.is-dim { opacity: .35; cursor: default; pointer-events: none; }
/* play/pause: por padrão mostra pause (vídeo tocando); com is-paused mostra play */
.atleta-tv-remote .tv-remote-btn--play .ic { width: 12px; height: 12px; display: block; }
.atleta-tv-remote .tv-remote-btn--play .ic-play { display: none; }
.atleta-tv-remote .tv-remote-btn--play.is-paused .ic-pause { display: none; }
.atleta-tv-remote .tv-remote-btn--play.is-paused .ic-play { display: block; }
/* mute: por padrão mostra mute-off (com som); is-muted mostra mute-on (sem som) */
.atleta-tv-remote .tv-remote-btn--mute .ic { width: 12px; height: 12px; display: block; }
.atleta-tv-remote .tv-remote-btn--mute .ic-mute-on { display: none; }
.atleta-tv-remote .tv-remote-btn--mute.is-muted .ic-mute-off { display: none; }
.atleta-tv-remote .tv-remote-btn--mute.is-muted .ic-mute-on { display: block; }
.atleta-tv-remote .tv-remote-btn--mute.is-muted { color: var(--brand-light); }
.atleta-tv-remote .tv-remote-vol {
	grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
	height: 18px; padding: 0 7px; border-radius: 999px;
	background: linear-gradient(160deg, #2c3037, #181b1f);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 4px rgba(0,0,0,.5);
}
.atleta-tv-remote .tv-remote-volbtn { font-size: 14px; line-height: 1; color: rgba(255,255,255,.72); padding: 0 3px; cursor: pointer; transition: color .15s, transform .12s; user-select: none; }
.atleta-tv-remote .tv-remote-volbtn:hover { color: #fff; }
.atleta-tv-remote .tv-remote-volbtn.is-pressed { color: var(--brand-light); transform: scale(.82); }
.atleta-tv-remote .tv-remote-vollabel { font-size: 6px; font-weight: 800; letter-spacing: .1em; color: rgba(255,255,255,.3); }
.atleta-tv-remote .tv-remote-brand { margin-top: 2px; font-size: 7px; font-weight: 800; letter-spacing: .18em; color: rgba(255,255,255,.35); }

/* remoto oculto no mobile */
@media (max-width: 700px) { .atv-modal-remote { display: none; } }

body.atv-modal-open { overflow: hidden; }

/* ========== LIGHTBOX (galeria) ========== */
.pecbol-lightbox {
	position: fixed; inset: 0;
	z-index: 9999;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, 0.92);
	opacity: 0; visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	padding: 40px;
}
.pecbol-lightbox.is-open { opacity: 1; visibility: visible; }
.pecbol-lightbox img {
	max-width: 92vw; max-height: 88vh;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.pecbol-lightbox__close,
.pecbol-lightbox__nav {
	position: absolute;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	width: 48px; height: 48px;
	border-radius: 50%;
	font-size: 24px; line-height: 1;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.2s;
}
.pecbol-lightbox__close:hover,
.pecbol-lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); }
.pecbol-lightbox__close { top: 24px; right: 24px; }
.pecbol-lightbox__nav.prev { left: 24px; top: 50%; transform: translateY(-50%); }
.pecbol-lightbox__nav.next { right: 24px; top: 50%; transform: translateY(-50%); }

@media (max-width: 880px) {
	.videos-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.gallery-grid { grid-template-columns: repeat(2, 1fr); }
	/* Mobile: desliga o vídeo de fundo (performance/autoplay) e volta ao creme */
	.atleta-bg-video { display: none; }
	body.has-atleta-bg-video { background: var(--bg); }
	.pecbol-lightbox { padding: 16px; }
	.pecbol-lightbox__nav { width: 40px; height: 40px; }
}

/* ========== CTA: botão "Tenho interesse" ========== */
.btn-lead {
	display: inline-flex; align-items: center; gap: 10px;
	margin-top: 26px;
	padding: 15px 28px;
	border: 0; border-radius: 3px;
	background: var(--brand); color: #fff;
	font-size: 15px; font-weight: 600; letter-spacing: .01em;
	cursor: pointer;
	transition: background .25s, transform .2s, gap .25s;
	box-shadow: 0 10px 26px -12px rgba(0,62,80,.6);
}
.btn-lead:hover { background: var(--brand-deep); gap: 14px; transform: translateY(-2px); }
.btn-lead span { transition: transform .25s; }
.btn-lead:hover span { transform: translateX(3px); }

/* ========== MODAL DE INTERESSE (lead) ========== */
.lead-modal[hidden] { display: none; }
.lead-modal {
	position: fixed; inset: 0; z-index: 10000;
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
}
.lead-modal-backdrop {
	position: absolute; inset: 0;
	background: rgba(4,12,16,.6);
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	opacity: 0; transition: opacity .3s ease; cursor: pointer;
}
.lead-modal.is-open .lead-modal-backdrop { opacity: 1; }
.lead-modal-dialog {
	position: relative; z-index: 1;
	width: 100%; max-width: 560px;
	max-height: calc(100vh - 40px); overflow-y: auto;
	background: var(--paper, #fbf9f5);
	border-radius: 10px;
	padding: 36px 34px 30px;
	box-shadow: 0 40px 90px -30px rgba(0,0,0,.5);
	transform: translateY(16px) scale(.98); opacity: 0;
	transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.lead-modal.is-open .lead-modal-dialog { transform: none; opacity: 1; }
.lead-modal-close {
	position: absolute; top: 14px; right: 16px;
	width: 36px; height: 36px; border: 0; background: none;
	color: var(--ink-mute); font-size: 26px; line-height: 1; cursor: pointer;
	transition: color .2s, transform .2s;
}
.lead-modal-close:hover { color: var(--ink); transform: scale(1.1); }
.lead-modal-head { margin-bottom: 22px; }
.lead-modal-head h3 {
	font-family: 'Fraunces', serif; font-size: clamp(24px, 3vw, 30px);
	font-weight: 500; line-height: 1.1; margin: 8px 0 10px;
}
.lead-modal-head h3 em { font-style: italic; color: var(--brand); }
.lead-modal-head p { font-size: 14px; color: var(--ink-mute); line-height: 1.5; margin: 0; }

.lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lead-field { display: flex; flex-direction: column; gap: 6px; }
.lead-field--full { margin-top: 14px; }
.lead-field > span { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--ink-soft, #555); }
.lead-field input, .lead-field textarea {
	width: 100%; padding: 11px 13px;
	border: 1px solid var(--line); border-radius: 6px;
	background: #fff; color: var(--ink);
	font-size: 14px; font-family: inherit;
	transition: border-color .2s, box-shadow .2s;
}
.lead-field input:focus, .lead-field textarea:focus {
	outline: none; border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(0,124,160,.12);
}
.lead-field textarea { resize: vertical; min-height: 70px; }
.lead-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.lead-actions { margin-top: 20px; }
.lead-actions .btn-fill-brand {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 13px 26px; border: 0; border-radius: 4px;
	background: var(--brand); color: #fff;
	font-size: 15px; font-weight: 600; cursor: pointer;
	transition: background .2s;
}
.lead-actions .btn-fill-brand:hover { background: var(--brand-deep); }
.lead-actions .btn-fill-brand:disabled { opacity: .65; cursor: default; }
.lead-btn-sending { display: none; }
.lead-form.is-sending .lead-btn-label { display: none; }
.lead-form.is-sending .lead-btn-sending { display: inline; }

.lead-feedback { margin: 14px 0 0; font-size: 14px; min-height: 1px; }
.lead-feedback.is-ok  { color: #1a7f4b; font-weight: 600; }
.lead-feedback.is-err { color: var(--red, #b3261e); font-weight: 600; }
.lead-form.is-done .lead-grid,
.lead-form.is-done .lead-field--full,
.lead-form.is-done .lead-actions { display: none; }

body.lead-modal-open { overflow: hidden; }

@media (max-width: 560px) {
	.lead-grid { grid-template-columns: 1fr; }
	.lead-modal-dialog { padding: 30px 22px 24px; }
}

/* ===== TESTE: variantes de ícone dos atributos (via ?ic=duotom|chip) ===== */
/* duotom: cor por categoria */
.bio-sidebar.icones-duotom .bio-item-ico.cat-of  { color: var(--brand); }
.bio-sidebar.icones-duotom .bio-item-ico.cat-def { color: #2e8b57; }
.bio-sidebar.icones-duotom .bio-item-ico.cat-fis { color: #c9871f; }
.bio-sidebar.icones-duotom .bio-item-ico.cat-men { color: #7a5bd6; }
.bio-sidebar.icones-duotom .bio-item-ico.cat-gk  { color: #d2491b; }

/* chip: ícone branco dentro de um círculo colorido por categoria */
.bio-sidebar.icones-chip .bio-item-ico {
	width: 15px; height: 15px;
	box-sizing: content-box;
	padding: 6px;
	border-radius: 50%;
	color: #fff;
	background: var(--brand);
}
.bio-sidebar.icones-chip .bio-item-ico.cat-def { background: #2e8b57; }
.bio-sidebar.icones-chip .bio-item-ico.cat-fis { background: #c9871f; }
.bio-sidebar.icones-chip .bio-item-ico.cat-men { background: #7a5bd6; }
.bio-sidebar.icones-chip .bio-item-ico.cat-gk  { background: #d2491b; }