/* =========================================================
   The Mindset — linktree
   FASE 1: andamiaje. El diseño final llega en la fase 2.

   Para retematizar el sitio completo basta con cambiar
   las variables de :root. No hay colores sueltos abajo.

   El acento difiere del de Julian solo para distinguir los
   dos sitios durante las pruebas. La identidad real de cada
   marca se define en la fase 2, con logos y referentes.
   ========================================================= */

:root {
  /* Color */
  --color-fondo: #0b0f14;
  --color-superficie: #151b23;
  --color-superficie-hover: #1e2630;
  --color-borde: #28313d;
  --color-texto: #f2f5f8;
  --color-texto-suave: #98a4b3;
  --color-acento: #4da3ff;
  --color-acento-texto: #06131f;

  /* Tipografía */
  --fuente-cuerpo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fuente-titulo: var(--fuente-cuerpo);

  /* Forma y ritmo */
  --radio: 14px;
  --radio-boton: 12px;
  --ancho-max: 480px;
  --espacio: 12px;
}

/* ---------- Reset mínimo ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;

  font-family: var(--fuente-cuerpo);
  color: var(--color-texto);
  background: var(--color-fondo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* ---------- Contenedor ---------- */

.tarjeta {
  width: 100%;
  max-width: var(--ancho-max);
}

/* ---------- Perfil ---------- */

.perfil {
  text-align: center;
  margin-bottom: 28px;
}

.perfil__avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
  border: 2px solid var(--color-borde);
  background: var(--color-superficie);
}

.perfil__nombre {
  font-family: var(--fuente-titulo);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.perfil__bio {
  font-size: 0.95rem;
  color: var(--color-texto-suave);
  margin: 0 auto;
  max-width: 32ch;
  text-wrap: balance;
}

/* ---------- Botones ---------- */

.enlaces {
  display: flex;
  flex-direction: column;
  gap: var(--espacio);
}

.boton {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;

  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-boton);

  color: inherit;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;

  transition: background-color 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.boton:hover {
  background: var(--color-superficie-hover);
  border-color: color-mix(in srgb, var(--color-acento) 40%, var(--color-borde));
}

.boton:active { transform: scale(0.985); }

.boton__icono {
  flex: 0 0 20px;
  height: 20px;
  color: var(--color-texto-suave);
}

.boton__icono svg { width: 20px; height: 20px; display: block; }

.boton__texto { flex: 1; }

/* Botón destacado: la acción que más queremos que ocurra */
.boton--primario {
  background: var(--color-acento);
  border-color: var(--color-acento);
  color: var(--color-acento-texto);
}

.boton--primario:hover {
  background: color-mix(in srgb, var(--color-acento) 88%, white);
  border-color: color-mix(in srgb, var(--color-acento) 88%, white);
}

.boton--primario .boton__icono { color: inherit; }

/* ---------- Redes ---------- */

.redes {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.red {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--color-texto-suave);
  transition: color 0.18s ease, background-color 0.18s ease;
}

.red svg { width: 22px; height: 22px; }

.red:hover {
  color: var(--color-texto);
  background: var(--color-superficie);
}

/* ---------- Pie ---------- */

.pie {
  margin-top: 28px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-texto-suave);
}

.pie p { margin: 0; }

/* ---------- Accesibilidad ---------- */

:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}