/* ========================================================================= */
/* Todo o seu CSS unificado abaixo */
/* ========================================================================= */

:root {
--cor-primaria: #0d6efd;
--cor-secundaria: #80dfff;
--cor-primaria-escura: #0054e3;
--cor-secundaria-escura: #66c5e5;
--cor-primaria-clara: #2687ff;
--cor-secundaria-clara: #99f8ff;
--cor-texto-primaria: white;
--cor-texto-secundaria: black;
--cor-hover-texto-secundaria: #444444;
}

body {
font-family: 'Roboto', sans-serif;
}

header {
text-align: center;
padding: 20px 0;
background: rgba(0, 0, 0, 0.7);
color: var(--cor-texto-primaria);
text-shadow: 2px 2px 4px #000;
background-color: var(--cor-primaria);
min-height: 33vh;
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
}

header h1 {
font-size: clamp(2rem, 5vw, 4.5em);
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
outline: none;
white-space: nowrap;
line-height: 1.5;
}

header p {
color: var(--cor-texto-primaria);
font-size: clamp(1rem, 2vw, 1.5rem);
}

@media (max-width: 992px) {
.player-image {
height: 180px;
top: 120px;
}
.player-arrascaeta { left: 5%; }
.player-cr7 { left: 20%; }
.player-messi { right: 20%; }
.player-mbappe { right: 5%; }
}

.logo-container {
position: relative;
display: flex;
width: clamp(70px, 10vw, 120px);
height: clamp(70px, 10vw, 120px);
margin: 0 auto;
align-items: center;
justify-content: center;
}

.logo-container:hover::before {
animation: rotate 1s linear infinite;
}

.logo-container.clicked .logodosite {
transform: scale(1.2);
transition: transform 0.3s ease;
}

.logodosite {
width: 100%;
height: 100%;	
border: 4px inset var(--cor-primaria);
background: linear-gradient(145deg, #e6f0ff, #f8f9fa);
transition: background 0.4s ease;
border-radius: 50%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
filter: brightness(1.1) contrast(1.2) saturate(1.2);
transition: box-shadow 0.3s ease-in-out;
}

@media (max-width: 768px) {
header {
min-height: auto;
padding: 10px 0;
}

header h1 {
font-size: 1.8rem;
line-height: 1.3;
}

header p {
font-size: 0.9rem;
}

.player-image {
height: 50px;
top: 40px;
}
}

@media (max-width: 576px) {
.logo-container {
width: clamp(60px, 15vw, 90px);
height: clamp(60px, 15vw, 90px);
}
}

.brilho {
background: -webkit-linear-gradient(90deg, var(--cor-primaria),var(--cor-secundaria),var(--cor-primaria-escura));
background: linear-gradient(90deg, var(--cor-primaria),var(--cor-secundaria),var(--cor-primaria-escura));
}

.logo-container::before {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 5px inset transparent;
border-top-color: var(--cor-secundaria);
border-radius: 50%;
animation: rotate 2s linear infinite;
}

@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.navbar-dark .navbar-nav > .nav-item > .nav-link:hover {
color: gold;
background-color: transparent;
}

.navbar-dark .dropdown-menu .dropdown-item:hover {
background-color: transparent;
color: gold;
}

.copa-logo { max-width: 256px; }
.copa-mini-logo { max-width: 256px; max-height: 256px; }
.nav-dark .nav-link.active,
.nav-dark .nav-link:hover {
background-color: #0000ff;
color: #fff;
}

.nav-dark .nav-link {
color: #f4f4f4;
background-color: #333;
}

.wg_rank img{ width: 25px; margin: 0 auto; }
.wg_rank td h3 + .fas { margin-left: 10px; }

#clubesCarousel .carousel-inner .carousel-item .col-md-2 > .d-flex {
background-color: white;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 10px;
margin: 15px 0;
transition: transform 0.3s, box-shadow 0.3s;
}

#clubesCarousel .carousel-inner .carousel-item .col-md-2 > .d-flex:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

#clubesCarousel .carousel-inner .carousel-item .col-md-2 .d-flex p {
color: #000;
font-weight: bold;
margin: 10px 0 0;
text-align: center;
}

.carousel-control-prev { left: 30px; }
.carousel-control-next { right: 30px; }
.carousel-control-prev-icon,
.carousel-control-next-icon {
filter: invert(1);
background-color: transparent;
opacity: 1 !important;
}

.carousel-control-prev,
.carousel-control-next {
background-color: white;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}

.carousel-control-prev { left: 10px; }
.carousel-control-next { right: 10px; }
.carousel-control-prev:hover,
.carousel-control-next:hover {
background-color: #f0f0f0;
}

.texto-primario {color: var(--cor-texto-primaria) !important;}
.texto-secundario {color: var(--cor-texto-secundaria) !important;}
.bg-primario {background-color: var(--cor-primaria) !important;}
.bg-primario-escuro {background-color: var(--cor-primaria-escura) !important;}
.bg-primario-claro {background-color: var(--cor-primaria-clara) !important;}
.bg-secundario {background-color: var(--cor-secundaria) !important;}
.bg-secundario-escuro {background-color: var(--cor-secundaria-escura) !important;}
.bg-secundario-claro {background-color: var(--cor-secundaria-clara) !important;}
.link-texto-secundario {color: var(--cor-texto-secundaria) !important; transition: color 0.3s ease-in-out;}
.link-texto-secundario:hover {color: var(--cor-hover-texto-secundaria) !important;}
.header-bg {
background-image: url('../../img/banners/banners25.png');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.footer-bg {
background-image: url('../../img/banners/banners25.png');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

.botao-copa {
background-color: #0d6efd;
border-color: #0d6efd;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
margin:0 auto;
text-decoration: none;
color:white;
}
.botao-copa:hover {
background-color: #0054e3;
color:white;
}

.sidebar {
background-color: #0054e3;
padding: 15px;
}
.sidebar h4 {
border-bottom: 1px solid white;
padding-bottom: 10px;
margin-bottom: 10px;
}
.sidebar p {
font-size: 14px;
}
.orank {
background-color: #0d6efd;
color: white;
border-radius:10px;
}

.orank:hover {
background-color: #0054e3;
color: white;
border:1px white solid ;
}

/* copaneotec */

.table-copa {
width: 100%;
max-width: 1200px;
margin-bottom: 10px;
}

.table-copa th, .table-copa td {
text-align: center;
vertical-align: middle;
}

.table-copa .table th, .table-copa .table td {
padding: 5px;
}

.table-copa .table .col-posicao {
width: 5%;
font-weight:700;
color:black;
}

.table-copa .table .col-time {
width: 25%;
color:black;
}

.table-copa .table .col-logo {
width: 10%;
}

.table-copa .table .col-placar {
width: 20%;
color:white;
background-color:#0d6efd;
}

.table-copa .table .col-placar h3 span{
color:white;
font-size:13px;
font-weight:bold;
}

.table-copa .img-fluid {
max-width: 50px;
}

@media (max-width: 767px) {
.table-copa .table th, .table-copa .table td {
padding: 5px;
}
}
.nav-tabs .nav-link {
background-color: #0000FF; /* Azul */
color: white; /* Texto branco */
border-radius: 10px 10px 0 0;
transition: background-color 0.3s ease;
}

.nav-tabs .nav-link:hover {
background-color: #0000CC; /* Azul mais escuro no hover */
color: white;
}

.nav-tabs .nav-link.active {
background-color: #000099; /* Azul mais escuro para aba ativa */
color: white;
}
/* Estilos para as imagens dos jogadores */
.player-image {
position: absolute;
z-index: 10;
height: 207px; /* Altura base para telas maiores */
top: 131px; /* Posição superior base */
object-fit: contain; /* Garante que a imagem se ajuste sem distorcer */
transition: all 0.3s ease-in-out; /* Transição suave para responsividade */
pointer-events: none; /* Impede que as imagens bloqueiem cliques */
}
.player-arrascaeta {
left: 15%;
}

.player-cr7 {
left: 28%;
}

.player-messi {
right: 28%;
}

.player-mbappe {
right: 15%;
}
.table-copaneotec {
width: 100%;
max-width: 960px;
margin-bottom: 10px;
}

.table-copaneotec th, .table-copaneotec td {
text-align: center;
vertical-align: middle;
}

.table-copaneotec .table th, .table-copaneotec .table td {
padding: 5px;
}

.table-copaneotec .table .col-posicao {
width: 2%;
}

.table-copaneotec .table .col-time {
width: 25%;
}

.table-copaneotec .table .col-logo {
width: 5%;
}

.table-copaneotec .table .col-placar {
width: 15%;
}

.table-copaneotec .logoclube {
max-width: 50px;
}

@media (max-width: 767px) {
.table-copaneotec .table th, .table-copaneotec .table td {
padding: 5px;
}
}