/* Click · Perfil · detalle de layout
   Desktop: la portada queda completamente sola, sin tarjetas montadas encima.
   Móvil conserva la composición compacta actual. */

@media (min-width:901px){

  /* Altura suficiente para portada + bloque inferior sin superposición. */
  body.profile-premium-v396 .profile-v396-hero,
  .profile-premium-v396 .profile-v396-hero{
    min-height:735px!important;
  }

  /* La portada ocupa únicamente la parte superior. */
  .profile-v396-cover{
    top:0!important;
    left:0!important;
    right:0!important;
    height:360px!important;
    border-radius:36px!important;
  }

  /* Tarjeta principal totalmente debajo de la portada. */
  .profile-v396-identity-card{
    left:28px!important;
    top:385px!important;
    width:420px!important;
    min-height:310px;
  }

  /* Estadísticas también debajo de la portada y alineadas con la tarjeta. */
  .profile-v396-stats-card{
    left:480px!important;
    right:34px!important;
    top:385px!important;
    min-height:120px!important;
  }

  /* Insignias debajo de las estadísticas, no encima de la portada. */
  .profile-badges-v2-showcase{
    left:480px!important;
    right:34px!important;
    top:525px!important;
    min-height:142px!important;
  }

  /* El contenido comienza después del hero, sin subir por detrás. */
  .profile-v396-content-grid{
    margin-left:480px!important;
    margin-top:16px!important;
  }

  /* Engranaje permanece dentro del área visual de portada. */
  .profile-v396-hero > .profile-settings-control{
    top:24px!important;
    right:26px!important;
  }
}

/* Ajuste intermedio para pantallas de PC más estrechas,
   manteniendo todavía la portada sin superposición. */
@media (min-width:901px) and (max-width:1200px){
  body.profile-premium-v396 .profile-v396-hero,
  .profile-premium-v396 .profile-v396-hero{
    min-height:735px!important;
  }

  .profile-v396-identity-card{
    left:20px!important;
    width:350px!important;
  }

  .profile-v396-stats-card{
    left:390px!important;
    right:20px!important;
  }

  .profile-badges-v2-showcase{
    left:390px!important;
    right:20px!important;
  }

  .profile-v396-content-grid{
    margin-left:390px!important;
  }
}

/* En tablet/móvil se respeta el layout responsive existente. */
@media (max-width:900px){
  body.profile-premium-v396 .profile-v396-hero,
  .profile-premium-v396 .profile-v396-hero{
    min-height:auto!important;
  }
}