html { scroll-behavior: smooth; }

/* Névoa dourada animada no fundo; reage ao mouse via canvas (ver setupFog em script.js) */
.fog-canvas { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .fog-canvas { display: none; } }
body { background: #0d0d0d; }
.font-title { font-family: 'Teko', sans-serif; }
.font-sub { font-family: 'Oswald', sans-serif; }

.title-slant { transform: skewX(-8deg); }
.glow-text { text-shadow: 0 0 20px rgba(245, 158, 11, .5), 0 0 60px rgba(245, 158, 11, .25); }
.section-title {
  font-family: 'Teko', sans-serif; text-transform: uppercase; font-style: italic;
  font-size: clamp(2.5rem, 7vw, 4.5rem); line-height: 1; transform: skewX(-6deg);
}

.hero {
  background:
    radial-gradient(circle at 50% 40%, rgba(245, 158, 11, .2), transparent 60%),
    linear-gradient(180deg, rgba(0, 0, 0, .6), transparent);
}
.cta { background: radial-gradient(circle at 50% 50%, rgba(245, 158, 11, .15), transparent 70%); }

.nav-link { transition: color .2s; }
.nav-link:hover { color: #f59e0b; }
.social-link { color: #fff; transition: color .2s, filter .2s; display: inline-flex; }
.social-link:hover { color: #f59e0b; filter: drop-shadow(0 0 6px #f59e0b); }

.btn-primary, .btn-outline {
  display: inline-block; padding: .9rem 2rem; font-family: 'Oswald', sans-serif;
  text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
  transform: skewX(-10deg); transition: all .2s;
}
.btn-primary { background: #f59e0b; color: #000; box-shadow: 0 0 20px rgba(245, 158, 11, .5); }
.btn-primary:hover { background: #fff; box-shadow: 0 0 35px rgba(245, 158, 11, .8); }
.btn-outline { border: 2px solid #f59e0b; color: #f59e0b; }
.btn-outline:hover { background: #f59e0b; color: #000; }

.pillar-card {
  border: 1px solid rgba(245, 158, 11, .3); background: #111; padding: 1.5rem;
  text-align: center; transition: all .3s;
}
.pillar-card:hover { border-color: #f59e0b; box-shadow: 0 0 25px rgba(245, 158, 11, .3); transform: translateY(-4px); }
.pillar-card svg { color: #f59e0b; width: 2.5rem; height: 2.5rem; margin: 0 auto .75rem; }
.pillar-card h3 { font-family: 'Teko', sans-serif; font-size: 1.75rem; text-transform: uppercase; font-style: italic; }
.pillar-card p { color: #a3a3a3; font-size: .9rem; }

/* Carrossel "Nosso Time" */
.team-swiper { padding: 2.5rem 0 1rem; overflow: visible; }
.team-swiper .swiper-slide {
  width: min(640px, 86vw); /* largura fixa exigida por slidesPerView: 'auto' */
  height: auto;
  opacity: .45; transform-origin: center; scale: .92;
  will-change: transform, opacity; backface-visibility: hidden;
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1), scale .6s cubic-bezier(.22, .61, .36, 1), border-color .6s ease, box-shadow .6s ease;
}
/* Escurecimento por overlay: animar opacity é bem mais leve que filter: brightness */
.team-swiper .swiper-slide::after {
  content: ''; position: absolute; inset: 0; background: #000; opacity: .45; pointer-events: none;
  transition: opacity .6s ease;
}
.team-swiper .swiper-slide-active { opacity: 1; scale: 1; }
.team-swiper .swiper-slide-active::after { opacity: 0; }
.team-swiper .swiper-wrapper { transition-timing-function: cubic-bezier(.22, .61, .36, 1); }

.player-card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: .75rem;
  background: #111; border: 1px solid rgba(245, 158, 11, .15);
}
.player-card.swiper-slide-active {
  border-color: rgb(245 158 11 / .6); /* border-amber-500/60 */
  box-shadow: 0 0 25px rgba(245, 158, 11, .25);
}
.player-photo { position: relative; flex: none; aspect-ratio: 5 / 4; background: linear-gradient(135deg, #1a1a1a, #000); }
.player-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--photo-pos, center center); filter: grayscale(.3) contrast(1.1); }
.player-info { position: relative; flex: 1; display: flex; flex-direction: column; padding: 1rem 1.25rem 1.25rem; }
.player-number {
  font-family: 'Teko', 'Oswald', sans-serif; font-weight: 700; font-style: italic;
  font-size: clamp(4rem, 12vw, 6.5rem); line-height: .8; color: #f59e0b;
  text-shadow: 0 0 20px rgba(245, 158, 11, .35);
}
.player-name { font-family: 'Teko', sans-serif; font-size: 1.9rem; line-height: 1.1; text-transform: uppercase; font-style: italic; margin-top: .5rem; }
.player-fullname { font-family: 'Oswald', sans-serif; font-size: .8rem; color: #a3a3a3; margin: .1rem 0 .35rem; }
.player-role { font-family: 'Oswald', sans-serif; color: #f59e0b; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; }
.player-meta { display: flex; gap: 1.5rem; margin-top: .75rem; font-family: 'Oswald', sans-serif; }
.player-meta dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: #737373; }
.player-meta dd { font-size: .95rem; color: #e5e5e5; }
.player-quote { display: flex; gap: .5rem; margin-top: auto; padding-top: 1rem; font-style: italic; color: #a3a3a3; font-size: .95rem; }
.player-quote svg { flex: none; width: 1.25rem; height: 1.25rem; color: #f59e0b; }

@media (min-width: 640px) {
  .player-card { flex-direction: row; min-height: 400px; }
  .player-photo { width: 42%; aspect-ratio: auto; }
  .player-photo img { object-position: var(--photo-pos, center top); }
  .player-info { padding: 1.5rem; }
}

/* Controles */
.team-controls { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 1.5rem; }
.nav-arrow {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 3rem; height: 3rem; border-radius: 9999px;
  background: #111; color: #f59e0b; border: 2px solid #f59e0b; transition: all .2s;
}
.nav-arrow:hover { background: #f59e0b; color: #000; box-shadow: 0 0 20px rgba(245, 158, 11, .6); }
.nav-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.team-controls .swiper-pagination { position: static; width: auto; display: flex; gap: .5rem; }
.team-controls .swiper-pagination-bullet {
  width: 1.75rem; height: .25rem; margin: 0 !important; border-radius: 2px;
  background: #fff; opacity: .35; transition: all .3s;
}
.team-controls .swiper-pagination-bullet-active { width: 2.75rem; background: #f59e0b; opacity: 1; box-shadow: 0 0 8px #f59e0b; }
@media (max-width: 639px) {
  .team-controls .nav-arrow { display: none; }
  .team-controls .swiper-pagination { flex-wrap: wrap; justify-content: center; gap: .35rem; }
  .team-controls .swiper-pagination-bullet { width: .75rem; }
  .team-controls .swiper-pagination-bullet-active { width: 1.5rem; }
}

.games-section { background: rgba(0, 0, 0, .28); }
.games-list { max-width: 900px; margin-inline: auto; border-top: 1px solid rgba(245, 158, 11, .28); }
.game-item {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 1.25rem;
  padding: 1.25rem 1rem; border-bottom: 1px solid rgba(245, 158, 11, .2);
}
.game-date { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #f59e0b; font-family: 'Teko', sans-serif; }
.game-day { font-size: 2.75rem; line-height: .85; }
.game-month { margin-top: .35rem; font-size: 1rem; line-height: 1; }
.game-kicker { color: #f59e0b; font-size: .7rem; letter-spacing: .14em; }
.game-opponent { font-family: 'Teko', sans-serif; font-size: 1.8rem; line-height: 1.1; text-transform: uppercase; }
.game-competition { color: #d4d4d4; font-size: .9rem; }
.game-facts { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .5rem; color: #a3a3a3; font-size: .85rem; }
.game-map { color: #f59e0b; font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: .8rem; white-space: nowrap; }
.game-map:hover { color: #fff; }
.games-empty { padding: 2rem 1rem; text-align: center; color: #a3a3a3; }
@media (max-width: 639px) {
  .game-item { grid-template-columns: 56px minmax(0, 1fr); gap: .85rem; padding: 1rem .25rem; }
  .game-date { grid-row: span 2; }
  .game-day { font-size: 2.25rem; }
  .game-opponent { font-size: 1.5rem; }
  .game-map { grid-column: 2; justify-self: start; }
}

.gallery-item { overflow: hidden; border: 1px solid rgba(245, 158, 11, .2); background: #111; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s, filter .4s; filter: grayscale(.5); }
.gallery-item:hover img { transform: scale(1.08); filter: grayscale(0); }
.gallery-item { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; margin: auto; padding: 0; border: 0; background: transparent;
  max-width: 95vw; max-height: 95vh; overflow: visible;
}
.lightbox::backdrop { background: rgba(0, 0, 0, .88); backdrop-filter: blur(4px); }
.lightbox-img {
  display: block; max-width: 95vw; max-height: 90vh; object-fit: contain;
  border: 1px solid rgba(245, 158, 11, .6); box-shadow: 0 0 25px rgba(245, 158, 11, .25);
}
.lightbox-close {
  position: absolute; top: .5rem; right: .5rem; width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  background: #111; color: #f59e0b; border: 2px solid #f59e0b; font-size: 1.5rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.lightbox-close:hover { background: #f59e0b; color: #000; }
.gallery-item:hover { box-shadow: 0 0 25px rgba(245, 158, 11, .5); }