/* css/layout.css
   ==========================================================================
   Diseño Estructural (Layout)
   ==========================================================================
   Aquí controlamos dónde y cómo se colocan los bloques grandes de la página.
*/

/* 
  1. Contenedor Principal
  Envuelve todo el contenido visible (por encima del fondo).
*/
.main-container {
  /* Obliga a este contenedor a ubicarse sobre los elementos de fondo absolutos */
  position: relative;
  z-index: 10;

  /* Altura mínima de la pantalla */
  min-height: 100vh;

  /* Flexbox para alinear el contenido al centro, pero empujado hacia abajo */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  /* Espaciado interno (padding) aumentado considerablemente arriba para forzar todo hacia abajo */
  padding: 17rem 1.5rem 3rem 1.5rem;
  /* 5rem arriba/abajo, 1.5rem izquierda/derecha */
}

/* 
  2. Sección de Perfil (Avatar + Nombre + Subtítulo)
*/
.profile-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 2rem;
  /* Separación con los botones (mb-16) */
}

/* Contenedor del Título para alinear el ícono de verificado */
.title-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  /* Espacio entre nombre e ícono */
  margin-bottom: 1rem;
  /* mb-4 */
}

/* 
  3. Contenedor de Botones (Enlaces principales)
*/
.links-container {
  width: 100%;
  max-width: 42rem;
  /* max-w-2xl: restringe el ancho para que no sea inmenso en PC */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* gap-6: Espacio vertical entre cada botón */
  margin-bottom: 5rem;
  /* mb-20: Separación con el footer */
}

/* 
  4. Footer de Redes Sociales
*/
.social-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2.5rem;
  /* gap-10: Espacio generoso entre íconos sociales */
  margin-top: 0;
  /* mt-auto: Empuja este contenedor al fondo si sobra espacio */
}

/* 
  5. Contenedor de Fondos (Backgrounds)
  Maneja las imágenes y degradados que van detrás de todo el contenido.
*/
.bg-container {
  position: absolute;
  inset: 0;
  /* top: 0, right: 0, bottom: 0, left: 0 */
  z-index: 0;
  background-color: rgb(164, 158, 154);
}