/* ========================================= */
/* RESET */
/* ========================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* ========================================= */
/* BASE */
/* ========================================= */

body{
font-family:'Ysabeau Infant', sans-serif;
font-size:clamp(14px,0.8vw,16px);
overflow-x:hidden;

}

body::-webkit-scrollbar{
display:none;
}

/* ========================================= */
/* CONTAINER PADRÃO DO SITE */
/* ========================================= */

.container-principal{

max-width:1100px;

margin:0 auto;

padding:0 10px;

}

/* ========================================= */
/* SEÇÃO BANNER */
/* ========================================= */

.secao-banner{

min-height:100vh;

position:relative;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

padding-bottom:60px;

}

/* ========================================= */
/* VIDEO FUNDO */
/* ========================================= */

.secao-banner video{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;

z-index:-1;

pointer-events:none;

}

/* ========================================= */
/* FOTO PERFIL */
/* ========================================= */

.container-foto{

width:clamp(180px,25vw,210px);

aspect-ratio:1/1;

margin-top:60px;

margin-bottom:20px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:linear-gradient(90deg,#ffdf00,#009c3b);

position:relative;

z-index:2;  /* garante que fique acima do vídeo */

}

.foto-perfil{

width:clamp(165px,23vw,195px);

aspect-ratio:1/1;

border-radius:50%;

object-fit:cover;

display:block;

}

/* ========================================= */
/* TITULO */
/* ========================================= */

.logo-titulo{

color:white;

font-size:clamp(26px,3vw,38px);

margin-top:20px;

position:relative;

text-shadow:3px 3px 5px black;

}

/* TARJA */

.logo-titulo::before{

content:"";

position:absolute;

bottom:2px;

left:5px;

width:43px;

height:5px;

border-radius:4px;

background:linear-gradient(90deg,#ffdf00,#009c3b);

}

/* ========================================= */
/* VERIFICADO */
/* ========================================= */

.icone-verificado{

width:clamp(16px,2vw,20px);

margin-left:8px;

vertical-align:middle;

}

/* ========================================= */
/* CONTAINER LINKS */
/* ========================================= */

.container-links{

width:100%;

max-width:700px;

padding:0 20px;

margin-top:40px;

display:flex;

flex-direction:column;

align-items:center;

}

/* ========================================= */
/* VIDEO*/
/* ========================================= */

.secao-banner video{

filter:brightness(0.85);

}

/* ========================================= */
/* BOTÕES */
/* ========================================= */

.secao-banner a{

display:flex;

align-items:center;

width:100%;

padding:clamp(12px,2vw,16px);

margin-top:15px;

background-color:rgba(0,0,0,0.6);

border-radius:30px;

color:white;

text-decoration:none;

font-family:Montserrat;

position:relative;

font-size:clamp(15px,1.8vw,18px);

}

/* TEXTO BOTÃO */

.secao-banner a span{
margin:auto;
}

/* ÍCONE BOTÃO */

.secao-banner a img{

width:clamp(18px,2vw,22px);

position:absolute;

left:15px;

}

/* ========================================= */
/* SEÇÃO ESTATÍSTICAS */
/* ========================================= */

.secao-estatisticas{

min-height:100vh;

background-image:url("./assets/imagem-de-fundo.jpg");

background-size:cover;

background-position:center;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

padding:40px 20px;

}

/* ========================================= */
/* TITULO ESTATÍSTICAS */
/* ========================================= */

.titulo-estatisticas{

font-size:clamp(26px,3vw,40px);

color:white;

margin-bottom:40px;

text-shadow:3px 5px 5px black;

}

/* ========================================= */
/* TABELA */
/* ========================================= */

.tabela-estatisticas{

background-color:rgba(0,0,0,0.37);

color:white;

border-collapse:collapse;

font-family:Montserrat;

font-weight:bold;

width:100%;

max-width:850px;

font-size:clamp(13px,1.4vw,16px);

border-radius:8px;
overflow:hidden;
margin-top:10px;

}

/* CÉLULAS */

.tabela-estatisticas th,
.tabela-estatisticas td{

padding:clamp(8px,1.3vw,16px);

text-align:center;

}

/* ICONES TIMES */

.tabela-estatisticas img{

width:clamp(20px,2vw,26px);
height:clamp(20px,2vw,26px);

object-fit:contain;

margin-right:8px;

}

/* PRIMEIRA COLUNA */

.tabela-estatisticas td:first-child{

display:flex;

align-items:center;

gap:8px;

justify-content:flex-start;

}

/* coluna Temporadas*/
/* evita quebra na coluna de temporadas */

.tabela-estatisticas td:nth-child(2),
.tabela-estatisticas th:nth-child(2){

white-space:nowrap;

}

/* LINHAS ALTERNADAS */

.tabela-estatisticas tr:nth-child(even){

background-color:rgba(255,255,255,0.6);

color:black;

}

/* CABEÇALHO */

.tabela-estatisticas th{

background-color:rgba(0,0,0,0.85);

}

/* ========================================= */
/* RODAPÉ */
/* ========================================= */

footer{

background-color:#000;

color:#fff;

text-align:center;

padding:20px;

font-family:Montserrat;

}

footer a{

color:#ffdf00;

text-decoration:none;

}

.marca{

font-size:10px;

vertical-align:super;

margin-left:2px;

}

/* ========================================= */
/* MOBILE – TABELA RESPONSIVA */
/* ========================================= */

@media (max-width:600px){

/* corrigir deslocamento da tabela no mobile */

.tabela-estatisticas{

width:100%;

margin-left:0;

margin-right:0;

}

/* reduzir espaço lateral das células */

.tabela-estatisticas th,
.tabela-estatisticas td{

padding:4px 2px;

}

/* ícones menores */

.tabela-estatisticas img{

width:16px;
height:16px;

margin-right:4px;

}

/* evita quebra estranha */

.tabela-estatisticas th{

white-space:nowrap;

}

.secao-estatisticas{

padding:20px 0.2px;

}

}

/* ========================================= */
/* MELHORIAS VISUAIS DA TABELA */
/* ========================================= */

/* ========================================= */
/* LINHA TOTAL DA TABELA */
/* ========================================= */

.linha-total{

background-color:#000;   /* fundo preto */

color:#fff;              /* texto branco */

font-weight:bold;        /* fonte negrito */

}


.linha-total td:nth-child(4){

color:#000;

}
/* hover nas linhas */

.tabela-estatisticas tbody tr:hover{

background-color:rgba(255,255,255,0.2);

}

.resumo-carreira{

color:#ffffff;            /* texto branco */

font-family:Montserrat;

font-weight:600;

margin-top:-10px;         /* aproxima do título */

margin-bottom:35px;       /* afasta da tabela */

font-size:clamp(16px,2vw,20px);

text-align:center;

text-shadow:2px 2px 4px black;

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:8px;

}


/* destaque gols */

.estat-gols{
color:#ffdf00;
font-weight:700;
}

/* destaque seleção */

.linha-selecao{
background:rgba(255,223,0,0.15);
}

/* hover suave */

.tabela-estatisticas tbody tr{
transition:0.25s;
}

/* ========================================= */
/* DESTAQUE COLUNA GOLS */
/* ========================================= */

.tabela-estatisticas td:nth-child(4),
.tabela-estatisticas th:nth-child(4){

color:#ffdf00;

font-weight:700;

}