:root {
    --primary-color: #ffffff;
    --accent-color: #223d8dde;
    --text-color: #ffffff;
    --bg-color: #292929;
    --card-bg: #3d3d3d;
    --button-bg: #343434;
    --spacing_unit: 10px;

}


* {
    /*border: 1px solid red;*/ /* Dibuja un borde rojo de 1 pixel } */
    /*background-color:#353535;*/
    box-sizing: border-box; /* ¡La regla de oro! */
    margin: 0;             /* Limpiamos márgenes por defecto */
    padding: 0;
}

body {
    font-family: sans-serif; /* Usa una tipografía limpia sin remates */
    text-align: center;      /* Alinea todo el texto y elementos inline al centro */
    background-color: var(--bg-color); /* Un gris muy suave de fondo */
    color: var(--text-color);
    display: flex;         
    justify-content: center; 
    align-items: center;     
    min-height: 100vh;
}

h1 {    
    color: #dcdcdc; /* Un azul oscuro elegante */

}

.link-list {
    list-style: none; /* Adiós a los 'bullets' */
    padding: 0;       /* Quitamos el relleno automático */
}

.link-list a {
    display: block;             /* Importante: Convierte el enlace (inline) en bloque para poder darle tamaño */
    background-color: var(--button-bg);    /* Fondo blanco */
    color: var(--text-color);            /* Letra oscura */
    text-decoration: none;      /* Quita el subrayado azul feo */
    padding: 15px;              /* Espacio interno para que se vea gordito */
    margin: 10px auto;          /* Separación entre botones y centrado (auto) */
    width: 80%;                 /* Que ocupe el 80% del ancho de la tarjeta */
    border-radius: 8px;         /* Bordes redondeados */
    border: 1px solid var(--accent-color);     /* Un borde sutil */
    transition: background 0.4s; /* Preparación para la animación */
}

.link-list a:hover {
    background-color: #2b2b2b; /* Se oscurece un poco */
    transform: scale(1.02);    /* Crece un poquito (efecto pop) */
}



.profile-card {
    width: 90%;               /* La tarjeta ocupará el 90% del ancho de la pantalla */
    background-color: var(--card-bg); /* La tarjeta será blanca */
    max-width: 400px;        /* ¡Aquí está el truco! No dejes que mida más de 400px */
    margin: 50px auto;       /* 50px de separación arriba y 'auto' para centrar la caja entera */
    padding: 30px;           /* Espacio interno para que el contenido no toque los bordes */
    border-radius: 20px;     /* Bordes redondeados de la tarjeta */
    box-shadow: 0 10px 30px rgba(38, 73, 185, 0.422); /* Una sombra suave para dar profundidad */
    box-sizing: border-box;
}


.texto-hover{
    display: none;
}

.btn-hover:hover .texto-original {
    display: none; /* Escondemos el original */
}

.btn-hover:hover .texto-hover {
    display: inline; /* Mostramos el nuevo */
}



.titulo-hover{
    display: none;
    transition: 0.4s;
}

.user-name:hover .titulo-original{
    display : none;
}


.user-name:hover .titulo-hover{
    display: inline;
}