/* =========================================
   VARIABLES DE COLOR (Paleta "Clean Studio")
   ========================================= */
:root {
    --bg-color: #fdfdfd;       /* Blanco casi puro, muy limpio */
    --text-color: #2d3436;     /* Gris oscuro (no negro) para leer bien */
    --text-dim: #636e72;       /* Gris medio para la descripción */
    --card-bg: #ffffff;        /* Fondo blanco puro para las cajas */
    --accent: #1dcccc;         /* Un morado/lavanda suave y creativo */
    --border-soft: #ececec;    /* Borde casi invisible */
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.05); /* Sombra elegante */
}

/* =========================================
   ESTRUCTURA BASE (Centrado igual que hacking)
   ========================================= */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    
    /* CONFIGURACIÓN FLEXBOX ACTUALIZADA */
    display: flex;
    justify-content: center; /* Mantiene el centrado horizontal (izquierda-derecha) */
    
    /* CAMBIOS PARA SUBIR EL CONTENIDO: */
    align-items: flex-start; /* Alinea el contenido arriba del todo */
    padding-top: 120px;      /* Empuja el contenido hacia abajo (ajusta este número si quieres más o menos) */
    
    min-height: 100vh;
    box-sizing: border-box;  /* Importante para que el padding no rompa el ancho/alto */
}
.container {
    width: 90%;
    max-width: 480px; /* Un pelín más ancho para que respire */
    padding: 20px;
    text-align: center;
}

/* =========================================
   TIPOGRAFÍA
   ========================================= */
/* Aunque la clase se llame 'neon-title' en el HTML, 
   aquí la estilizamos para que sea elegante y limpia */
.neon-title {
    color: var(--accent);
    font-size: 2.5em;
    font-weight: 700;
    margin-bottom: 5px;
    letter-spacing: -1px;
    text-shadow: none;
    
    /* --- AÑADIR ESTAS 4 LÍNEAS NUEVAS --- */
    display: flex;            /* Convierte el título en una caja flexible */
    justify-content: center;  /* Centra el contenido horizontalmente */
    align-items: center;      /* Centra el contenido VERTICALMENTE (La clave) */
    gap: 10px;                /* Añade un espacio elegante entre el nombre y la barra */
}

.subtitle {
    color: var(--text-dim);
    font-weight: 300;
    font-size: 0.8em;
    vertical-align: middle;
}

/* Descripción editable */
.description {
    font-size: 1.1em;
    margin-bottom: 40px;
    color: var(--text-dim);
    line-height: 1.6;
    /* Indicador sutil de que es editable */
    border-bottom: 1px dashed transparent; 
    transition: border-color 0.3s;
}

.description:hover {
     border-color: #dfe6e9; 
     cursor: text;
}

/* =========================================
   ENLACES (ESTILO TARJETAS MINIMALISTAS)
   ========================================= */
.links {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.link-item {
    display: flex; /* Para alinear icono y texto mejor */
    align-items: center;
    justify-content: center; /* Centrado */
    text-decoration: none;
    color: var(--text-color);
    padding: 18px 0; /* Un poco más alto para elegancia */
    
    background-color: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: 12px; /* Bordes más redondeados y amables */
    
    font-size: 1.1em;
    font-weight: 500;
    
    /* Sombra suave en lugar de brillo */
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Efecto Hover: Elevación y Color */
.link-item:hover {
    transform: translateY(-3px); /* Se eleva un poco */
    box-shadow: var(--shadow-soft); /* La sombra crece */
    border-color: var(--accent); /* El borde se pinta del color principal */
    color: var(--accent); /* El texto cambia al color principal */
}

/* Iconos */
.link-item i {
    margin-right: 12px;
    color: var(--accent); /* Iconos ya tienen color */
    font-size: 1.2em;
    transition: transform 0.3s;
}

.link-item:hover i {
    transform: scale(1.1); /* El icono crece un poquito */
}