:root {
            --primary-color: #1a1a2e;
            --secondary-color: #16213e;
            --accent-color: #0f3460;
            --text-color: #e6e6e6;
            --highlight-color: #e94560;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--primary-color);
            color: var(--text-color);
            line-height: 1.6;
        }/* Fondo y padding del menú */
#Menu {
    background-color: #002244;
    padding: 10px 0;
}

/* Lista en línea */
#Menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 20px;
    overflow-x: auto;
}

/* Ítems del menú */
#Menu ul li {
    font-size: 14px;
    white-space: nowrap;
}

/* Enlaces menú: color visible, padding, transición */
#Menu ul li a {
    color: #24629c; /* color claro para visibilidad */
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Al pasar el cursor */
#Menu ul li a:hover {
    background-color: #0099ff; /* azul más vivo */
    color: #fff; /* texto blanco */
    box-shadow: 0 0 8px rgba(0, 153, 255, 0.7); /* brillo sutil */
    cursor: pointer;
}





        
        /* Header */
        header {
            background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
            padding: 2rem 0;
            text-align: center;
            position: relative;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
        
        header h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            text-transform: uppercase;
            letter-spacing: 3px;
        }
        
        header p {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 800px;
            margin: 0 auto;
            padding: 0 1rem;
        }
        
        /* Menú Principal */
        .club-menu {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 2rem;
            padding: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .club-card {
            background: var(--secondary-color);
            border-radius: 8px;
            overflow: hidden;
            width: 280px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .club-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(230, 197, 197, 0.4);
        }
        
        .club-card img {
            width: 100%;
            height: 160px;
            object-fit: cover;
            border-bottom: 4px solid var(--highlight-color);
        }
        
        .club-card-content {
            padding: 1.5rem;
        }
        
        .club-card h3 {
            color: var(--highlight-color);
            margin-bottom: 0.5rem;
            font-size: 1.5rem;
        }
        
        .club-card p {
            margin-bottom: 1rem;
            font-size: 0.9rem;
            opacity: 0.9;
        }
        
        .btn {
            display: inline-block;
            background: var(--highlight-color);
            color: white;
            padding: 0.6rem 1.2rem;
            border-radius: 4px;
            text-decoration: none;
            transition: background 0.3s ease;
        }
        
        .btn:hover {
            background: #105d10;
        }
        
        /* Secciones de Clubes */
/* Estilo inspirado en el diseño de Alemania, adaptado para FC Barcelona */

/* Fondo general y tipografía */
.barcelona-body {
  background-color: #f2f2f2;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Sección principal con borde lateral azulgrana */
.barcelona-section {
  max-width: 900px;
  margin: 40px auto;
  padding: 30px;
  background-color: #ffffff;
  border-left: 10px solid #A50044; /* Granate Barça */
  box-shadow: 0 4px 12px rgba(252, 4, 4, 0.916);
  border-radius: 8px;
}

/* Título principal con borde inferior dorado */
.barcelona-section h2 {
  font-size: 26px;
  color: #A50044;
  margin-bottom: 15px;
  border-bottom: 2px solid #FDB913;
  padding-bottom: 5px;
}

/* Listas con nombres resaltados en granate oscuro */
.barcelona-section ul li strong {
  color: #800033;
}

/* Footer sobrio con fondo azul oscuro */
.barcelona-footer {
  background-color: #1c1f56;
  color: white;
  text-align: center;
  padding: 1rem;
  font-size: 0.95rem;
  margin-top: 3rem;
}

/* Navegación con gradiente azul-granate-dorado */
.barcelona-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  gap: 20px;
  background: linear-gradient(to right, #1c1f56, #A50044, #FDB913);
  border-top: 3px solid #1c1f56;
  margin-top: 40px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  flex-wrap: wrap;
  border-radius: 0 0 8px 8px;
}

/* Botones */
.barcelona-arrow,
.barcelona-home {
  text-decoration: none;
  font-weight: bold;
  font-family: 'Segoe UI', sans-serif;
  color: #1a1a1a;
  background-color: #f8f8f8;
  padding: 12px 20px;
  border-radius: 8px;
  border: 2px solid #d2d2d2;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  display: inline-block;
}

.barcelona-arrow:hover,
.barcelona-home:hover {
  background-color: #A50044;
  color: #ffffff;
  transform: scale(1.05);
}

/* Estilo alternativo para Real Madrid */

/* Fondo general y tipografía */
.madrid-body {
  background-color: #fafafa;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Sección principal con borde lateral dorado y sombra azul */
.madrid-section {
  max-width: 920px;
  margin: 50px auto;
  padding: 32px;
  background-color: #ffffff;
  border-left: 12px solid #ffd700; /* Dorado Real Madrid */
  box-shadow: 0 8px 18px rgba(0, 38, 84, 0.12); /* Sombra azul marino */
  border-radius: 12px;
}

/* Título principal con borde decorativo */
.club-header h2 {
  font-size: 30px;
  text-align: center;
  color: #002654; /* Azul marino */
  margin-bottom: 24px;
  border-bottom: 3px dashed #ffd700;
  padding-bottom: 12px;
}

/* Escudo del club */
.club-badge {
  width: 100px;
  height: auto;
  display: block;
  margin: 10px auto 20px;
}

/* Subtítulos con línea dorada */
.club-content h3 {
  color: #002654;
  margin-top: 28px;
  border-left: 6px solid #ffd700;
  padding-left: 12px;
  font-size: 22px;
}

/* Párrafos */
.club-content p {
  line-height: 1.75;
  margin-bottom: 16px;
  color: #222222;
}

/* Listas */
.club-content ul {
  padding-left: 24px;
}

.club-content ul li {
  margin-bottom: 12px;
  font-weight: 500;
  color: #fe0808;
}

/* Imagen del estadio */
.stadium-image {
  width: 100%;
  height: auto;
  margin-top: 24px;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

/* Botón de regreso */
.btn.back-btn {
  display: inline-block;
  margin-top: 32px;
  padding: 14px 26px;
  background-color: #ffd700;
  color: #002654;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.btn.back-btn:hover {
  background-color: #e0bc00;
  transform: scale(1.07);
}




/* Estilo exclusivo para Manchester United */

/* Fondo general y tipografía */
.united-body {
  background-color: #f3f3f3;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Sección principal con borde lateral rojo intenso */
.united-section {
  max-width: 900px;
  margin: 40px auto;
  padding: 30px;
  background-color: #ffffff;
  border-left: 10px solid #d6001c; /* Rojo United */
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  border-radius: 10px;
}

/* Título principal con borde inferior oscuro */
.club-header h2 {
  font-size: 28px;
  text-align: center;
  color: #000000;
  margin-bottom: 20px;
  border-bottom: 2px solid #d6001c;
  padding-bottom: 10px;
}

/* Escudo del club */
.club-badge {
  width: 90px;
  height: auto;
  display: block;
  margin: 15px auto;
}

/* Subtítulos con línea decorativa roja */
.club-content h3 {
  color: #d6001c;
  margin-top: 30px;
  border-left: 4px solid #000000;
  padding-left: 10px;
}

/* Párrafos del contenido */
.club-content p {
  line-height: 1.7;
  margin-bottom: 15px;
  color: #f3f2f2;
}

/* Listas con estilo sobrio */
.club-content ul {
  padding-left: 20px;
}

.club-content ul li {
  margin-bottom: 10px;
  font-weight: 500;
  color: #f9f4f4;
}

/* Imagen del estadio */
.stadium-image {
  width: 100%;
  height: auto;
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Botón de regreso */
.btn.back-btn {
  display: inline-block;
  margin-top: 30px;
  padding: 12px 24px;
  background-color: #d6001c;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background 0.3s ease;
}

.btn.back-btn:hover {
  background-color: #9b0014;
  transform: scale(1.05);
}

/* Estilo personalizado para Juventus Football Club */

/* Fondo general y tipografía */
.juventus-body {
  background-color: #eeeeee;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Sección principal con borde lateral negro */
.juventus-section {
  max-width: 900px;
  margin: 40px auto;
  padding: 30px;
  background-color: #ffffff;
  border-left: 10px solid #000000;
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  border-radius: 10px;
}

/* Título principal */
.club-header h2 {
  font-size: 28px;
  text-align: center;
  color: #000000;
  margin-bottom: 20px;
  border-bottom: 2px solid #f3f1f1;
  padding-bottom: 10px;
}

/* Escudo del club */
.club-badge {
  width: 85px;
  height: auto;
  display: block;
  margin: 15px auto;
}

/* Subtítulos con decorativo plateado */
.club-content h3 {
  color: #1a1a1a;
  margin-top: 30px;
  border-left: 4px solid #bbbbbb;
  padding-left: 10px;
}

/* Párrafos */
.club-content p {
  line-height: 1.7;
  margin-bottom: 15px;
  color: #f0ecec;
}

/* Listas de leyendas y logros */
.club-content ul {
  padding-left: 20px;
}

.club-content ul li {
  margin-bottom: 10px;
  font-weight: 500;
  color: #f5f2f2;
}

/* Imagen del estadio */
.stadium-image {
  width: 100%;
  height: auto;
  margin-top: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Botón de regreso */
.btn.back-btn {
  display: inline-block;
  margin-top: 30px;
  padding: 12px 24px;
  background-color: #000000;
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background 0.3s ease;
}

.btn.back-btn:hover {
  background-color: #444444;
  transform: scale(1.05);
}

/* Estilo personalizado para River Plate */

/* Fondo general y tipografía */
.river-body {
  background-color: #f9f9f9;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Sección principal con borde lateral rojo intenso */
.river-section {
  max-width: 900px;
  margin: 40px auto;
  padding: 30px;
  background-color: #ffffff;
  border-left: 10px solid #d1001c; /* Rojo River */
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  border-radius: 10px;
}

/* Título principal con borde inferior */
.club-header h2 {
  font-size: 28px;
  text-align: center;
  color: #d1001c;
  margin-bottom: 20px;
  border-bottom: 2px solid #000000;
  padding-bottom: 10px;
}

/* Escudo del club */
.club-badge {
  width: 90px;
  height: auto;
  display: block;
  margin: 15px auto;
}

/* Subtítulos con decorativo negro */
.club-content h3 {
  color: #d1001c;
  margin-top: 30px;
  border-left: 4px solid #000000;
  padding-left: 10px;
}

/* Párrafos */
.club-content p {
  line-height: 1.7;
  margin-bottom: 15px;
  color: #f3ecec;
}

/* Listas */
.club-content ul {
  padding-left: 20px;
}

.club-content ul li {
  margin-bottom: 10px;
  font-weight: 500;
  color: #faf6f6;
}

/* Imagen del estadio */
.stadium-image {
  width: 100%;
  height: auto;
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Botón de regreso */
.btn.back-btn {
  display: inline-block;
  margin-top: 30px;
  padding: 12px 24px;
  background-color: #d1001c;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background 0.3s ease;
}

.btn.back-btn:hover {
  background-color: #800012;
  transform: scale(1.05);
}

/* Estilo personalizado para Borussia Dortmund */

/* Fondo general y tipografía */
.dortmund-body {
  background-color: #f5f5f5;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Sección principal con borde lateral amarillo */
.dortmund-section {
  max-width: 900px;
  margin: 40px auto;
  padding: 30px;
  background-color: #ffffff;
  border-left: 10px solid #FFD700; /* Amarillo Dortmund */
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  border-radius: 10px;
}

/* Título principal con borde inferior negro */
.club-header h2 {
  font-size: 28px;
  text-align: center;
  color: #FFD700;
  margin-bottom: 20px;
  border-bottom: 2px solid #000000;
  padding-bottom: 10px;
}

/* Escudo del club (si lo agregas visualmente) */
.club-badge {
  width: 90px;
  height: auto;
  display: block;
  margin: 15px auto;
}

/* Subtítulos decorativos */
.club-content h3 {
  color: #000000;
  margin-top: 30px;
  border-left: 4px solid #FFD700;
  padding-left: 10px;
}

/* Párrafos */
.club-content p {
  line-height: 1.7;
  margin-bottom: 15px;
  color: #f9f3f3;
}

/* Listas */
.club-content ul {
  padding-left: 20px;
}

.club-content ul li {
  margin-bottom: 10px;
  font-weight: 500;
  color: #fbf7f7;
}

/* Imagen del estadio */
.stadium-image {
  width: 100%;
  height: auto;
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Botón de regreso */
.btn.back-btn {
  display: inline-block;
  margin-top: 30px;
  padding: 12px 24px;
  background-color: #FFD700;
  color: #000000;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background 0.3s ease;
}

.btn.back-btn:hover {
  background-color: #e0b800;
  transform: scale(1.05);
}

/* Estilo personalizado para AC Milan */

/* Fondo general y tipografía */
.milan-body {
  background-color: #f4f4f4;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Sección principal con borde lateral rojo intenso */
.milan-section {
  max-width: 900px;
  margin: 40px auto;
  padding: 30px;
  background-color: #ffffff;
  border-left: 10px solid #aa0000; /* Rojo Milan */
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  border-radius: 10px;
}

/* Título principal con borde inferior negro */
.club-header h2 {
  font-size: 28px;
  text-align: center;
  color: #aa0000;
  margin-bottom: 20px;
  border-bottom: 2px solid #000000;
  padding-bottom: 10px;
}

/* Escudo del club */
.club-badge {
  width: 90px;
  height: auto;
  display: block;
  margin: 15px auto;
}

/* Subtítulos con decorativo negro */
.club-content h3 {
  color: #aa0000;
  margin-top: 30px;
  border-left: 4px solid #000000;
  padding-left: 10px;
}

/* Párrafos del contenido */
.club-content p {
  line-height: 1.7;
  margin-bottom: 15px;
  color: #f2ecec;
}

/* Listas de leyendas y logros */
.club-content ul {
  padding-left: 20px;
}

.club-content ul li {
  margin-bottom: 10px;
  font-weight: 500;
  color: #f2f0f0;
}

/* Imagen del estadio */
.stadium-image {
  width: 100%;
  height: auto;
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Botón de regreso */
.btn.back-btn {
  display: inline-block;
  margin-top: 30px;
  padding: 12px 24px;
  background-color: #aa0000;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background 0.3s ease;
}

.btn.back-btn:hover {
  background-color: #700000;
  transform: scale(1.05);
}

/* Estilo personalizado para Inter de Milán */

/* Fondo general y tipografía */
.inter-body {
  background-color: #f0f0f0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Sección principal con borde lateral azul oscuro */
.inter-section {
  max-width: 900px;
  margin: 40px auto;
  padding: 30px;
  background-color: #ffffff;
  border-left: 10px solid #003399; /* Azul Inter */
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  border-radius: 10px;
}

/* Título principal con borde inferior negro */
.club-header h2 {
  font-size: 28px;
  text-align: center;
  color: #003399;
  margin-bottom: 20px;
  border-bottom: 2px solid #000000;
  padding-bottom: 10px;
}

/* Escudo del club (si lo agregas) */
.club-badge {
  width: 90px;
  height: auto;
  display: block;
  margin: 15px auto;
}

/* Subtítulos con decorativo azul oscuro */
.club-content h3 {
  color: #000000;
  margin-top: 30px;
  border-left: 4px solid #003399;
  padding-left: 10px;
}

/* Párrafos del contenido */
.club-content p {
  line-height: 1.7;
  margin-bottom: 15px;
  color: #fcf6f6;
}

/* Listas */
.club-content ul {
  padding-left: 20px;
}

.club-content ul li {
  margin-bottom: 10px;
  font-weight: 500;
  color: #f0ecec;
}

/* Imagen del estadio */
.stadium-image {
  width: 100%;
  height: auto;
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Botón de regreso */
.btn.back-btn {
  display: inline-block;
  margin-top: 30px;
  padding: 12px 24px;
  background-color: #003399;
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background 0.3s ease;
}

.btn.back-btn:hover {
  background-color: #001f66;
  transform: scale(1.05);
}

/* Estilo personalizado para Santos FC */

/* Fondo general y tipografía */
.santos-body {
  background-color: #f8f8f8;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Sección principal con borde lateral negro */
.santos-section {
  max-width: 900px;
  margin: 40px auto;
  padding: 30px;
  background-color: #ffffff;
  border-left: 10px solid #000000; /* Negro Santos */
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  border-radius: 10px;
}

/* Título principal con borde inferior gris oscuro */
.club-header h2 {
  font-size: 28px;
  text-align: center;
  color: #000000;
  margin-bottom: 20px;
  border-bottom: 2px solid #555555;
  padding-bottom: 10px;
}

/* Escudo del club */
.club-badge {
  width: 90px;
  height: auto;
  display: block;
  margin: 15px auto;
}

/* Subtítulos con decorativo negro */
.club-content h3 {
  color: #000000;
  margin-top: 30px;
  border-left: 4px solid #999999;
  padding-left: 10px;
}

/* Párrafos del contenido */
.club-content p {
  line-height: 1.7;
  margin-bottom: 15px;
  color: #f3ecec;
}

/* Listas */
.club-content ul {
  padding-left: 20px;
}

.club-content ul li {
  margin-bottom: 10px;
  font-weight: 500;
  color: #eee8e8;
}

/* Imagen del estadio */
.stadium-image {
  width: 100%;
  height: auto;
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Botón de regreso */
.btn.back-btn {
  display: inline-block;
  margin-top: 30px;
  padding: 12px 24px;
  background-color: #000000;
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background 0.3s ease;
}

.btn.back-btn:hover {
  background-color: #333333;
  transform: scale(1.05);
}

.btn:hover {
    background-color: #A50034; /* Darker shade on hover */
    color: white;
}
.club-content h3 {
  color: #f12c46eb; /* Rojo intenso */
  margin-top: 30px;
  border-left: 4px solid #000000;
  padding-left: 10px;
}

        
        .club-section:target {
            display: block;
            animation: fadeIn 0.5s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .club-header {
            text-align: center;
            margin-bottom: 2rem;
        }
        
        .club-header h2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: var(--highlight-color);
        }
        
        .club-badge {
            width: 150px;
            height: 150px;
            margin: 0 auto 1rem;
            display: block;
        }
        
        .club-content {
            background: var(--secondary-color);
            border-radius: 8px;
            padding: 2rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .club-history, .club-legends, .club-achievements, .club-stadium {
            margin-bottom: 2rem;
        }
        
        .club-history h3, .club-legends h3, .club-achievements h3, .club-stadium h3 {
            color: var(--highlight-color);
            margin-bottom: 1rem;
            font-size: 1.8rem;
            border-bottom: 2px solid var(--accent-color);
            padding-bottom: 0.5rem;
        }
        
        .club-legends ul, .club-achievements ul {
            margin-left: 2rem;
        }
        
        .club-legends li, .club-achievements li {
            margin-bottom: 0.5rem;
        }
        
        .stadium-image {
            width: 100%;
            height: 400px;
            object-fit: cover;
            border-radius: 8px;
            margin-top: 1rem;
            border: 4px solid var(--accent-color);
        }
        
        .back-btn {
            display: block;
            text-align: center;
            margin: 2rem auto;
            max-width: 200px;
        }
        
        /* Footer */
        footer {
            background: var(--secondary-color);
            text-align: center;
            padding: 2rem;
            margin-top: 3rem;
            border-top: 1px solid var(--accent-color);
        }
        
        footer p {
            opacity: 0.8;
            font-size: 0.9rem;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .club-menu {
                flex-direction: column;
                align-items: center;
            }
            
            .club-card {
                width: 100%;
                max-width: 400px;
            }
            
            .stadium-image {
                height: 250px;
            }
        }