/* ========== RESET GENERAL ========== */
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#e9edf2;
  color:#111827;
}
img{display:block;max-width:100%;}
button{border:none;background:none;font:inherit;cursor:pointer;}

/* ========== LAYOUT ========== */
.page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* Le bajo el padding lateral para que el banner NO quede tan metido */
.page-inner{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:20px 8px 40px;  /* ANTES 20px 16px 40px */
}

/* ========== HEADER ========== */
.header{
  background:#050608;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.header-inner{
  width:100%;
  max-width:1200px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.changing-logo{
  width:120px;
  height:auto;
  fill:white;
}

/* ========== MENÚ ========== */
.hamburger{
  width:28px;height:22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  cursor:pointer;
}
.hamburger span{
  height:3px;border-radius:999px;background:white;
}

.side-menu{
  position:fixed;top:64px;right:0;bottom:0;width:240px;
  background:#050608;color:white;padding:16px;
  transform:translateX(100%);
  transition:.2s ease;
  z-index:50;
}
.side-menu.open{transform:translateX(0);}
.side-menu h3{
  font-size:.9rem;margin-bottom:10px;opacity:.8;
  text-transform:uppercase;letter-spacing:.12em;
}
.side-menu li{
  padding:6px 0;font-size:.9rem;
  border-bottom:1px solid rgba(255,255,255,.05);
}

/* ========== TABS (ESTILO FANKI) ========== */
.toggle-group{
  display:inline-flex;
  background:#f1f4f9;
  padding:6px;
  border-radius:40px;
  margin:20px auto;
  gap:8px;
}
.toggle-btn{
  padding:10px 22px;
  font-size:14px;
  border-radius:30px;
  background:#f1f4f9;
  cursor:pointer;
  color:#333;
  transition:.25s ease;
}
.toggle-btn:hover{background:#e5e8ee;}
.toggle-btn.active{
  background:#0c1120;
  color:white;
  box-shadow:0 4px 10px rgba(0,0,0,.3);
}

/* === CARRUSEL PRINCIPAL EXACTO COMO FANKI === */
.main-carousel {
    width: 100%;
    max-width: 1240px;    /* Fanki usa ~1216px + padding */
    height: 225px;        /* coincide con los 221-225px reales */
    margin: 0 auto 25px;  /* centrado, margen inferior */
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: #000;
}

.carousel-track {
    display: flex;
    height: 100%;
    transition: transform .45s ease;
}

.carousel-slide {
    min-width: 100%;
    height: 100%;
    position: relative;
}

.banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* en pantallas grandes, ensancho un poquito más como Fanki */
@media (min-width: 1024px){
  .main-carousel{
    max-width:1300px;
  }
}

.carousel-track{
  display:flex;
  height:100%;
  transition:transform .4s ease;
}

.carousel-slide{
  min-width:100%;
  height:100%;
  position:relative;
}

.carousel-slide{display:flex;align-items:center;justify-content:center}
.banner-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;     /* cubre todo el recuadro, sin franjas */
  object-position:center;
}

/* ========== CARRUSEL EQUIPOS ========== */
.teams-section{margin-top:22px;}
.teams-strip{
  display:flex;align-items:center;gap:10px;
}
.teams-arrow{
  width:28px;height:28px;border-radius:999px;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15);
  display:flex;align-items:center;justify-content:center;
}
.teams-track-wrapper{
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  flex:1;
}
.teams-track-wrapper::-webkit-scrollbar{display:none;}
.teams-track{
  display:inline-flex;gap:36px;align-items:center;padding:10px 4px;
}
.team-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  min-width:80px;
}
.team-logo{
  width:70px;height:70px;border-radius:999px;
  background:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.1rem;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
}
.team-name{font-size:.85rem;color:#374151;text-align:center;}

/* ========== TARJETAS ABONOS ========== */
.section-title{
  font-size:1.2rem;font-weight:700;
  margin-top:28px;margin-bottom:12px;color:#111827;
}
.cards-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.card-pass{
  background:#fff;border-radius:14px;
  overflow:hidden;box-shadow:0 2px 5px rgba(15,23,42,.08);
  display:flex;flex-direction:column;
}
.card-pass-img{
  height:90px;background-size:cover;background-position:center;
}
.bg-red{background-image:linear-gradient(120deg,#7f1d1d,#b91c1c);}
.bg-green{background-image:linear-gradient(120deg,#064e3b,#16a34a);}
.bg-black{background-image:linear-gradient(120deg,#020617,#4b5563);}
.card-pass-body{padding:10px 12px;}
.card-pass-title{font-size:.9rem;font-weight:600;}
.card-pass-sub{font-size:.8rem;color:#6b7280;}

/* ========== FOOTER ========== */
.footer{
  margin-top:auto;padding:18px 16px;background:#050608;
  color:#9ca3af;font-size:.8rem;text-align:center;
}

/* ========== RESPONSIVE ========== */
@media(max-width:992px){
  .cards-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .cards-grid{grid-template-columns:1fr;}
  .main-carousel{height:220px;}
}
/* Sección general */
.teams-section {
  width: 100%;
  padding: 25px 0 10px;
  background: #e9edf3;
  display: flex;
  justify-content: center;
}

/* Contenedor completo del carrusel */
.teams-strip {
  width: 100%;
  max-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

/* Flechas */
.teams-arrow {
  background: #fff;
  border: none;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0px 3px 6px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.teams-arrow span {
  font-size: 18px;
  font-weight: bold;
}

/* Contenedor visible del carrusel */
.teams-track-container {
  overflow: hidden;
  width: 80%;               /* <-- EL SECRETO: aquí decides qué tan centrado queda */
}

/* Track que se desplaza */
.teams-track {
  display: flex;
  gap: 40px;
  transition: transform 0.3s ease;
}

/* Cada equipo */
.team-item {
  text-align: center;
  min-width: 110px;
}

.team-logo {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 24px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.team-name {
  margin-top: 8px;
  display: block;
  font-size: 14px;
  font-weight: 500;
}
/* ============================
   TARJETAS DE ABONOS COMPACTAS
=============================== */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 12px;
}

.card-pass {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(15,23,42,.10);
}

.card-pass-img {
    width: 100%;
    height: 120px; /* ANTES 140px */
    background-size: cover;
    background-position: center;
}

.card-pass-body {
    padding: 8px 10px; /* MÁS COMPACTO */
}

.card-pass-title {
    font-size: 0.85rem;   /* MÁS CHICO */
    font-weight: 700;
    margin-bottom: 2px;
}

.card-pass-sub {
    font-size: 0.75rem;
    color: #6b7280;
}

@media(max-width: 992px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 640px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }
    .card-pass-img {
        height: 150px;
    }
}
/* 🚀 Footer responsivo igual al original Fankii */

/* PC y tablets */
.footer-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}

/* TABLET mediano */
@media (max-width: 900px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
    text-align: left;
  }

  /* Mantener logo alineado a la izquierda */
  .footer-left {
    grid-column: span 2;
  }
}

/* 📱 TELÉFONO (como Fankii) — NO UNA COLUMNA */
@media (max-width: 600px) {
  .footer-container {
    grid-template-columns: 1fr 1fr; /* 💥 Así sí queda igual al original */
    text-align: left;
    gap: 25px;
  }

  /* El logo se queda solo arriba a la izquierda */
  .footer-left {
    grid-column: span 2;
  }

  /* Columnas normales, no centradas */
  .footer-col {
    text-align: left;
  }

  /* Copyright centrado */
  .footer-copy {
    text-align: left;
    margin-top: 15px;
    font-size: 13px;
  }

  /* Logo y redes igual que Fankii */
  .footer-left-top {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
}
  /* ========== FIX PARA BORRAR LA BARRA NEGRA ========== */

footer,
.footer,
.footer-container {
  background: #eef2f6 !important;   /* fondo correcto */
  color: #111 !important;           /* texto correcto */
}

.footer a {
  color: #111 !important;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

ul {
  list-style: none !important;  /* quita puntos • que se te ven */
  padding: 0;
  margin: 0;
}
.banner-link {
  display: block;
  width: 100%;
}
.banner-link img {
  width: 100%;
  border-radius: 12px;
}
.nota-evento {
  background: #f5faff;
  border: 1px solid #d6e7ff;
  padding: 15px 20px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #2c3e50;
  max-width: 450px;

  /* 🔥 ESTA ES LA LÍNEA IMPORTANTE 🔥 */
  margin: 25px auto 20px auto;

  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
}

.nota-evento .nota-titulo {
  font-weight: 600;
  color: #1a3d6d;
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
}