* {
    box-sizing: border-box; /*padding y el border en el ancho y alto total de un elemento, facilitando el diseño. */
    margin: 0;
    padding: 0;
    /* Línea 4: Resetea el padding predeterminado de todos los elementos a cero. */
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: black; /* NEGRO (Fondo general) */
    color: white; 
    line-height: 1.6; /*controla el interlineado,osea , la cantidad de espacio vertical que hay entre las líneas de un párrafo o cualquier bloque de texto.*/
   
}

a {
    text-decoration: none; 
    color: inherit; /* hace que el enlace coja el color de la caja padre*/
}

ul {  
    list-style: none; /*le estpy diciendo que a la lista en desorden no tenga ningun estilo*/  
}



.header-principal {
    padding: 30px 20px;
    text-align: center;
}

.titulo-pagina {
    font-family: 'Oswald', sans-serif;
    font-size: 4em;
    text-transform: uppercase;/*Convierte todo el texto del título a mayúsculas.*/
    letter-spacing: 5px; /*esta me ayuda al espacio que hay entre letras*/
    border-bottom: 3px solid #ffeb3b;
    display: inline-block; /* esta etiqueta es una de mis faboritas me ayuda a que la linea del border botton no se extienda por toda la pantalla y se acomode al texto*/
}

/* MENÚ DE NAVEGACIÓN */
.menu-navegacion {
    background-color: #007bff; 
    padding: 10px 0;
    /* Línea 28: Relleno vertical para la barra del menú. */
}

.menu-navegacion ul {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.menu-navegacion a {
    color: #ffffff; 
    padding: 8px 15px;
    /* Línea 35: Relleno alrededor del texto para que los enlaces sean más fáciles de clicar. */
    font-weight: bold; /*negrilla*/
   
}



/*BUSCADOR */
.seccion-buscador {
    padding: 20px;                            
    text-align: center;
}


/* decpracion para mi campo de busqueda*/
.campo-busqueda input {
    width: 100%;
    max-width: 500px;/*este me ayuda a que no se amplie demaciado en pantallas muy grandes*/
    padding: 12px 15px;
    border: 2px solid white; 
    border-radius: 25px;
    background-color: transparent;
    color: white; 
    font-size: 1em;
}

.campo-busqueda input::placeholder {
    /* para explicar los :: son para texto invisbles que no existen, que estan temporalmente, y practicamnete estoy diciendo al texto buscador le cambiare el color temporalmente*/
    color: rgba(255, 255, 255, 0.7); 
}

/*LISTA DE JUGADORES */
.contenedor-principal {
    max-width: 1200px;
    /*Establece un ancho máximo de 1200px para el contenido central. */
    margin: 0 auto;/*recordar que sirve para centrar horizontalmente*/
    padding: 20px;
}

.lista-jugadores {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tarjeta-jugador {
    display: flex;
    background-color: rgba(18, 19, 26, 0.548); 
    border: 1px solid white; 
    border-radius: 10px;
    padding: 20px;
    align-items: center;/*me ayudo a centrar la foto y el texto verticalmente*/
}

.foto-jugador {
    flex: 0 0 100px;/* le digo que la foto tendra un ancho maximo de 100px, el primer cero es para apliarse si sobra espacio y el segundo y para encongerse*/
    height: 100px;
    border-radius: 5px;
    overflow: hidden;/* Asegura que la imagen no se salga si es más grande que el contenedor*/
    border: 2px solid #007bff; 
    margin-right: 20px;/*Espacio de 20px a la derecha de la foto, separándola de la info.*/
}

.foto-jugador img {
    width: 100%;
    height: 100%;
    object-fit: cover;/*me ayuda a justa la imagen para cubrir todo el contenedor sin deformarse, recortándola si es necesario. */
    
}

.info-jugador h3 {
    font-size: 1.5em;
    color: yellow; 
}

.info-jugador .equipo {
    font-weight: bold;/*negrilla*/
    color: #0a315c; 
}

.info-jugador .goles {
    color: rgba(255, 255, 255, 0.8); 
}


.pie-pagina {
    
    background-color: rgba(0, 0, 0, 0.349); 
    color: rgba(255, 255, 255, 0.6); 
    text-align: center;
    padding: 20px;
    
}


#volver {
    position: fixed;
    bottom: 30px;    
    right: 30px;     
    
   
    width: 100px;    
    height: 100px;   
    border-radius: 50%; 
    
    background-color: rgba(255, 255, 255, 0.2); 
    
    border: 2px solid rgba(255, 255, 255, 0.5);
    
    
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente */
    text-align: center;      /* me asegura que las palabras se alineen al medio */
    
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    padding: 10px; /* Un poco de espacio interno para que el texto no toque los bordes */

    /* 7. TU EFECTO DE RESPLANDOR (Mantenemos tu sombra) */
    box-shadow: 0px 0px 20px rgba(30, 11, 202, 0.8);
    
    /* 8. CURSOR */
    cursor: pointer;
}

footer{
    margin: 0 auto;
}